2강. Node.js, npm, Vite 개발 환경

?1. 이번 강의에서 해결할 문제

브라우저는 TypeScript와 개발 편의 기능을 그대로 실행하지 못합니다. 프로젝트 생성, 패키지 설치, 개발 서버, 배포용 빌드를 맡을 도구가 필요합니다.

✓2. 학습 목표

• Node.js, npm, Vite의 역할을 구분한다.
• React TypeScript 템플릿으로 프로젝트를 생성한다.
• 개발 서버와 프로덕션 빌드를 실행한다.

◇3. 핵심 개념

Node.js는 브라우저 밖에서 JavaScript 도구를 실행하는 환경이고, npm은 프로젝트가 사용하는 패키지와 명령을 관리합니다. Vite는 개발 서버와 프로덕션 빌드를 제공합니다.

2026년 7월의 Vite 공식 문서는 Node.js 20.19 이상 또는 22.12 이상을 요구합니다. 버전 조건은 바뀔 수 있으므로 설치 전 Vite 시작 문서를 다시 확인하세요. 가능하면 Node.js 공식 사이트의 최신 LTS를 사용합니다.

</>4. 단계별 코드 예시

실행 위치: 프로젝트를 만들 상위 폴더 / Windows PowerShell

node --version
npm --version
npm create vite@latest game-release-dashboard -- --template react-ts
cd game-release-dashboard
npm install
npm run dev

터미널에 표시된 로컬 주소를 브라우저에서 엽니다. 서버를 멈출 때는 Ctrl+C를 누릅니다.

파일 경로: game-release-dashboard/package.json

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }
}

배포 파일도 미리 확인합니다.

npm run build
npm run preview

→5. 코드가 동작하는 이유

npm create가 최신 Vite 생성기를 실행하고, --template react-ts가 React와 TypeScript 설정을 선택합니다. npm install은 package.json의 의존성을 node_modules에 설치합니다. 개발 중에는 Vite가 변경된 모듈을 빠르게 교체하고, build는 최적화된 파일을 dist에 만듭니다.

!6. 자주 하는 실수와 해결법

• PowerShell 실행 정책 오류: 환경에 따라 npm 대신 npm.cmd를 사용합니다.
• 프로젝트 폴더 밖에서 명령 실행: package.json이 있는 폴더인지 Get-Location으로 확인합니다.
• node_modules를 Git에 커밋: Vite가 만든 .gitignore를 유지합니다.
• 버전 경고 무시: Vite가 요구하는 Node.js 버전보다 낮으면 LTS를 갱신합니다.

✎7. 직접 실습

프로젝트를 생성하고 개발 서버 화면을 연 뒤, npm run build까지 성공시키세요. README 메모에 사용한 Node.js와 npm 버전을 기록하세요.

?8. 이해 점검 질문 3개

1. Node.js와 npm은 각각 무엇을 담당하나요?
2. dev와 build 명령의 결과는 어떻게 다른가요?
3. react-ts 템플릿을 선택한 이유는 무엇인가요?

■9. 핵심 요약

Node.js 위에서 npm과 Vite가 개발 도구를 실행합니다. 이제 React·TypeScript 코드가 즉시 반영되고 배포용 파일도 만들 수 있는 작업 공간이 준비되었습니다.