Next.js 16.3.0-canary.106의 useCache deprecation 경고와 hybrid not-found 수정 이해하기
Next.js 16.3.0-canary.106에서 확인할 useCache deprecation 경고와 hybrid not-found 수정의 의미를 App Router 유지보수 관점에서 정리합니다.
프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
총 87개의 글
CSS Grid 상세 설명: 2차원 레이아웃을 제대로 이해하고 쓰는 방법
CSS Grid의 기본 구조부터 grid-template-columns, fr, repeat(), minmax(), grid-area, 반응형 카드 레이아웃까지 실무 관점에서 자세히 정리합니다.
Next.js에서 .next 폴더는 어떤 역할을 할까?
Next.js 프로젝트에서 자동으로 생성되는 .next 폴더의 역할을 개발 서버, 프로덕션 빌드, 캐시, Git 관리, 배포 흐름 관점에서 쉽게 정리합니다.
Vite 프로젝트에서 Vitest로 테스트 환경 시작하기
Vite 프로젝트에서 Vitest를 설치하고 실행 스크립트, vite.config 설정, jsdom 환경 선택, 실무 테스트 도입 순서를 정리합니다.
React에서 Vite 사용법: 프로젝트 생성부터 실행과 빌드까지
React 프로젝트를 Vite로 생성하고 실행하는 방법을 npm create vite, 개발 서버 실행, 폴더 구조, 빌드, 기본 설정 흐름에 맞춰 정리합니다.
Next.js 16 Proxy 마이그레이션: Node.js Runtime·matcher 검증
Next.js 16.2.10에서 middleware.ts를 proxy.ts로 옮길 때 Node.js runtime 고정, Edge 예외, matcher, 지원 API, 테스트와 배포 검증을 정확히 정리합니다.
Next.js 동적 라우트 완전 정리: [slug], params, catch-all
App Router의 [slug], params Promise, useParams, generateStaticParams, catch-all과 실무 404·slug 변경 정책을 예제로 정리합니다.
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 예제로 정리합니다.
TypeScript as const 사용법: union 타입을 자동 생성하는 기준
TypeScript의 as const로 배열과 객체 값을 readonly 리터럴 타입으로 좁히고, typeof, keyof, 인덱스 접근 타입을 조합해 union 타입을 자동 생성하는 실무 기준을 정리합니다.