[React] 리액트 번들러 Webpack

번들러(Bundler)는 여러 개의 파일 및 종속성을 하나의 파일로 결합하고 최적화하는 도구입니다. 리액트 프로젝트에서 번들러는 주로 JavaScript 파일들 및 다양한 리소스들을 하나의 번들로 묶어서 브라우저에서 효율적으로 로딩되도록 도와줍니다.

주요한 리액트 프로젝트에서 사용되는 번들러 중 하나는 Webpack입니다. Webpack은 모듈 번들러로서 JavaScript 파일 뿐만 아니라, CSS, 이미지, 폰트 등 다양한 유형의 파일도 처리할 수 있습니다. Webpack은 프로젝트의 각 모듈 및 종속성 간의 의존성을 해결하고, 필요한 리소스를 번들로 묶어주며, 코드를 최적화하여 성능을 향상시킬 수 있습니다.

Webpack은 일반적으로 다음과 같은 작업을 수행합니다:

1. 번들링 (Bundling): 여러 개의 JavaScript 파일을 하나의 파일로 합칩니다. 이로써 브라우저는 한 번에 하나의 파일만 다운로드하면 되므로 네트워크 성능이 향상됩니다.
2. 모듈 시스템 지원: ECMAScript 모듈 시스템(import 및 export 구문)을 사용한 코드를 번들할 수 있습니다.
3. 로더 (Loaders): 다양한 유형의 파일을 처리할 수 있도록 하는 로더를 사용하여 CSS, 이미지, 폰트 등의 리소스도 번들에 포함시킬 수 있습니다.
4. 코드 최적화: 코드 압축, 난독화, 경량화 등의 최적화 작업을 수행하여 번들의 크기를 최소화합니다.
5. 동적 로딩 지원: 코드 분할을 통해 필요한 부분만 런타임에 로딩하여 초기 로딩 시간을 최소화합니다.

React 프로젝트에서는 주로 Create React App과 같은 도구를 사용하면 설정이 간단하게 이루어집니다. Create React App은 내부적으로 Webpack을 사용하며, 프로젝트를 시작할 때 필요한 설정들을 자동으로 처리해줍니다. 그렇지만 더 복잡한 프로젝트나 세부적인 설정을 원하는 경우 직접 Webpack 설정을 하게 될 수도 있습니다.

 

 

리액트를 불러오는 코드 하단에는 다음과 같이 SVG 파일과 CSS 파일을 import하는 코드가 있습니다.

import lgo from './logo.svg';
import './App.css';

웹팩을 사용하면 SVG 파일과 CSS 파일도 불러와서 사용할 수 있습니다. 이렇게 파일들을 불러오는 것은 웹팩의 로더(loader)라는 기능이 담당합니다. 로더는 여러 가지 종류가 있습니다. 예를 들어 css-loader는 CSS 파일을 불러올 수 있게 해 주고, file-loader는 웹 폰트나 미디어 파일 등을 불러올 수 있게 해 줍니다. 그리고 babel-loader는 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환해 줍니다.