Node/npm-Vite-VS Code 피드백 루프

Node 설치

LTS 버전으로 패키지 설치와 개발 서버 실행 기준을 맞춘다.

runtime

Vite 템플릿으로 React 앱 골격과 빌드 스크립트를 만든다.

scaffold

VS Code 확장과 설정으로 저장 시 포맷, lint, 타입 힌트를 받는다.

feedback

HMR로 수정한 컴포넌트가 새로고침 없이 반영되는지 확인한다.

HMR

버전

Node 버전이 팀과 CI에서 같아야 설치 오류가 줄어든다. nvm, fnm, Volta 같은 도구로 버전을 고정할 수 있다.

same runtime

스크립트

dev, build, preview 명령의 역할을 구분한다. 개발 서버 통과와 프로덕션 빌드 성공은 다른 신호다.

different checks

진단

편집기 경고를 무시하지 말고 실행 전 피드백으로 사용한다. 자동 포맷은 스타일 논쟁보다 일관성을 만든다.

빠른 반복 루프

설치 재현 lockfile 기준으로 새 환경에서 install이 성공한다.

빌드 확인 개발 서버뿐 아니라 production build도 한 번 실행한다.

포맷 기준 저장 시 자동 포맷이 프로젝트 규칙과 충돌하지 않는다.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev