전체 글51 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. eBUS SDK Python API를 활용한 Jai 카메라 다중 채널 스트리밍 구현 이 글에서는 Python과 PyQt5를 사용하여 eBUS SDK Python API를 기반으로 Jai 카메라와의 다중 채널 카메라 스트리밍 애플리케이션을 개발하는 과정을 설명합니다. 이 프로젝트는 여러 카메라에서 실시간 스트리밍 데이터를 수집하고, 이를 PyQt5 기반 UI에서 표시하며, 각 채널의 노출 시간을 조정할 수 있는 기능을 포함합니다. Jai 카메라를 통해 수집한 이미지를 활용한 딥러닝 작업을 진행하기에 앞서 개발중에 있는 카메라 관련 초기 개발모델에 대해서 정의합니다. 프로젝트 구성프로젝트는 다음 세 가지 주요 파일로 구성되어 있습니다:main.py: 애플리케이션의 진입점으로, PyQt5 애플리케이션을 초기화하고 주요 클래스와 UI를 실행합니다.device_manager.py: eBUS SD.. 2025. 1. 3. 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. 이전 1 2 3 4 ··· 9 다음