전체보기57 React Hook Form + Zod로 FormProvider 만들기 Form을 쓸 때마다 useForm, FormProvider, zodResolver, defaultValues 설정을 반복하고 있나요? 이 글에서는 **React Hook Form(RHF)**과 Zod를 묶어 매 화면에서 동일한 보일러플레이트를 제거하는 FieldsetFormProvider 래퍼를 만들고, useFormContext로 하위 컴포넌트에서 간결하게 사용하는 패턴을 정리합니다.환경: React 19, react-hook-form v7, zod, @hookform/resolvers1) 문제 정의매 폼에서 useForm({ mode, resolver, defaultValues })를 반복 입력폼 필드가 깊게 중첩되어 props 드릴링이 발생스키마 유효성(Zod)과 RHF를 연결할 때 옵션이 분산됨.. 2025. 10. 21. React Query 기반 커스텀 API 훅 구현 웹 앱을 만들다 보면 API 요청 패턴이 반복됩니다. 매번 useQuery에 같은 옵션을 쓰고, fetch로 비슷한 처리를 하다보면 “이걸 깔끔하게 감추는 훅이 필요하다”는 생각이 듭니다. 이번 글에선 React Query 기본 세팅부터 **커스텀 훅(useApiQuery)**을 만들어 실제 화면에서 쓰는 과정까지, 코드를 중심으로 정리합니다.데모 코드는 TypeScript + React 19, @tanstack/react-query v5 기준입니다.1) QueryClient 설정전역에서 쓸 QueryClient를 만들고 기본값을 지정합니다.import { QueryClient } from "@tanstack/react-query";export const createQueryClient = () => .. 2025. 10. 21. Contents 길이에 따른 스크롤 Flex Start/End 처리 웹 개발을 하다 보면 스크롤이 생길 때 레이아웃 정렬을 유동적으로 바꿔야 하는 경우가 있습니다. 예를 들어, 콘텐츠가 짧을 때는 flex-start로 위에서부터 시작되길 원하고, 콘텐츠가 길어 스크롤이 생기면 flex-end로 하단에 고정되도록 구성하는 시나리오입니다.이번 에서는 두 개의 요소 중 하나라도 콘텐츠가 더 길면 해당 요소를 기준으로 flex-end 또는 flex-start 클래스를 토글해주는 방법을 소개합니다. 구현 목적두 개의 요소를 비교해서 콘텐츠가 더 많은 요소를 기준으로 동적으로 스크롤 상태에 따라 flex-end 또는 flex-start 클래스를 토글하려고 합니다.이를 통해 레이아웃이 콘텐츠의 길이에 맞춰 자연스럽게 조정될 수 있도록 합니다.구현 코드 export const dyna.. 2025. 4. 4. CSS Counter를 활용한 컨텐츠 넘버링 처리 목록이나 리스트를 다룰 때, 자동으로 넘버링을 처리할 수 있다면 얼마나 깔끔할까요? 이런 코드를 만들 때 순수 CSS만으로 이런 처리를 하기가 쉽지 않다고 느낄 수 있습니다. 하지만 CSS Counter를 이용하면 간단하게 해결할 수 있습니다.이번 글에서는 CSS Counter를 활용해서 콘텐츠 자동 넘버링을 구현하는 방법을 소개합니다.결과 미리 보기아래는 우리가 만들게 될 결과 화면입니다.두 가지 버전이 보이죠?일반적인 넘버링 리스트넘버링과 라벨을 함께 사용하는 리스트핵심 기술: CSS CounterCSS Counter는 HTML 요소에 숫자를 자동으로 부여할 수 있는 기능입니다. counter-reset, counter-increment, content 속성을 조합해서 리스트 스타일을 제어합니다.예제.. 2025. 4. 3. getBoundingClientRect를 활용한 Viewport 내의 컨텐츠 요소 체크 방법 웹 개발을 하다 보면 특정 요소가 현재 뷰포트(Viewport)에 들어와 있는지를 판단해야 할 때가 있습니다. 예를 들어, 사용자가 특정 영역에 도달했을 때 애니메이션을 주거나, 스타일을 변경하는 등의 동작을 할 수 있죠. 이 경우 Observer를 활용한 방식 또는 컨텐츠의 높이값을 계산해서 처리하는 방식 등 다양한 방식이 있지만 이번 글에서는 getBoundingClientRect() 메서드를 활용하여, 요소가 뷰포트 안에 들어와 있는지 체크하는 방법을 소개합니다.getBoundingClientRect()란?이 메서드는 DOM 요소의 크기와 뷰포트에 상대적인 위치 정보를 담고 있는 DOMRect 객체를 반환합니다. 이 객체는 top, right, bottom, left, width, height 등의.. 2025. 4. 3. Cloudflare 이미지 변환을 활용한 최적화된 이미지 처리 웹사이트에서 이미지 최적화는 필수적인 요소입니다. 특히, 다양한 해상도와 디바이스에서 최적의 품질을 유지하면서 로딩 속도를 개선하는 것이 중요합니다. Cloudflare의 이미지 변환(Image Resizing) 기능을 활용하면 URL을 통해 간단하게 이미지를 변환하고 최적화할 수 있습니다. 이 글에서는 Cloudflare의 이미지 변환 기능을 활용하여 최적화된 이미지 URL을 생성하는 imageConverter 함수와 반응형 이미지 URL을 생성하는 getSource 함수, 그리고 이를 활용한 makeConvertedThumb 함수를 소개합니다.1. imageConverter: Cloudflare를 이용한 이미지 변환 URL 생성const formats = { optimization: ['avif', .. 2025. 3. 4. 이전 1 2 3 4 ··· 10 다음
