개발 환경 설정

React 개발 환경 실행 순서

Node와 npm으로 의존성을 설치하고, Vite dev server와 브라우저 DevTools를 오가며 수정 결과와 오류 로그를 바로 확인합니다.

Node.js

node -v, npm -v로 버전을 확인하고 package.json의 scripts를 실행하는 런타임입니다.

npm/Vite

npm create vite@latest 후 npm install, npm run dev로 로컬 서버를 엽니다.

VS Code

ESLint, Prettier, TypeScript 오류와 터미널 로그를 한 화면에서 봅니다.

DevTools

Console, Network, React DevTools로 렌더링 오류와 요청 실패를 추적합니다.

HMR 확인터미널에서 로컬 주소가 뜨고, 브라우저에서 HMR 수정 반영까지 확인하면 기본 환경이 준비된 것입니다.
실패 신호npm command not found, port already in use, module not found는 PATH, 포트, 설치 폴더부터 확인합니다.