[React] study 1주차 - 개발환경 설정하기 without CRA, Babel, Webpack

1주차 과제는 CRA 없이 개발환경 설정하기!
과제를 진행하면서 babel과 webpack을 왜 사용해야 하는지 확실히 알게되었다.

CRA(create-react-app)

React 개발 환경을 설정하기 위해서는 webpack, babel에 대한 설정이 필요하다.
CRA는 이 설정을 간단하게 대신 해준다.

CRA를 사용하는 이유

간단하게 개발환경을 설정할 수 있다.
신경써야하는 코드가 줄어든다.

CRA를 사용하지 않는 이유

설정을 수정하기 어렵다.
webpack의 코어한 부분을 건드릴 경우 결국 eject해야한다.

✏️ 참고 링크
CRA(eject X) vs CRA(eject O) vs Next.js

Babel

ES6/ES7 코드를 ECMAScript5 코드로 transpiling 하기 위한 컴파일러이다.
타입스크립트, JSX 등 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜준다.
바벨은 이렇게 추상화 수준을 유지한 채로 코드를 변화시키는 트랜스파일러의 역할을 한다. 바벨을 통해 ES6+의 자바스크립트 코드는 하위 버전으로 변환되고, 그로 인해 IE나 다른 브라우저에서 동작할 수 있게 만든다.

babel에서 plugin, preset 무엇인지 알아보기

plugin은 Babel에게 문법 변환 규칙을 알려준다. 이 plugin 조각의 모음을 preset이라고 한다.

babel polyfill

Polyfill은 구형 브라우저에서 지원하지 않는 기능을 제공하는 코드를 의미한다.
ES6의 Promise 같은 객체들은 ES5에 존재하지 않으므로 구문 변환 뿐만 아니라 해당 객체들을 정의하는 코드인 바벨 폴리필(babel polyfill)을 추가해야 한다.

babel-cli를 사용해서 소스코드 빌드 후 결과 확인해보기

Babel CLI 설치

npm i -D @babel/core @babel/cli

package.json 스크립트 항목에 compile 명령을 추가한다. src 디렉토리의 JavaScript 파일을 컴파일 한 후 dist 디렉토리에 결과를 저장하도록 설정하고, start 명령을 추가해 compile 을 실행하도록 설정한다.

{
  "scripts": {
    "start": "npm run compile",
    "compile": "babel src -d dist"
  }
}

preset 없이는 Babel은 아무 동작도 수행하지 않는다.
@babel/preset-env 설정이 필요하다.

Babel Env preset 설치

npm i -D @babel/preset-env

babel.config.json 파일을 프로젝트 최상단에 생성한 후, 사전 설정을 추가한다.

{
  "presets": ["@babel/preset-env"]
}

esmodules로 빌드해보기

package.json

{
  "presets": [
    [
      "@babel/preset-env",
      { "modules": false }
    ]
  ]
}

기본값으로 esmodules이 설정되어 있다.

commonjs로 빌드 해보기

{
  "presets": [
    [
      "@babel/preset-env",
      { "modules": "commonjs" }
    ]
  ]
}

commonjs로 빌드하고 싶다면 다음과 같이 옵션을 수정해준다.

✏️ 참고 링크
Babel CLI 구성
CommonJS와 ES Modules은 왜 함께 할 수 없는가?

Webpack이란?

webpack은 html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 번들링 툴이다.
여러 파일을 하나의 파일로 번들링 해주어 여러 모듈들의 파일을 읽어들이는 속도를 줄인다. 불필요한 HTTP 요청을 줄여 속도 향상에 도움을 준다.

webpack 설치

npm i webpack webpack-cli -D

webpack에서 mode가 무엇인지

• development : 개발 모드
• production : 배포 모드 (기본 값)
  Webpack 모듈 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄인다.
• none : 기본 최적화 옵션 설정 해제

webpack 설치 후 webpack.config.json 파일을 만들어 다음과 같이 작성해준다.

module.exports = {
  mode: 'development',
};

webpack plugin

별도의 플러그인을 통해 CSS번들링, 트랜스파일, Lint, 코드 난독화, 빌드 및 배포 등의 기능을 사용할 수 있다.

플러그인을 사용하려면 require() 함수를 사용해 설치된 플러그인이 불러온 후, plugins 배열에 추가한다. 플러그인을 여러 번 사용할 수 있으므로 new 연산자를 사용해 플러그인 인스턴스를 만든다.

webpack.config.js

// 플러그인 불러오기
const Plugin = require('plugin-path')


module.exports = {
  // 플러그인 배열
  plugins: [
    // 플러그인 생성
    new Plugin({
      // 플러그인 옵션 설정
    })
  ]
}

✏️ 플러그인 종류와 사용자 정의 옵션
Webpack plugin