번들러(파일을 묶듯이 연결하기)

thebook.io/080203/ch02/01-02/

리액트를 다루는 기술 [개정판]: 2.1 코드 이해하기 - 2

코드 번들링

이렇게 모듈을 불러와서 사용하는 것은 사실 원래 브라우저에는 없던 기능입니다.

브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능입니다.

참고로 Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있습니다.

이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용합니다.

번들(bundle)은 묶는다는 뜻입니다. 즉, 파일을 묶듯이 연결하는 것이죠.

 

대표적인 번들러로 웹팩, Parcel, browserify라는 도구들이 있습니다.

리액트 프로젝트에서는 주로 웹팩을 사용하는 추세입니다. 편의성과 확장성이 다른 도구보다 뛰어나기 때문입니다.

 

번들러 도구를 사용하면 import(또는 require)로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서

하나의 파일을 생성해 줍니다. 또 최적화 과정에서 여러 개의 파일로 분리될 수도 있습니다.

 

로더(loader)

웹팩을 사용하면 SVG 파일과 CSS 파일도 불러와서 사용할 수 있습니다.

이렇게 파일들을 불러오는 것은 웹팩의 로더(loader)라는 기능이 담당합니다.

import logo from ‘./logo.svg‘;
import ‘./App.css‘;

 

1. css-loader: CSS 파일을 불러온다.
2. file-loader: 웹 폰트나 미디어 파일 등을 불러온다.
3. babel-loader : 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환해 줍니다.

📌 최신 자바스크립트로 작성된 코드를 왜 변환하나요?

ES5는 이전 버전의 자바스크립트를 의미합니다. 최신 자바스크립트 문법을 ES5 형태로 변환하는 것은 구버전 웹 브라우저와 호환하기 위해서입니다. 현재 대부분의 최신 웹 브라우저에서는 자체적으로 최신 자바스크립트 문법을 바로 실행할 수 있지만, 구버전 웹 브라우저에서는 실행되지 않기 때문에 사전에 꼭 변환해 주어야 합니다. 또한, 우리가 앞으로 배우게 될 리액트 컴포넌트에서 사용하는 JSX라는 문법도 정식 자바스크립트 문법이 아니므로 ES5 형태의 코드로 변환해야 합니다.

ES5 이후의 문법들은 ECMAScript 2015(ES6), ECMAScript 2016(ES7) 등과 같은 형태로 이름이 지어집니다.

 

웹팩의 로더는 원래 직접 설치하고 설정해야 하지만 리액트 프로젝트를 만들 때 사용했던

create-react-app이 번거로운 작업을 모두 대신해 주기 때문에 우리는 별도의 설정을 할 필요가 없습니다.