지난 시간에 CRA와 Vite의 차이점에 대해서 알아봤다.
차이점 중에 개발 서버 시작 속도에 있어서 CRA는 상대적으로 느리고, Vite는 빠르다. 그래서 npm run start 이후에 어떤일이 생기고 이 부분에서 CRA와 Vite의 차이점도 궁금해서 알아보기로 했다.
1. 명령어 실행
npm run start또는npm run dev: CRA에서 이 명령어들은 동일한 작업을 수행하며, 로컬 개발 서버를 시작한다. 기본적으로npm run start는react-scripts start명령어를 실행한다.
2. react-scripts 시작
react-scripts: CRA는react-scripts패키지를 통해 빌드 설정을 관리한다. 이 패키지는 Webpack과 Babel 설정을 포함하여 개발 서버를 실행하고, 애플리케이션을 빌드하고, 테스트를 실행하는 등의 작업을 처리한다.
3. Webpack Dev Server 시작
Webpack Dev Server:
react-scripts start명령어는 내부적으로 Webpack Dev Server를 실행한다. Webpack Dev Server는 개발 중에 다음과 같은 역할을 수행한다:
- 실시간 리로딩 (Hot Module Replacement): 코드를 변경할 때마다 브라우저를 새로고침하지 않고도 변경 사항을 실시간으로 반영한다.
- 개발 서버: 로컬에서 애플리케이션을 호스팅하여 http://localhost:3000과 같은 주소에서 접근할 수 있도록 한다.
4. Webpack 설정 로드
Webpack 설정 로드: CRA는 기본 Webpack 설정을 사용하여 애플리케이션을 번들링한다. 이 설정에는 다음이 포함된다:
- Entry Point 설정: Webpack이 애플리케이션을 빌드하기 시작하는 진입점 파일 (src/index.js 또는 src/index.tsx)을 정의한다.
- 로더 설정: Babel 로더를 사용하여 최신 JavaScript 및 TypeScript 코드를 브라우저 호환 코드로 변환한다.
- 플러그인 설정: HTMLWebpackPlugin을 사용하여 HTML 파일을 생성하고, DefinePlugin을 사용하여 환경 변수를 설정한다.
5. Babel을 통한 코드 변환
Babel: Babel은 최신 JavaScript 및 TypeScript 코드를 브라우저 호환 코드로 변환한다. CRA는 기본적으로 ES6/ES7 기능과 JSX 문법을 지원하도록 Babel을 설정한다.
6. 애플리케이션 번들링
애플리케이션 번들링: Webpack은 애플리케이션 코드를 모듈 단위로 번들링하여 하나의 파일 또는 청크로 묶는다. 이 과정에서 여러 JavaScript 파일을 하나로 합치고, CSS 및 이미지 파일을 포함한 다른 리소스들도 처리한다.
7. 개발 서버 실행
개발 서버 실행: Webpack Dev Server는 번들링된 파일을 메모리에 저장하고, http://localhost:3000에서 애플리케이션을 호스팅한다. 이 서버는 변경 사항을 감지하고, 실시간으로 브라우저에 반영한다.
8. 브라우저에서 애플리케이션 로드
- 브라우저에서 애플리케이션 로드: 개발 서버가 실행되면, 브라우저에서 http://localhost:3000을 열어 애플리케이션을 확인할 수 있다.
- Webpack Dev Server는 기본 HTML 파일을 제공하고, 번들링된 JavaScript 파일을 로드한다.
📝 요약
- 명령어 실행:
npm run start또는npm run dev명령어 실행.react-scripts시작: CRA의react-scripts패키지가 Webpack Dev Server를 시작.- Webpack Dev Server: 개발 서버 실행 및 실시간 리로딩 제공.
- Webpack 설정 로드: 기본 Webpack 설정을 사용하여 애플리케이션 번들링.
- Babel 변환: 최신 JavaScript 및 TypeScript 코드를 브라우저 호환 코드로 변환.
- 애플리케이션 번들링: 코드 및 리소스를 번들링하여 단일 파일 또는 청크로 묶음.
- 개발 서버 실행: 로컬에서 애플리케이션을 호스팅하여 브라우저에서 접근 가능.
- 브라우저 로드: 브라우저에서 http://localhost:3000을 통해 애플리케이션 확인.
