Next.js 동적 라우트 완전 정리: [slug], params, catch-all
App Router의 [slug], params Promise, useParams, generateStaticParams, catch-all과 실무 404·slug 변경 정책을 예제로 정리합니다.
hebi_admin
총 232개의 글
GSAP이 처음일 때 기초 사용법: 설치부터 기본 애니메이션까지
GSAP을 처음 사용하는 초보자를 위해 CDN과 npm 설치, gsap.to(), gsap.from(), gsap.fromTo(), duration, ease, stagger, timeline까지 기본 사용법을 순서대로 정리한…
Next.js Metadata API 완전 정리: 정적 metadata와 generateMetadata
Next.js App Router에서 metadata, generateMetadata, title 템플릿, canonical, Open Graph, robots를 최신 params Promise 예제로 정리합니다.
Zustand persist 마이그레이션 기준: 저장된 상태 구조가 바뀔 때
Zustand persist에서 저장된 상태 구조가 바뀔 때 version과 migrate가 필요한 기준을 정리합니다. 필드 추가, 필드명 변경, 중첩 구조 변경, 값 의미 변경, partialize 변경 사례를 중심으로 운영…
TypeScript as const 사용법: union 타입을 자동 생성하는 기준
TypeScript의 as const로 배열과 객체 값을 readonly 리터럴 타입으로 좁히고, typeof, keyof, 인덱스 접근 타입을 조합해 union 타입을 자동 생성하는 실무 기준을 정리합니다.
TypeScript 제네릭 쉽게 이해하기: props와 API 응답 타입으로 감 잡기
TypeScript 제네릭을 React props와 API 응답 타입 예시로 쉽게 이해할 수 있도록 정리합니다. any와 제네릭의 차이, GenericList와 ApiResponse 활용 흐름을 함께 살펴봅니다.
환경변수 .env 파일 차이: local, example, development 기준
환경변수를 처음 접하는 개발자를 위해 .env, .env.local, .env.example, .env.development, .env.production 파일의 차이와 사용 기준을 정리합니다. Next.js와 Vite의 클라…
TypeScript optional props와 default value 처리법
React 컴포넌트에서 TypeScript optional props를 사용할 때 기본값을 어디서 처리해야 하는지 정리합니다. `?`, `undefined`, `null`, 구조 분해 기본값, optional callback…
React TypeScript 기본 구조: tsx 파일과 props 타입 기준
React에서 TypeScript를 처음 사용할 때 헷갈리기 쉬운 .ts와 .tsx 차이, 컴포넌트 파일 구조, props 타입 작성 위치를 정리합니다. 처음부터 복잡한 타입 설계로 들어가기 전 기본 구조를 잡는 데 초점을 맞…
TypeScript children 타입: ReactNode와 PropsWithChildren 차이
React TypeScript에서 children 타입을 지정할 때 ReactNode, PropsWithChildren, ReactElement, JSX.Element를 어떻게 구분해야 하는지 정리합니다. children을 필…