프론트엔드/React
개발 모드 / 빌드 모드 / 웹팩(webpack)
학습하는 청년
2024. 6. 1. 13:06
최종 수정 : 2024-06-01
개발 모드
프로젝트를 개발할 때 사용하는 모드
npm run start
개발 모드는 빌드 모드와 달리 명령이 종료되지 않고 계속 동작한다. 이는 npm start 명령으로 동작한 react-scripts start가 내부적으로 웹팩을 서버 형태로 구동하기 때문이다.
# 개발 모드로 실행할 떄의 웹팩
- react-scripts start 명령으로 실행된 웹팩 서버는 리액트 프로젝트 디렉터리의 파일들을 빌드하여 번들 파일로 만든다.
- 이를 반영한 index.html 파일을 생성한다.
- react-scripts가 웹 브라우저를 실행하고 http://localhost:3000 주소로 접속한다.
- 웹팩이 준비해 둔 index.html에서 <scripts> 태그의 자바스크립트 코드를 실행해 웹 페이지를 화면에 보여 준다.
# 개발 모드에서 핫 모듈 교체
개발 모드의 핵심은 소스코드를 수정하거나 기능을 추가하면 변경 사항이 즉각즉각 웹 브라우저에 반영되어 눈으로 확인할 수 있어서 개발자의 생산성을 높여주는 것이다. 웹팩은 이 기능을 핫 모듈 교체(hot module replacement, HMR)이라 한다. 핫 리로딩(hot reloading)이라고도 한다.
핫 모듈 교체 기능은 완벽하지 않다!
핫 묘듈 교체는 정교하게 동작하지만 100% 완벽하지는 않다. 개발하다가 원하는 결과가 나오지 않을 때는 웹 페이지를 새로 고침을 하면 핫 모듈 교체가 강제로 수행되어 반영된다.
빌드 모드
프로덕션 모드라고도 한다.
npm run build
웹팩과 번들 파일
웹팩(webpack)은 프런트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러(module bundler)이다. 웹 애플리케이션은 자바스크립트 코드뿐만 아니라 다양한 이미지 파일, CS 파일, HTML 파일로 구성되는데, 웹팩에서는 애플리케이션이 동작하는 데 필요한 파일을 모듈(module)이라한다. 웹팩은 다양한 입력 모듈을 결합하여 훨씬 단순한 형태의 모듈로 변환해주는 역할을 하다. 이때 웹팩의 결과물을 번들(bundle)이라고 한다.
참고 자료
리액트 모던 웹 개발 with 타입스크립트 (p.35-40)