front-end developer

@babel/preset-env와 @babel/plugin-transform-runtime의 corejs 3 폴리필 비교

I'm Okay — Wed, 21 Aug 2019 15:59:54 +0900

@babel/plugin-transform-runtime 플러그인에 corejs 옵션을 줘서 폴리필하는 방법을 소개했었는데

최근에 @babel/preset-env의 useBuiltIns, corejs 옵션으로도 폴리필을 적용할 수 있다는걸 알게 되어서

각 방법에 어떠한 차이가 있는지 간단히 조사해 보았다.

먼저 Promise 를 사용하는 코드를 작성했다.

class Controller {
  constructor() {
    new Promise(resolve => {
      setTimeout(resolve, 1000);
    })
    .then(() => {
      console.log("Complete!!", Promise);
    });
  }
}

그리고 각각의 방법을 적용한 결과를 확인해 보았다.

@babel/preset-env 적용하여 변환된 코드

var Controller = function Controller() {
  new Promise(function (resolve) {
    setTimeout(resolve, 1000);
  }).then(function () {
    console.log("Complete!!", Promise);
  });
};

Promise를 사용하는 코드가 그대로 있다.

@babel/plugin-transform-runtime 적용하여 변환된 코드

var Controller = function Controller() {
  new _promise["default"](function (resolve) {
    (0, _setTimeout2["default"])(resolve, 1000);
  }).then(function () {
    console.log("Complete!!", _promise["default"]);
  });
};

Promise를 사용하는 코드가 _promise로 변경되었다.

간단 정리

@babel/preset-env { useBuiltIns: “entry”, corejs: 3 }

- 폴리필 메서드들을 전역 스코프에 추가한다.

- deprecated 된 @babel/polyfill을 대체한다.

- 전역 오염 O

@babel/preset-env { useBuiltIns: “usage”, corejs: 3 }

- 사용된 폴리필 메서드만 전역 스코프에 추가한다.

- 전역 오염 O

@babel/plugin-transform-runtime { corejs: 3 }

- 사용된 폴리필 메서드만 포함시키고, 해당 폴리필 메서드를 사용하도록 원본 코드를 변경한다.

- 전역 오염 X

참고 문서

https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpreset-env

zloirock/core-js

Standard Library. Contribute to zloirock/core-js development by creating an account on GitHub.

github.com

Babel Polyfill 적용하는 방법들

I'm Okay — Thu, 8 Aug 2019 13:27:27 +0900

babel은 기본적으로 es6(ecma2015) 문법으로 작성한 코드를 es5 환경에서 동작할 수 있도록 문법적인 변환을 해주지만

es5에 존재하지 않는 es6의 메서드나 생성자들까지 지원해주지는 않는다.

그래서 es5로 동작하는 하위 브라우저를 지원하는 서비스를 개발할 때에는 폴리필을 추가하여 개발 편의성을 향상시킬 수 있다.

폴리필을 추가하는 방법은 다양한데 대표적인 몇가지 방법을 소개한다.

전역에 폴리필 추가하기 (전역 오염 O)

babel 7.4.0 이후부터 @babel/polyfill이 deprecated 되고

core-js와 regenerator-runtime을 직접 사용하는 방식을 제안하고 있다.

@babel/polyfill Deprecated 안내(https://www.npmjs.com/package/@babel/polyfill)

아래처럼 2개의 스크립트를 불러오면 전역 스코프에 폴리필이 추가되어

IE 하위 브라우저에서도 Promise, Map, Set, Object.assign, Array.find 등의 메서드를 자연스럽게 사용할 수 있다.

<script src="https://unpkg.com/core-js-bundle@3.1.4/index.js"></script>
<script src="https://unpkg.com/regenerator-runtime@0.13.3/runtime.js"></script>

Webpack 번들에 포함하고 전역에 폴리필 추가하기 (전역 오염 O)

entry 파일에서 아래와 같이 import만 해주면

전역 스코프에 폴리필을 추가하는 코드가 함께 번들링 된다.

npm install --save core-js regenerator-runtime

import "core-js/stable";
import "regenerator-runtime/runtime";

Webpack 번들에 포함하고 번들 내부에 가두기 (전역 오염 X)

@babel/plugin-transform-runtime을 사용하면 실제로 코드에서 사용한 폴리필 메서드만 번들에 포함된다.

현재 시점에서 전역을 오염시키지 않는 가장 바람직한 방법이라고 생각된다.

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime @babel/runtime-corejs3

의존 모듈 설치 후 Webpack Config에 아래와 같이 Plugins 설정을 추가한다.

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

위 내용은 corejs 3 사용을 기준으로 작성한 예제이며

옵션에 대한 자세한 설명은 https://babeljs.io/docs/en/babel-plugin-transform-runtime에서 확인할 수 있다.

번들 시각화 도구 - Webpack Bundle Analyzer

I'm Okay — Thu, 8 Aug 2019 11:44:19 +0900

Webpack을 사용하여 번들링되는 모듈을 분석해서 시각적으로 표현해주는 모듈이다.

모듈이 차지하는 용량에 따라 눈에 보이는 영역도 커지기 때문에

어떤 모듈이 얼만큼의 용량을 차지하는지 쉽게 파악알 수 있다.

설치

npm install --save-dev webpack-bundle-analyzer

사용 방법

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

레포트 화면

Webpack 빌드를 실행하면 아래와 같은 화면이 새창으로 뜬다.

부가 기능

레포트 화면을 static 파일로 생성하기

new BundleAnalyzerPlugin({
  analyzerMode: "static", // 기본값 "server"
  reportFilename: "파일명" // 기본값 "report.html"
})

번들할 때 새창 열리지 않게 하기

new BundleAnalyzerPlugin({
  openAnalyzer: false // 기본값 true
})

https://github.com/webpack-contrib/webpack-bundle-analyzer

webpack-contrib/webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap - webpack-contrib/webpack-bundle-analyzer

github.com

객체 지향 설계 포인트

I'm Okay — Mon, 6 Jun 2016 15:47:32 +0900

단일 책임 원칙

책임에 따라 객체를 분리 한다.
예를 들면 아이템 목록을 관리하는 객체, 유저의 정보를 관리하는 객체 등

정보 은닉

객체는 상태와 행위를 가진다.
외부에서 객체의 상태에 직접 접근하지 않고, 객체의 API를 통해야 한다.
예를 들어 외부에서 목록객체가 가득 찼는지를 판단하고 싶을때
목록 객체의 아이템 갯수와 최대값을 직접 비교하는 것이 아니라
목록 객체에 물어보면 된다.
ex)
objList.length >= objList.max (X)
objLIst.isFull() (O)

복합 객체의 API는 구성 요소의 API보다 단순해야 한다.

큰 객체를 협력 객체의 그룹으로 나누기
작은 객체들을 큰 그룹으로 묶어서 감추기