[React] 번들링(Bundling) 이해하기 📘

📘 번들링이란  ?

여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위

즉, 프론트엔드 개발자에게는

사용자가 더 쉽고 빠르게 어플리케이션에 접근 할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정이다.

 

정확하게는

모듈(module)들의 의존성 관계를 파악하여 그룹화를 시켜주는 작업이다.

* 모듈(module) :  분리된 파일

 

기존에는

작업의 효율성을 위해 여러 소스 코드 파일들을 기능에 따라 분리했다.

예를들어 로그인 기능이라하면

로그인 폼 로직이 들어가는 파일, 암호화하는 파일, API 호출을 위한 axios 정의 파일 등등..

 

하지만 이러한 여러개의 소스 코드 파일과 모듈들을 하나로 묶어 최적화된 형태(번들)로 만드는 과정이

오늘 이해해야하는 번들링이다.

 

 

 

일반적으로 웹 어플리케이션은 여러개의 script파일, css, 이미지 파일 등으로 구성되어 있다.

이 파일들을 모두 한꺼번에 브라우저에 로딩하면

[번들링 전]

• 네트워크 비용 증가
• 페이징 로딩 속도 감소

의 단점들을 초래시킨다.

 

번들링은 이러한 파일들을 하나로 묶어 브라우저에게 전달하면서 최적화를 수행한다.

 

 

🥨 대표적인 번들러

• Webpack
• Parcel
• Browserify

🥨 번들러가 모듈 시스템을 사용하는 프로젝트에서 하는 일

• 파일간의 의존성을 파악
• 필요한 파일들을 하나의 번들로 만듦
• 코드 압축
• 트랜스파일링
• 이미지 최적화

 

 

간단한 예시로 번들러를 사용한 프로젝트의 디렉토리 구조에 대해 알아보자

🥨 번들러를 사용한 프로젝트의 디렉토리 구조

my-project/
|-- src/
|   |-- index.js
|   |-- App.js
|   |-- styles/
|       |-- main.css
|-- dist/
|-- node_modules/
|-- package.json
|-- webpack.config.js

• src/: 소스 코드 파일들이 위치한 디렉토리
  • index.js: 애플리케이션의 진입점 파일로, 모든 모듈을 로드하고 실행
  • App.js: 애플리케이션의 주요 기능을 담은 모듈
  • styles/: CSS 파일들이 위치한 디렉토리
• dist/: 번들링 결과물이 생성되는 디렉토리. (번들러는 소스 코드를 합치고 최적화하여 이 디렉토리에 결과물을 생성한다.)
• node_modules/: 프로젝트가 의존하는 패키지들이 설치되는 디렉토리
• package.json: 프로젝트의 메타 정보와 의존성 관리를 위한 파일
• webpack.config.js: Webpack 설정 파일로, 번들링 과정과 관련된 다양한 설정을 담고 있음.

이 구조에서 Webpack을 사용하면

webpack.config.js 파일에 설정을 추가하여 번들링을 수행하고,

결과물은 dist/ 디렉토리에 생성될 것이다.

 

 

다음 포스팅에서는

Webpack에 대해 알아보자 !

 

https://maymin-5tory.tistory.com/97

[React] Webpack 이해하기 📘