[Node.js] npm run dev, npm run build, npm run start 차이

Next.js로 프로젝트 애플리케이션을 구동하면서 흔히 사용하던 명령어들에 대해 이번 기회에 정리해보았다. 

 

이게 다 뭐야

package.json 파일의 "scripts" 항목에 우리가 자주 사용하던 명령어들이 보인다.

dev, build, start

 

사실 이건 실제 명령어를 실행하기 위한 스크립트 이름으로, 일종의 단축어라고 보면 된다. 아마 내부적으로 실제 명령어로 변환되어 실행되는 듯한데, 개발자가 구동할 때마다 타이핑하기엔 매우 복잡한 명령어라 이런 식으로 스크립트로 정의되어 있는 것 같다.

따라서 개발자는 이를 실행하려면 npm run <스크립트 이름>을 치기만 하면 되는 것이다. 

 

npm run dev

• watch 모드로 개발 서버를 구동한다. 
• 개발 모드에서 코드를 변경할 때마다 변경 사항을 바로 확인할 수 있었다. 그 이유가 watch 모드로 개발 서버가 구동되기 때문에, 서버를 다시 실행할 필요없이 변경 사항이 자동으로 적용되어 다시 시작하기 때문이다. = hot reload라고 한다. 
• source map을 생성하고, js, css 파일을 축소하지 않아서 디버깅 및 오류를 찾아내기 쉬워진다. 

 

💡 Source Map

• original 코드를 특정한 알고리즘으로 인코딩하여 특정 키워드로 매핑시킨 파일
• 이 Source Map을 이용하면 번들링되어 난독화된 코드를 그대로 디코딩해서 원래 original 코드로 복원시킬 수 있다. 

 

npm run start

• 프로덕션 서버를 구동한다. 
• 개발자 모드와 달리, Source Map을 생성하지 않고, 모든 js, css 파일을 축소하여 프로덕션 준비가 되고 더 빠르게 서버에서 전달하도록 한다. 

 

결론적으로, npm run dev는 일반적으로 사이트를 개발할 때 사용하고, npm run start는 배포할 준비가 되었을 때 사용한다. 

 

npm run build

• 배포 버전을 위해 파일 빌드가 진행되고, 그런 내용은 .next 폴더에 담겨진다. 
• 주의할 점은 개발 모드 / 서버 모드 상관없이 모두 build 과정을 거친 이후에 애플리케이션을 구동할 수 있게 된다. 하지만 개발 모드와 프로덕션 모드에서 필요한 빌드가 다르기 때문에 npm run build를 한 뒤 npm run start 명령어를 입력한다. 

 

 

Reference

Getting Started: Installation | Next.js

SourceMap이란 무엇일까?(with webPack devtool)

Understanding the "npm run dev" command (with examples) | bobbyhadz

Difference between npm run dev and npm run production