FrontEnd24 이미지 컨버터가 포함된 PDF 썸네일 추출 기능 구현 웹 애플리케이션에서 PDF 파일의 썸네일을 생성하는 기능은 사용자 경험을 향상하는 데 중요한 요소입니다. 특히, PDF 파일을 업로드할 때 미리보기를 제공하면 사용자가 보다 직관적으로 파일을 확인할 수 있습니다. 이번 글에서는 이전 글과 동일한 라이브러리를 사용하여 PDF 파일을 webp 이미지로 변환하여 추출하는 방법을 소개합니다.📌 PDF를 이미지로 변환하는 과정1. pdfjs-dist 설정PDF 파일을 다루기 위해 pdfjs-dist 라이브러리를 사용합니다. 먼저, GlobalWorkerOptions.workerSrc를 설정해야 합니다. import * as pdfjsLib from 'pdfjs-dist'pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdfjs/pdf.. 2025. 2. 27. 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 4 다음