FrontEnd21 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. PDF 페이지 분리 처리: CSS를 활용한 페이지 브레이크 최적화 PDF 문서 생성 시 데이터가 페이지를 넘어가거나 잘리는 문제는 빈번하게 발생합니다. 특히 CSS를 활용하여 PDF를 생성할 때 페이지 분리가 적절히 처리되지 않으면 문서의 가독성과 품질이 저하될 수 있습니다. 이 글에서는 PDF 페이지 분리와 관련된 주요 CSS 기법과 최적화 방법에 대해서 테스트 해보며 알아본 내용에 대해서 정리합니다.1. 기본 초기화: Margin과 Padding 초기화PDF 스타일링에서 레이아웃이 예기치 않게 흐트러지는 문제를 방지하려면 모든 요소의 기본 margin과 padding을 초기화하는 것이 중요합니다.* { margin: 0; padding: 0;}일부 라이브러리는 margin과 padding을 강제로 변경하기 때문에, 초기화 설정을 통해 이후 발생할 이슈를 사전에 .. 2024. 9. 4. MSW를 이용한 Mock API 구현 백엔드 API가 완전히 준비되기 전에 프론트엔드 개발을 시작해야 할 때, Mock API는 효율적인 대안이 될 수 있습니다. **MSW(Mock Service Worker)**는 API 요청을 가로채서 사전에 정의된 Mock 데이터를 반환하도록 도와주는 라이브러리입니다. 이 글에서는 MSW를 활용해 Mock API를 구현하는 과정을 단계별로 설명합니다..백엔드 API가 완전히 준비되기 전에 프론트엔드 개발을 시작해야 할 때, Mock API는 효율적인 대안이 될 수 있습니다. **MSW(Mock Service Worker)**는 API 요청을 가로채서 사전에 정의된 Mock 데이터를 반환하도록 도와주는 라이브러리입니다. 이 글에서는 MSW를 활용해 Mock API를 구현하는 과정을 단계별로 설명합니다.1.. 2024. 5. 22. SEO 성능 개선을 위한 Lazy Load 및 이미지 사전 블러 렌더링 구현 SEO 성능과 사용자 경험(UX)을 개선하기 위해 이미지를 Lazy Load 방식으로 로드하고, 렌더링 중 블러 처리된 작은 이미지를 표시하며, 원본 이미지는 뷰포트에 들어오면 로드하도록 구현했습니다. 이 글에서는 해당 기능의 구현 방법과 주요 코드 로직을 설명합니다.주요 기능 설명Lazy Load:이미지를 뷰포트(viewport) 영역 내에 들어왔을 때만 로드하여 불필요한 네트워크 요청을 줄입니다.IntersectionObserver를 활용하여 효율적으로 뷰포트 내 이미지 감지.블러 처리된 사전 렌더링:원본 이미지를 로드하기 전에 블러 처리된 50x50 작은 이미지를 보여줍니다.원본 이미지를 로드한 후 블러를 제거하여 자연스러운 전환.반응형 및 디바이스 최적화:디바이스 유형(모바일, 데스크톱)에 따라 .. 2024. 5. 22. Textarea 높이 자동 조절 Textarea의 높이를 입력에 맞춰서 자동으로 변경하고 싶을 때는 아래와 같이 할 수 있습니다..auto-height { width: 100%;}.auto-height textarea { width: 100%; resize: none; overflow-y: hidden; padding: 15px 15px 5px; line-height: 1.5;} 메모 $(document).ready(function() { $('.auto-height').on('keyup', 'textarea', function (){ $(this).css('height', 'auto'); $(this).height( this.scrollHeight ); .. 2022. 11. 15. 이전 1 2 3 4 다음