01
Node/npm
버전 확인
명령이 바로 실행되면 설치와 PATH 문제를 먼저 통과한 것입니다.
node -v
npm -v
두 명령 모두 버전 번호가 출력되어야 합니다.
Node와 npm을 확인한 뒤 Vite 프로젝트를 만들고, 설치와 개발 서버 실행을 거쳐 VS Code에서 수정 결과까지 확인합니다.
명령이 바로 실행되면 설치와 PATH 문제를 먼저 통과한 것입니다.
node -v
npm -v
두 명령 모두 버전 번호가 출력되어야 합니다.
학습용 폴더에서 템플릿을 만들고 새 프로젝트 폴더로 이동합니다.
npm create vite@latest my-first-react-app -- --template
react
cd my-first-react-app
의존성을 받은 뒤 터미널에 표시된 로컬 주소를 브라우저로 엽니다.
npm install
npm run dev
localhost:5173이 기본 확인 지점입니다.
프로젝트 폴더를 에디터로 열고 저장 후 화면 갱신까지 봅니다.
code .
src/App.jsx를 고치고 브라우저 변화를
확인합니다.
터미널에 로컬 주소가 나오고 브라우저에서 Vite 기본 화면이 보입니다.
명령 실패 시 현재 폴더, Node 버전, 의존성 설치 여부를 먼저 봅니다.
저장할 때 화면이 바로 바뀌면 첫 개발 피드백 루프가 연결된 것입니다.
node -v와 npm -v로 설치를 먼저
분리합니다.
npm install을 실행합니다.
npm run dev는 서버를 켜 두는 명령이므로 같은 창을
닫지 않습니다.
VS Code에서 프로젝트를 열면 파일 구조와 실행 중인 브라우저를 나란히 보며 작은 수정부터 확인할 수 있습니다.