Next.js 동적 라우트 slug params catch-all
사용자 ID나 게시글 slug처럼 URL 일부가 데이터에 따라 바뀌는 경우 동적 라우트를 사용합니다.
프론트엔드
HTML·CSS부터 JavaScript, React와 상태관리까지, 화면을 만들고 데이터를 다루는 기술을 배웁니다.
총 177개의 글
GSAP이 처음일 때 기초 사용법: 설치부터 기본 애니메이션까지
선택 심화로 GSAP 기본 메서드와 timeline을 익히고 재생·초기화·동작 줄이기를 갖춘 예제로 확인합니다.
Next.js Metadata API와 generateMetadata
App Router에서는 metadata export와 generateMetadata로 title, description, Open Graph 같은 문서 정보를 구성할 수 있습니다. 정적 페이지와 동적 상세 페이지의 방식이 다…
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 활용 흐름을 함께 살펴봅니다.
React TypeScript optional props 기본값 처리: undefined·null 차이
React TypeScript에서 optional props와 기본값을 구분하고 구조 분해 기본값, undefined·null, optional callback, defaultProps 처리 기준을 예제로 설명합니다.
React TypeScript 기본 구조: tsx 파일과 props 타입 기준
React에서 TypeScript를 처음 사용할 때 헷갈리기 쉬운 .ts와 .tsx 차이, 컴포넌트 파일 구조, props 타입 작성 위치를 정리합니다. 처음부터 복잡한 타입 설계로 들어가기 전 기본 구조를 잡는 데 초점을 맞…
TypeScript children 타입: ReactNode와 PropsWithChildren 차이
React TypeScript에서 children 타입을 지정할 때 ReactNode, PropsWithChildren, ReactElement, JSX.Element를 어떻게 구분해야 하는지 정리합니다. children을 필…
React 컴포넌트 props 타입 지정 부모 자식 값 구조
TaskFlow는 처음부터 TypeScript로 작성했습니다. 따라서 이번 글의 목표는 JavaScript 파일을 tsx로 바꾸는 것이 아닙니다. 프로젝트가 커진 시점에서 props 타입이 컴포넌트의 역할을 제대로 표현하는지…