Scaffold

create-next-app 선택지

스캐폴딩 옵션은 나중에 쉽게 보이지 않지만 디렉터리 구조, 타입 검사, 스타일 방식, import 경로에 오래 남는다.

01

라우터 우선 선택

새 프로젝트라면 app router 기준으로 학습하면 layout, loading, server action 흐름을 바로 다룰 수 있다.

02

타입을 초기에 켠다

나중에 TypeScript를 붙이는 것보다 route params, props, API 응답을 처음부터 타입으로 잡는 편이 안전하다.

03

스타일 범위 결정

전역 스타일, 컴포넌트 스코프, 디자인 토큰을 어느 방식으로 관리할지 선택한다.

src/
소스 루트 분리 설정 파일과 앱 코드를 나누어 루트 디렉터리를 덜 복잡하게 만든다.
팀 취향에 맞추되 일관성이 중요하다.
ESLint
초기 품질선 접근성, hook 규칙, import 문제를 빠르게 드러낸다.
자동 수정과 리뷰 기준을 맞춘다.
Tailwind
유틸리티 기반 스타일 빠르게 UI를 만들 수 있지만 클래스가 길어질 수 있다.
디자인 시스템과 같이 정한다.
Alias
이동에 강한 import 깊은 상대 경로를 줄이고 모듈 경계를 읽기 쉽게 만든다.
tsconfig와 bundler 설정이 맞아야 한다.

라우터 · 타입 · 스타일 점검

라우터 app과 pages를 섞는 이유가 명확한가.
타입 API 응답과 route params를 any로 시작하지 않는가.
스타일 컴포넌트 스타일과 전역 스타일의 책임이 정해져 있는가.

선택 메모

// router: app
// language: TypeScript
// style: CSS Modules or Tailwind
// alias: @/* -> src/*