babel 에서 polyfill 까지

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다!

 

개발 하다보면 제일 어려운 부분 중 하나가 환경설정입니다.

코딩하기 더 쉬운 환경을 위한 설정임에 틀림없지만, 어렵더라구요... 🥲

 

여러 환경설정 중에서도 이번에는 babel, polyfill에 대해 알아보려 합니다.

 

---

Babel

1. 바벨이란 무엇일까?

MDN 홈페이지를 찬찬히 읽어 나가다 보면 가장 아래에 아래와 같은 "브라우저 호환성 표" 를 쉽게 찾을 수 있습니다.

이러한 브라우저 호환성을 해결하기 위한 방법이 babel 입니다.

 

바벨을 설명하기 앞서 크로스 브라우징(Cross Browsing) 개념에 대해 알아보자면...

Cross-browser compatibility is the ability of a website or web application to function across different browsers and degrade gracefully when browser features are absent or lacking.
크로스 브라우저 호환성은  "특정 기능을 제공하지 않는" 서로 다른 브라우저와 저 사양의 브라우저에서 웹사이트나 웹앱이 정상 작동하도록 하는 기능이다.

 

 

2. 바벨의 동작 원리

바벨은 아래와 같은 3단계를 거쳐 빌드합니다.

 

1) 파싱(Parsing)
2) 변환(Transforming)
3) 출력(Printing)

 

1) 파싱(Parsing)은 사용자의 코드를 "추상 구문 트리(AST, Abstract Syntax Tree)"로 변환하는 단계입니다.

예를 들어 아래와 같은 사용자의 코드가 있다고 가정하면,

 

// user input code
(foo, bar) => foo + bar;

// final result to be transformed
"use strict";
function (foo, bar) {
	return foo + bar;
};

 

다음과 같은 AST를 생성하게 됩니다.

 

// AST shortened for clarity
{
    "program": {
        "body": [
            {
                "type": "ExpressionStatement",
                "expression": {
                    "type": "ArrowFunctionExpression",
                    "params": [
                        {
                            "type": "Identifier",
                            "name": "foo"
                        },
                        {
                            "type": "Identifier",
                            "name": "bar"
                        }
                    ],
                    "body": {
                        "type": "BinaryExpression",
                        "left": {
                            "type": "Identifier",
                            "name": "foo"
                        },
                        "operator": "+",
                        "right": {
                            "type": "Identifier",
                            "name": "bar"
                        }
                    }
                }
            }
        ]
    }
}

 

2) 변환(Transforming) 은 AST를 각 브라우저 별로 지원 가능한 AST로 변환하는 단계입니다.

이 단계에서 Babel plugin/preset 이 사용됩니다.

(여기서 preset의 개념은 이후 polyfill에서 확인하실 수 있습니다.)

 

// AST shortened for clarity
{
    "program": {
        "type": "Program",
        "body": [
            {
                "type": "ExpressionStatement",
                "expression": {
                    "type": "Literal",
                    "value": "use strict"
                }
            },
            {
                "type": "ExpressionStatement",
                "expression": {
                    "type": "FunctionExpression",
                    "async": false,
                    "params": [
                        {
                            "type": "Identifier",
                            "name": "foo"
                        },
                        {
                            "type": "Identifier",
                            "name": "bar"
                        }
                    ],
                    "body": {
                        "type": "BlockStatement",
                        "body": [
                            {
                                "type": "ReturnStatement",
                                "argument": {
                                    "type": "BinaryExpression",
                                    "left": {
                                        "type": "Identifier",
                                        "name": "foo"
                                    },
                                    "operator": "+",
                                    "right": {
                                        "type": "Identifier",
                                        "name": "bar"
                                    }
                                }
                            }
                        ]
                    },
                    "parenthesizedExpression": true
                }
            }
        ]
    }
}

 

3) 출력(Printing) 은 최종적으로 코드로 출력하는 단계입니다.

 

"use strict";
function (foo, bar) {
  return foo + bar;
};

 

3가지 단계를 아래와 같은 이미지로 나타낼 수 있습니다.

 

3. 바벨 적용

바벨 설정 방법은 여러 블로그에서 제공하고 있습니다.

 

• 바벨 설정

 

---

 

 

그렇다면 Babel 만 사용하면 모든 코드를 커버할 수 있을까? 

정확히 말하면, 아닙니다.

Babel은 빌드시에 코드를 변환하여 적용되는 것이고,

Polyfill은 런타임에 기능이 존재하는지 검사하여 없는 경우 추가하기 때문입니다.

 

Polyfill

1. 폴리필이란 무엇일까?

polyfill 은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미합니다.

ex) ES2015에 새롭게 추가된 Map, Set, Promise, Object.assign() 등을 사용 가능한 객체로 변경

 

 

2. 폴리필 적용

polyfill 적용 방법은 다양한 블로그에서 찾을 수 있습니다.

 

• 폴리필 설정

 

 

 

[References]

Babel이란 무엇인가?

 

Babel under the hood.

 

[Babel] 기본 사용법과 컴파일과정

폴리필 (polyfill) 사용법 알아보기. feat IE11

Babel #5 폴리필 (polyfill)