FrontEnd18 Cloudflare 이미지 변환을 활용한 최적화된 이미지 처리 웹사이트에서 이미지 최적화는 필수적인 요소입니다. 특히, 다양한 해상도와 디바이스에서 최적의 품질을 유지하면서 로딩 속도를 개선하는 것이 중요합니다. Cloudflare의 이미지 변환(Image Resizing) 기능을 활용하면 URL을 통해 간단하게 이미지를 변환하고 최적화할 수 있습니다. 이 글에서는 Cloudflare의 이미지 변환 기능을 활용하여 최적화된 이미지 URL을 생성하는 imageConverter 함수와 반응형 이미지 URL을 생성하는 getSource 함수, 그리고 이를 활용한 makeConvertedThumb 함수를 소개합니다.1. imageConverter: Cloudflare를 이용한 이미지 변환 URL 생성const formats = { optimization: ['avif', .. 2025. 3. 4. PDF에서 첫 페이지 썸네일 추출하기 프로젝트에서 PDF 파일의 첫 페이지를 썸네일 이미지로 추출해야 할 때가 있습니다. 이를 위해 PDF.js 라이브러리를 사용하면 간단히 구현할 수 있습니다. 이번 글에서는 PDF 파일의 첫 페이지를 Canvas에 렌더링하고 썸네일 이미지를 생성하는 방법을 설명합니다.1. 프로젝트 준비먼저, 프로젝트를 시작하기 위해 다음과 같은 환경을 설정합니다:패키지 매니저: pnpm기술 스택: TypeScript, pdf.js목표: PDF 파일의 첫 페이지를 썸네일로 변환프로젝트 초기화 및 라이브러리 설치pnpm install -D pdfjs-distpdfjs-dist는 pdf.js의 브라우저 빌드 패키지입니다.2. PDF 첫 페이지를 이미지로 변환하는 함수PDF 파일의 첫 페이지를 썸네일로 변환하는 TypeScrip.. 2025. 1. 22. 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. 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 다음