Next.js를 공부하다보니 React와 npm 명령어가 다른 것 같아서 정리해본다.
npm 기본 명령어
start: 애플리케이션 실행
package.json의scripts에 정의된start명령어 실행- start 스크립트가 없으면 기본적으로
node server.js실행
stop: 실행 중인 애플리케이션 중지
start로 실행한 프로세스를 종료
restart: 애플리케이션 재시작
stop한 후 다시start실행
test: 애플리케이션 테스트 실행
package.json의scripts에 정의된test명령어 실행- 일반적으로 jest, mocha 같은 테스트 프레임워크와 함께 사용
📕 React에서의 npm 명령어
npm start : 개발 모드에서 React 실행 (개발용 웹팩 서버 사용)
npm run build : 프로덕션(운영)용 애플리케이션 빌드 생성 (build/ 디렉터리에 정적 파일 생성)
npm run test : 테스트 실행
npm run eject : webpack, Babel 등의 설정을 꺼내어 수정 가능
npx serve -s build : 정적 파일을 제공하는 서버 실행 (React는 정적 파일을 제공하는 서버가 필요)
📕 Next.js에서의 npm 명령어
npm run dev : 개발 모드에서 Next.js 서버 실행 (소스맵, 핫 리로드 제공)
npm run build : 프로덕션(운영)용 애플리케이션 빌드 생성
npm start : 빌드된 Next.js 애플리케이션을 프로덕션 환경에서 실행
Next.js는 자체 서버가 있어 npm start만 실행하면 동작
🐎 npm run이란?
run : npm에서 기본적으로 제공하는 명령어(start, stop, restart, test)를 제외한 사용자 정의 스크립트를 실행하는 명령어
예를 들어, next.js앱에는 기본적으로 package.json에 다음과 같은 스크립트가 정의되어 있다.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}npm run dev → next dev 실행
npm run build → next build 실행
npm start → next start 실행 (run 생략 가능)
✨ Source Map
브라우저에서 디버깅할 때 실제 원본 코드와 번들된 코드 간의 매핑을 제공하는 파일
개발 모드(next dev)를 실행하면 자동으로 활성화되며, 빌드된 코드가 아니라 원본 TypeScript, JavaScript 코드를 브라우저 개발자 도구에서 확인할 수 있다.
이를 통해 오류 발생 시 원본 코드 기준으로 디버깅이 가능하다.
✨ Hot Code Reloading
코드 변경 시 전체 페이지를 새로고침하지 않고, 변경된 부분만 즉시 업데이트하는 기능
개발 모드(next dev)에서는 자동으로 활성화되며, 개발 중 상태(State)를 유지하며 코드를 변경할 수 있어 빠른 개발이 가능하다.
