[React] Webpack & Babel

eslim·2020년 12월 1일

JavaScript React babel webpack

React

목록 보기

3/5

1. Webpack

웹팩(Webpack)은 자바스크립트 정적 모듈 번들러(Static Module Bundler)이다.
웹팩의 주요 네 가지 개념으로 Entry, Output, Loader, Plugin이 있다.

1-1. 모듈 번들러란?

웹 애플리케이션에 필요한 모듈들을 하나의 파일로 묶는 도구이다.
이때 모듈은 웹 애플리케이션을 구성하는 모든 자원(HTML, CSS, JAVASCRIPT, Images등)에 해당한다. 즉, 웹 애플리케이션을 제작하는데 사용되는 파일을 말한다.
기본적으로 webpack은 자바스크립트 파일과 JSON 파일을 이해하지만 loader를 이용해 다른 타입의 파일을 처리할 수 있다.
모듈 번들러 라이브러리는 웹팩(wepback), Parcel 등 있다.

1) Module

프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다.
관련된 데이터와 함수들이 묶여서 모듈을 형성하고 파일 단위로 나뉘는 것이 일반적이다.
모듈화 프로그래밍은 기능별로 파일을 나눠가며 프로그래밍을 하는 것으로 유지보수가 쉽다는 장점이 있다.

// ex) 모듈: sum함수, substract 함수, pi 상수
function sum(a, b) {
  return a + b;
}

function substract(a, b) {
  return a - b;
}

const pi = 3.14;

export { sum, substract, pi }

2) Bundler

번들러는 지정한 단위로 파일들을 하나로 만들어서 요청에 대한 응답으로 전달할 수 있는 환경을 만들어주는 역할을 한다.
번들러를 사용하면 소스 코드를 모듈별로 작성할 수 있고 모듈간 또는 외부 라이브러리의 의존성도 쉽게 관리할 수 있다.

1-2. 웹팩의 주요 개념

1. Entry

의존성 그래프의 시작점을 웹팩에서는 엔트리(Entry)라고 한다.
웹팩은 엔트리를 통해서 필요한 모듈을 로딩하고 하나의 파일로 묶는다.
여러개의 엔트리가 존재할 수 있다.

2. Output

엔트리에 설정한 자바스크립트 파일을 시작으로 하나로 묶는다. 그후 번들된 결과물을 처리할 위치를 output에 기록한다.

3. Loader

웹팩은 오직 JavaScript와 Json만 이해할 수 있다.
로더는 다른 Type의 파일(img, font, stylesheet 등)을 웹팩이 이해하고 처리 가능한 모듈로 변환 시키는 작업을 한다.

4. Plugin

로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다.
로더가 변환하는 동안 플러그인은 bundle optimization, asset management and injection of environment과 같은 일을 진행할 수 있다.

1-3. Why Webpack?

파일 단위의 자바스크립트 모듈 관리의 필요성
- 자바스크립트의 변수 유효 범위는 기본적으로 전역 범위를 가지며, 최대한 넓은 변수 범위를 갖기 때문에 어디에서도 접근하기가 편리하지만 복잡한 작업의 경우 변수의 이름을 모두 기억하지 않은 이상 변수를 중복 선언하거나 의도치 않은 값을 할당할 수 있는 문제를 해결하기 위함이다.
웹 개발 작업 자동화 도구 (Web Task Manager)
- HTML, CSS, JS 압축, 이미지 압축, CSS 전처리기 변환 등 이러한 일들을 자동화해주는 같은 도구들이 필요해 등장하게 된다.
이러한 일들을 자동화 해주는 도구들
웹 애플리케이션의 빠른 로딩 속도와 높은 성능
- 모듈 번들러는 여러개의 자바스크립트 파일을 하나의 파일로 묶어서 한 번에 요청을 통해 가지고 올 수 있게 하고 최신 자바스크립트 문법을 브라우저에서 사용할 수 있게 해준다.
- 또한 모듈 번들러들은 자바스크립트 코드들을 압축하고 최적화 할 수 있기 때문에 로딩 속도를 높일 수 있다.
- 많은 자바스크립트 파일이 하나의 파일로 묶여 초기 로딩 속도가 어마어마해 질 수 경우, 이 문제를 해결하기 위해 청크, 캐시, 코드 스플릿 개념들을 도입하면서 문제들을 해결하고 있다.

2. Babel

바벨 공식문서에서는 바벨을 자바스크립트 컴파일러라고 소개하며 최신 자바스크립트 문법을 사용할 수 있다고 나와있다. 더 정확하게 말하면 트랜스파일러라고 말할 수 있다. (트랜스파일러는 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 언어로 변환하는 것을 말하며 컴파일러의 일종이다.)

2-1. Babel 설치

babel 기본 모듈 설치

$npm i -D @babel/core @babel/cli @babel/preset-env

@babel/core: 바벨의 핵심 기능들을 포함
@babel/cli: 터미널에서 바벨 명령어를 사용할 수 있게 도와줌
@babel/preset-env: 코드 구문 변환 설정을 도와줌 (지원 브라우저 점유율, 호환성 설정 등)

2-2. Why Babel?

자바스크립트가 실행되는 환경때문에 바벨이 필요하며, 다른 언어와 달리 자바스크립트는 정말 많은 환경에서 실행된다. 웹 브라우저, NodeJS, Deno 등에서 실행되는데 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 자바스크립트 코드를 읽게 된다.
이렇게 실행되는 환경의 버전에도 자바스크립트는 영향을 받는다. 특정 버전 이상에서만 실행되는 코드가 있고 특정 브라우저에서는 실행되지 않는 코드도 있다. 그렇기 때문에 모든 자바스크립트 실행 환경에서 정상적으로 동작할 수 있도록 하려면 바벨이 필요하다.

ex) ES6의 Arrow function → ES5의 일반 function으로 변경
```
// ES6의 arrow function
[1, 2, 3].map((n) => n + 1)

// babel로 변경된 ES5의 일반 function 문법
[1, 2, 3].map(function (n) {
  return n + 1
})
```
바벨만 따로 사용할 수도 있지만 웹팩과 연결하면 바벨이 코드들을 트랜스파일링 하면서 웹팩을 통해 모듈들을 번들링할 수 있기 때문에 굉장히 효율적이다.

3. 결론

웹팩은 모듈을 번들링하고, 바벨은 코드 자체를 변경시켜준다는 차이가 있다.
babel : 리액트는 ES5 / ES6 + jsx로 작성한다. 이것을 브라우저가 이해할 수 있도록 바벨이 ES6 -> ES5, jsx -> js로 트랜스 파일링을 해준다. (@babel/preset-env ,@babel/preset-react)
webpack : 리액트는 최종으로 번들된 js 파일이 연결된 html 파일을 로드하기 때문에 번들링이 필요하다.