[React] npm 명령어
개요
React(Vite) 개발에 사용되는 핵심 명령어들을 카테고리별로 정리합니다. 모든 npm 명령어는 npm help <command>로 상세 도움말을 확인할 수 있습니다.
프로젝트 생성
Vite로 React + TypeScript 프로젝트 생성
# 대화형 프로젝트 생성
npm create vite@latest
# 프로젝트명과 템플릿 지정
npm create vite@latest my-app -- --template react-ts
# 생성 후 실행
cd my-app
npm install
npm run dev
기존 프로젝트 의존성 설치
# package.json의 모든 의존성 설치
npm install
# package-lock.json을 엄격히 따라 설치 (CI 환경 권장)
npm ci
개발 서버
npm run dev
로컬 개발 서버를 시작합니다.
# 개발 서버 실행 (기본 http://localhost:5173)
npm run dev
# 특정 포트로 실행
npm run dev -- --port 3000
# 외부 접속 허용 (모바일 기기 등)
npm run dev -- --host
빌드
npm run build
운영 배포용 코드를 빌드합니다.
# 운영 빌드 (dist/ 폴더에 생성)
npm run build
# 빌드 결과물 미리보기
npm run preview
dist/
├── index.html
├── assets/
│ ├── index-Abc123.js # JS 번들 (해시 포함)
│ └── index-Def456.css # CSS 번들
패키지 관리
npm install - 패키지 설치
# 일반 의존성 설치 (dependencies)
npm install react-router-dom
npm install @tanstack/react-query zustand
# 개발 의존성 설치 (devDependencies)
npm install -D vitest @testing-library/react
npm install -D tailwindcss @tailwindcss/vite
# 특정 버전 설치
npm install react-router-dom@6.20.0
# 여러 패키지 동시 설치
npm install axios zod react-hook-form @hookform/resolvers
npm uninstall - 패키지 제거
# 패키지 제거
npm uninstall react-router-dom
# 개발 의존성 제거
npm uninstall -D vitest
npm update - 패키지 업데이트
# 모든 패키지를 허용 범위 내 최신 버전으로 업데이트
npm update
# 특정 패키지만 업데이트
npm update react react-dom
npm outdated - 오래된 패키지 확인
# 현재 버전, 원하는 버전, 최신 버전 비교
npm outdated
Package Current Wanted Latest
react 18.2.0 18.3.1 19.1.0
react-router-dom 6.20.0 6.28.0 6.28.0
스크립트 실행
npm run - 커스텀 스크립트
# 정의된 스크립트 목록 확인
npm run
# 스크립트 실행 예시
npm run dev # 개발 서버
npm run build # 운영 빌드
npm run preview # 빌드 결과 미리보기
npm run lint # 린트 검사
npm run test # 테스트 실행
npm run format # 코드 포맷
package.json 스크립트 섹션 예시
{
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"preview": "vite preview",
"lint": "eslint . --ext ts,tsx",
"format": "prettier --write src",
"test": "vitest",
"test:ui": "vitest --ui",
"coverage": "vitest run --coverage"
}
}
테스트
vitest 명령어
# 테스트 실행 (watch 모드)
npm run test
npx vitest
# 단일 실행 후 종료
npx vitest run
# UI 모드로 실행
npx vitest --ui
# 특정 파일만 테스트
npx vitest run src/components/Counter.test.tsx
# 커버리지 측정
npx vitest run --coverage
코드 품질
ESLint - 린트 검사
# 린트 검사
npx eslint src
# 자동 수정 가능한 문제 수정
npx eslint src --fix
# 특정 파일만
npx eslint src/App.tsx
Prettier - 코드 포맷
# 설치
npm install -D prettier
# 포맷 확인 (파일 변경 없음)
npx prettier --check src
# 포맷 적용
npx prettier --write src
npx prettier --write "src/**/*.{ts,tsx}"
npx - 패키지 임시 실행
# 설치 없이 패키지 바로 실행
npx shadcn@latest init
npx shadcn@latest add button input card
# create-* 류 프로젝트 생성 도구
npx create-vite@latest my-app
# TypeScript 컴파일 확인
npx tsc --noEmit
패키지 정보
npm list - 설치된 패키지 확인
# 최상위 의존성만 표시
npm list --depth=0
# 특정 패키지 버전 확인
npm list react
# 전체 의존성 트리
npm list
npm info - 패키지 정보 조회
# 패키지 최신 버전 확인
npm info react version
# 패키지 상세 정보
npm info react-router-dom
캐시 관리
# 캐시 정리 (설치 오류 시 시도)
npm cache clean --force
# node_modules 삭제 후 재설치
rm -rf node_modules package-lock.json
npm install
유용한 전역 패키지
# 패키지 버전 일괄 업데이트 도구
npm install -g npm-check-updates
# 업데이트 가능한 패키지 확인
ncu
# package.json 버전 일괄 업데이트
ncu -u
npm install
