🎉 berenickt 블로그에 온 걸 환영합니다. 🎉
Lang
JavaScript
22-Babel & Webpack 번들러

1. 바벨이란?

최신 문법으로 코딩하고 사용자에게 배포할 때는, 예전 버전으로 배포해줄 수 있는 툴이 있습니다. 그러면 개발자는 호환성을 신경쓰지 않고 최신 문법을 사용할 수 있습니다. 그 툴은 바로 Babel입니다.

TypeScript를 사용하는 사람들도 있습니다. 그리고 프레임워크를 사용하면 굳이 이렇게 바닐라(순수) JS를 변환하는 일을 적을 것입니다.

바벨 : https://babeljs.io/

바벨 홈페이지에 들어가 Try it out에 들어가 코드를 작성해보세요. JS1까지 예전 버전으로 그냥 배포한다기 보다는, 자기가 배포하고자 하는 사용자들의 주된 브라우저를 확인 후 최신 버전을 지원하도록 확인하는 것이 좋습니다.

1.1 프로젝트에 바벨 셋업하기

먼저 프로젝트 폴더에 babel이란 폴더를 만들고 index.js를 만들어 봅니다.

1
// index.js

2
class Cat {}

3
const hello = () => {}

4
const yes = Promise.resolve(1)

그리고 터미널에서 babel폴더로 이동 후 npm을 통해 바벨을 설치해봅시다.

1
$ cd babel

2
$ npm init --yes # npm 셋업, pakage.json이 생성됨

3
$ npm install --save -dev @babel/core @babel/cli @babel/preset-env

4
# 이런 설치 정보는 공식 문서 'Setup'을 확인하면 됩니다.

package.json으로 가서 test를 지우고 build 문법을 추가합니다.

1
// package.json

2
{

3
  "name": "18.babel",

4
  "version": "1.0.0",

5
  "description": "",

6
  "main": "index.js",

7
  "scripts": {

8
    "build": "babel index.js -w -o build/index.js" // 추가

9
  },

10
  "keywords": [],

11
  "author": "",

12
  "license": "ISC",

13
  "devDependencies": {

14
    "@babel/cli": "^7.17.6",

15
    "@babel/core": "^7.17.7",

16
    "@babel/preset-env": "^7.16.11"

17
  },

18
  "dependencies": {

19
    "@babel/polyfill": "^7.12.1"

20
  }

21
}

그런 다음 터미널에서 다음과 같이 입력해보면, build라는 폴더 안에 index.js가 생성되었습니다. 이 index.js는 babel이 최신 문법으로 작성한 JS를 과거 버전 JS로 바꿔준 파일입니다.

1
$ npm run build

어떤 버전까지 빌드할 것인지는 babel.config.json에서 설정해주면 됩니다.

1
// babel.config.json

2
{

3
  "presets": [

4
    [

5
      "@babel/preset-env",

6
      {

7
        "targets": {

8
          // 각 브라우저 별 버전 지정

9
          "ie": "8",

10
          "firefox": "12",

11
          "chrome": "12",

12
          "safari": "11.1"

13
        },

14
        "useBuiltIns": "usage",

15
        "corejs": "3.6.5"

16
      }

17
    ]

18
  ]

19
}

2. 웹팩이란?

웹팩은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나의 파일로 번들링하는 모듈 번들러입니다.

💡 모듈 번들러

웹 애플리케이션을 구성하는 모든 자원을 각각 모듈로 보고, 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 말합니다.

2.1 웹팩의 등장 배경

최근 프론트엔드 프레임 워크에서 SPA개발이 인기를 얻고 있으며, 이로 인해 자바스크립트의 코드량이 기하급수적으로 증가하게 되었습니다. 이러한 환경에서 특정 자바스크립트 코드를 찾아서 수정하기는 어려운 일입니다. 따라서 API 기능과 UI 컴포넌트에 따라 자바스크립트 코드를 모듈별로 분리하게 되었습니다.

하지만 이렇게 분리해 놓은 많은 자바스크립트 파일들을 하나씩 로드한다면 웹 페이지 로딩시 속도 저하를 일으킬 수 있습니다. 이때문에 웹팩과 같은 모듈 번들러를 통해 수많은 JS파일들을 하나의 자바스크립트 파일로 번들링하는 작업이 필요하게 되었습니다. 그래서 등장한 것이 Web Task Manager (Gulp, Grunt) 입니다.

이후에는 Web Task Manager의 기능에 모듈 의존성 관리까지 더해진 웹팩이 등장하게 됩니다.

  • 파일 단위의 자바스크립트 모듈 관리의 필요성
    • 수많은 JS파일을 로딩하여 사용한다면 변수를 중복 선언하거나 의도치 않은 값을 할당하는 경우가 발생
    • 이를 막기위해 파일 단위의 자바스크립 모듈의 관리가 필요합니다.
  • 웹 개발 작업 자동화 도구
    • HTML, CSS, JS, 이미지 압축 등 반복적인 작업들을 자동화 해주는 도구의 필요성으로
    • Grunt, Gulp와 같은 도구들이 등장
  • 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
    • 웹 사이트의 로딩속도를 높이기 위한 대표적인 작업으로는 브라우저에서 서버로 요청하는 파일의 숫자를 줄이는 것
    • 이를 위해 Web Task Manager 를 이용해 파일을 압축하고 병합합니다.
    • 이와 더불어 초기 페이지 로딩 속도를 높이기 위해 나중에 필요한 자원은 나중에 요청하는 lazy loading이 등장
21-ESLint & Prettier23-정규표현식(RegExp)