전체 글54 Zustand를 활용한 리스트 상태 관리 스토어 구현하기 이 글에서는 Zustand와 TypeScript를 활용해 서비스의 리스트들의 데이터를 관리하는 ListStore를 구현하는 과정을 공유합니다.Zustand란?Zustand는 React 기반의 상태 관리 라이브러리로, 가볍고 간단한 API를 제공합니다. 기존의 상태 관리 라이브러리인 Redux와 비교했을 때 설정이 간소화되어 있고, 직관적인 코드 작성을 가능하게 합니다.1. Zustand로 리스트 상태 관리 스토어 구현하기초기 상태 정의하기리스트 상태를 관리하기 위해 listInitialState를 정의합니다. 이 객체는 다양한 리스트 데이터를 초기화합니다.const listInitialState = { ...allLists,};export type ListState = typeof listInitial.. 2024. 12. 30. Next.js 외부 스크립트 로드 방식 분석 및 정리 Next.js 프로젝트들을 진행 중 외부 스크립트를 로드하는 다양한 방식과 그에 따른 장단점을 분석한 내용입니다. 기술적 한계와 실용성을 고려해 정리해보았습니다.1. await import 사용 방식특징:런타임에 ES 모듈을 동적으로 로드하는 방식.Webpack은 정적으로 분석 가능한 경로만 처리 가능하며, 동적 경로는 처리 불가.Webpack의 처리 방식을 우회하려면 webpackIgnore 옵션 사용.장점:모듈 방식으로 코드 분리가 가능.단점:CSR 페이지 전환 시 스크립트 언마운트 문제가 발생 가능.해당 문제는 로드 후의 cleanup 작업을 제대로 하지 않을 경우 발생할 수 있음Webpack 설정에 따라 사용이 제한될 수 있음.보완 코드 예시:React의 useEffect와 cleanup 함수를 .. 2024. 12. 2. Zod를 활용한 공통화 및 유효성 검증 로직 설계: 회원가입 폼 예제 프론트엔드에서 폼 유효성 검증은 사용자 경험(UX) 향상과 데이터 품질 보장을 위해 필수적입니다. 특히 대규모 서비스에서 폼 필드가 반복적으로 사용되거나, 검증 로직이 복잡한 경우, 코드의 재사용성과 유지보수성을 높이는 방식으로 설계해야 합니다. 본 글에서는 Zod를 활용하여 자주 사용하는 필드의 검증 로직을 공통화하고, 회원가입 폼의 유효성 검증 로직을 설계하는 방법에 대해서 정리해보겠습니다.자주 사용하는 필드 공통화반복적으로 사용되는 필드는 zod를 통해 간결하고 일관된 방식으로 처리할 수 있습니다. 예를 들어, 이름, 이메일, 사용자 아이디 등의 필드는 자주 사용되며, 아래와 같이 공통화된 유틸리티 함수를 정의할 수 있습니다.1. 공통 필드 유틸리티 함수import { z } from "zod";c.. 2024. 11. 20. Docker 로컬 환경에서 HTTPS 인증서를 적용하기 위한 OpenSSL 인증서 생성 방법 개발 환경에서 HTTPS를 테스트하거나, 로컬 서버에 보안을 적용하려면 인증서를 생성하여 Docker 컨테이너에 적용해야 하는 경우가 있습니다. 이 글에서는 OpenSSL을 활용하여 로컬 환경에서 사용할 HTTPS 인증서를 생성하고, Docker 컨테이너에 적용하는 방법을 단계별로 설명합니다.1. HTTPS 인증서 생성 준비HTTPS를 적용하려면 SSL 인증서와 개인 키 파일이 필요합니다. 이를 위해 OpenSSL 명령어를 사용하여 로컬에서 인증서를 생성합니다.2. OpenSSL을 활용한 인증서 생성2-1. 개인 키 생성먼저 개인 키 파일(key.pem)을 생성합니다. 이 키 파일은 SSL/TLS 암호화에서 중요한 역할을 하며, 반드시 안전하게 보관해야 합니다.openssl genrsa -out key... 2024. 10. 24. MAC Docker 환경 설정을 위한 자동화 Shell Script ocker 환경을 다수 생성하거나 반복적으로 설정하는 작업은 번거롭고 시간이 많이 소요됩니다. 이를 해결하기 위해, 간단한 Shell Script를 작성하여 Docker 프로젝트를 자동으로 설정하고 구성할 수 있도록 만들어 보았습니다. 이 글에서는 해당 스크립트를 설명하고, 이를 활용해 빠르게 Docker 환경을 구축하는 방법을 안내합니다.Shell Script의 목적이 스크립트는 다음 작업을 자동으로 처리합니다:로컬 호스트에 개발용 도메인 추가프로젝트 디렉토리 및 구조 생성Docker 관련 디렉토리 준비 및 구성프로젝트 저장소를 Clone하여 초기화위 과정을 자동화하면 개발자는 직접 명령어를 입력하는 시간을 줄이고, 빠르게 개발 환경을 구성할 수 있습니다.스크립트 코드 분석아래는 작성된 Shell Sc.. 2024. 10. 24. PDF 페이지 분리 처리: CSS를 활용한 페이지 브레이크 최적화 PDF 문서 생성 시 데이터가 페이지를 넘어가거나 잘리는 문제는 빈번하게 발생합니다. 특히 CSS를 활용하여 PDF를 생성할 때 페이지 분리가 적절히 처리되지 않으면 문서의 가독성과 품질이 저하될 수 있습니다. 이 글에서는 PDF 페이지 분리와 관련된 주요 CSS 기법과 최적화 방법에 대해서 테스트 해보며 알아본 내용에 대해서 정리합니다.1. 기본 초기화: Margin과 Padding 초기화PDF 스타일링에서 레이아웃이 예기치 않게 흐트러지는 문제를 방지하려면 모든 요소의 기본 margin과 padding을 초기화하는 것이 중요합니다.* { margin: 0; padding: 0;}일부 라이브러리는 margin과 padding을 강제로 변경하기 때문에, 초기화 설정을 통해 이후 발생할 이슈를 사전에 .. 2024. 9. 4. 이전 1 2 3 4 5 ··· 9 다음 more