개발 모드 / 빌드 모드 / 웹팩(webpack)

최종 수정 : 2024-06-01

개발 모드

프로젝트를 개발할 때 사용하는 모드

npm run start

개발 모드는 빌드 모드와 달리 명령이 종료되지 않고 계속 동작한다. 이는 npm start 명령으로 동작한 react-scripts start가 내부적으로 웹팩을 서버 형태로 구동하기 때문이다.

 

# 개발 모드로 실행할 떄의 웹팩

1. react-scripts start 명령으로 실행된 웹팩 서버는 리액트 프로젝트 디렉터리의 파일들을 빌드하여 번들 파일로 만든다.
2. 이를 반영한 index.html 파일을 생성한다.
3. react-scripts가 웹 브라우저를 실행하고 http://localhost:3000 주소로 접속한다.
4. 웹팩이 준비해 둔 index.html에서 <scripts> 태그의 자바스크립트 코드를 실행해 웹 페이지를 화면에 보여 준다.

# 개발 모드에서 핫 모듈 교체

개발 모드의 핵심은 소스코드를 수정하거나 기능을 추가하면 변경 사항이 즉각즉각 웹 브라우저에 반영되어 눈으로 확인할 수 있어서 개발자의 생산성을 높여주는 것이다. 웹팩은 이 기능을 핫 모듈 교체(hot module replacement, HMR)이라 한다. 핫 리로딩(hot reloading)이라고도 한다.

 

핫 모듈 교체 기능은 완벽하지 않다!

핫 묘듈 교체는 정교하게 동작하지만 100% 완벽하지는 않다. 개발하다가 원하는 결과가 나오지 않을 때는 웹 페이지를 새로 고침을 하면 핫 모듈 교체가 강제로 수행되어 반영된다.

 

---

빌드 모드

프로덕션 모드라고도 한다.

npm run build

---

웹팩과 번들 파일

웹팩(webpack)은 프런트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러(module bundler)이다. 웹 애플리케이션은 자바스크립트 코드뿐만 아니라 다양한 이미지 파일, CS 파일, HTML 파일로 구성되는데, 웹팩에서는 애플리케이션이 동작하는 데 필요한 파일을 모듈(module)이라한다. 웹팩은 다양한 입력 모듈을 결합하여 훨씬 단순한 형태의 모듈로 변환해주는 역할을 하다. 이때 웹팩의 결과물을 번들(bundle)이라고 한다.

웹팩 동작 원리(출처: webpack.js.org)

---

참고 자료

리액트 모던 웹 개발 with 타입스크립트 (p.35-40)