Node + React + pnpm + Vite Quick Setup (30분)
프론트엔드 최신 스택을 위한 빠른 환경 구성 가이드입니다.
1. 설치 순서
- Node.js (LTS): `nvm` 또는 `fnm` 권장
- pnpm: `npm install -g pnpm`
- VS Code: 필수 확장 프로그램(ESLint, Prettier, Tailwind CSS) 포함
2. 필수 설정 3개
- pnpm setup: 전역 저장소 설정 및 쉘 완성 활성화
- VS Code Format on Save: `.prettierrc` 기준 자동 포맷팅
- Vite Proxy: `vite.config.ts`에서 백엔드 API 서버 프록시 설정
3. 흔한 에러 3개 + 해결
1) node_modules 충돌: `rm -rf node_modules pnpm-lock.yaml && pnpm install` 시도
2) TypeScript 경로 에러: `tsconfig.json`의 `paths` 설정 및 VS Code TS 서버 재시작
3) 환경 변수 인식 불가: `.env` 파일 접두사(`VITE_`) 확인
4. 팀 합류 체크리스트 (Day 1)
# 1. 의존성 설치
pnpm install
# 2. 로컬 서버 실행
pnpm dev
# 3. 빌드 테스트
pnpm build
✅ 성능 확인: 브라우저에서 `localhost:5173` 접속 확인