React 애플리케이션을 JSX로 구현한 후, 애플리케이션이 브라우저에 나타나는 과정.
중요 키워드: 트랜스파일,Babel, 번들링,Webpack,로더, 빌드
1. 애플리케이션 작성 및 트랜스파일(Transfile)
도구: Babel (자바스크립트 컴파일러)
JSX는 브라우저가 이해할 수 없다. 따라서 Babel을 사용하여 순수한 JavaScript로 변환한다.
이 때, 최신 자바스크립트 문법도 구형 브라우저에서 동작할 수 있도록 변환된다.
2. 모듈 번들링 (묶음)
도구: Webpack (자바스크립트 모듈 번들러)
여러 모듈들을 하나로 묶는 과정을 번들링이라 한다.
여러 개의 자바스크립트 모듈과 기타 자산(CSS, 이미지, 폰트 등)을 하나 또는 여러 개의 번들 파일로 묶는다.
다양한 파일 유형(CSS, 이미지, 폰트 등)을 로더를 통해 처리하고, 이를 자바스크립트 모듈로 통합한다.
Ex) css를 인라인으로 js파일에 포함, 이미지 파일 인코딩하여 js파일에 포함.
But, Webpack은 Loader의 도움이 필요하다.
Ex) babel-loader, css-loader, style-loader, ...
babel-loader: 웹팩과 바벨을 통합하여 웹팩 빌드 과정에서 바벨을 통해 자바스크립트 파일을 트랜스파일링하는 로더.
Why?
Webpack은 js와 json만 이해할 수 있음. 따라서, Babel을 호출하지 못함. 이 때, babel-loader가 중간에서 중개자 역할을 한다.
=> 사실상 Webpack을 통해 트랜스파일링과 번들링이 통합되어 일어난다.
3. 빌드 (웹팩 빌드 과정)
모든 모듈을 결합하고, 트랜스파일하여 하나의 번들 파일을 생성한다.
4. 번들링된 파일의 로드 및 실행
빌드 과정에서 생성된 번들 파일은 브라우저에서 로드되어 실행된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="dist/bundle.js"></script> <!-- 번들 파일 로드 -->
</body>
</html>index.html 파일에 번들 파일 포함시킨다.
5. 애플리케이션의 렌더링
브라우저는 번들 파일을 로드하고, React 애플리케이션이 초기화된다. ReactDOM을 사용하여 React 컴포넌트를 DOM에 렌더링한다.
- JSX 작성: React 컴포넌트를 JSX로 작성.
- Babel 트랜스파일: Babel이 JSX를 JavaScript로 변환.
- Webpack 번들링: 모든 모듈을 하나의 번들 파일로 결합.
- 빌드: Webpack을 통해 번들 파일 생성.
- 브라우저 로드 및 실행: 브라우저가 번들 파일을 로드하고 애플리케이션을 실행.
- ReactDOM 렌더링: ReactDOM이 React 컴포넌트를 브라우저의 DOM에 렌더링.
Babel은 Webpack과 함께 사용되어 트랜스파일링과 번들링을 "통합"하여 처리한다.
툴체인: 컴파일러, 빌드 시스템, 디버거, 버전 관리 시스템, 테스트 프레임워크, 통합 개발 환경, CRA, Next.js, Gatsby
React CLI 도구?: CRA, Next.js, Gatsby, Vite, React Boilerplate, Razzle, React App Rewired, Craco, Expo for Web
번들러(번들링 툴) - 여러개의 파일을 하나의 파일로 묶는 역할: Webpack, Vite, Parcel, Rollup
패키지 매니저: npm, yarn, pnpm
빌드 도구: Gulp, Grunt
코드 품질 도구: ESLint, Prettier, Stylelint
스타일링 도구: Sass, Less, PostCSS, Styled-components, Emotion
테스트 도구: Jest, Mocha, Cypress, Karma
개발 서버: Live Server, Browsersync, Vite Dev Server
=> 커스텀하기 힘들어서 보통 만들어진 템플릿 사용한다. Ex) Vite, Next.js, Parcel, Gatsby
https://dekoms-coding.tistory.com/132
https://dekoms-coding.tistory.com/104
CRA는 쉽게 개발할 수 있도록 대중적인 Webpack 번들링 설정이 되어 있다.
그러나 eject를 통해 Webpack 설정을 커스터마이징하면 CRA의 장점을 버리는 것이며, 번거롭고 위험성이 높기 때문에 커스터마이징 패키지 Craco가 나오게 되었다.
패키지 매니저
: 프로젝트에 사용되는 라이브러리와 의존성을 쉽게 관리할 수 있다.
npm: 오래되어 생태계가 넓다는 장점이 있다. 속도, 안정성 및 보안성이 비교적 뒤떨어짐.
yarn: 병렬 처리와 캐시를 통해 속도가 빠름.
pnpm: performant npm, 즉 효율적인 npm임. global 저장소에 패키지를 한번만 저장함으로써 저장 공간을 절약하는 장점이 있다.
npm Registry: Node.js 패키지의 중앙 저장소 역할을 하는 온라인 데이터베이스. 개발자들이 패키지를 업로드하고 다른 사람이 사용할 수 있음. yarn도 npm Registry를 그대로 사용함.
'기술스택 > FE' 카테고리의 다른 글
| [FE] CSS 컨벤션 (0) | 2025.01.04 |
|---|---|
| [FE] 디스플레이 해상도 (0) | 2024.07.29 |
