BABEL? 왜 바벨을 사용할까?
코어 자바스크립트 문서에 따르면, 자바스크립트는 계속해서 진화한다. 그렇기에 많은 유저들의 다양한 제안을 ECMA사이트 정기적으로 정리하고 있다. 그리고 궁극적으로 ECMA Script Specification (명세서)에 등록된다. 이렇게 등록된 제안들을 각 브라우저, 자바스크립트 엔진을 만드는 조직은 새롭게 작성된 명세서의 기능들을 차례대로 구현한다. 하지만 이러한 과정은 빠르게 진행되지 않는다.
이런 경우, 명세서에 등록된 지 얼마 안 된 기능이 특정 엔진에서 지원되지 않아 원하는 대로 작동되지 않는 경우가 있다. 그리고 브라우저나 플랫폼마다 보여지는 모습이 다른 경우가 있다. 이를 최적화해주는 작업을 ''크로스 브라우징'(Cross Browsing)이라고 한다. 이런 문제를 해결해주는 툴이 바벨이다. 바벨은 추상화 수준을 유지한 채로 코드를 변화시키는 트랜스파일러의 역활을 실행한다.
추상화란 복잡함 속에서 필요한 관점만을 추출하는 행위. 개발은 추상화를 통해 문제를 해석하고 해결하는 프로그램을 만드는 과정이다.
바벨
바벨은 트랜스 파일러로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔준다. 바벨을 통해 ES+6의 자바스크립트 코드는 하위 버전으로 변환한다. 이를 통해, 인터넷 익스플로어에서도 동작한다.
바벨의 빌드 단게
-
파싱(parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
추상 구문 트리(AST)
npm install을 통해 설치된
devDependencies를 확인하면 다양한 도구들이 발전하여 도움을 준다는 것을 눈으로 확인할 수 있다. 이는 프로덕션 코드*에 포함되지 않는 JS모듈이지만 중요하다. 이 도구들은 모두 AST 처리를 기반으로 구축되었다.Abstract Syntax Tree, AST(추상 구문 트리)는 프로그래밍 언어의 문법에 따라 소스 코드 구조를 표시하는 계층적 프로그램 표현이다. 각 AST 노드는 소스 코드의 항목에 해당한다. 그렇다면 바벨은 어떻게 AST를 활용하는가?
바벨은 정확히는 JS 컴파일러이다. 일반적으로 크로스 브라우징을 위해 사용되지만, 이는 바벨의 플러그인 그룹 중 하나에 불과하다. 바벨은 코드 압축 / React 문법(ex. JSX)를 트랜스파일할 때, Flow를 위한 플러그인으로도 사용한다.
파싱 단계에서 AST를 구축하고, 변환 단계에서 적용된 플러그인을 통해 AST를 탐색, 수정하여 생성 단계에서 수정된 AST에서 새로운 코드를 생성한다.
*프로덕션 코드 : 프로젝트의 로직을 포함하고 어플리케이션(제품)에서 실행되는 시스템의 부분을 의미한다
-
변환(Transforming) : 추상 구문 트리를 변경
-
출력(Printing) : 변경된 결과물을 출력한다.
여기서 바벨은 파싱과 출력을 담당한다. 하지만 변환은 플러그인 맡아서 진행한다. 바벨 플러그인은 바벨이 어떤 코드를 어떻게 변환할 지에 대한 규칙을 나타낸다. 이는 일일이 바벨 플러그인을 설정하여 입맛에 맞게 변경할 수 있다.
하지만 프리셋을 설정하여 필요한 플러그인들을 목적에 따라 세트로 묶어서 적용하기도 한다. 현재 바벨은 env 하나로 합쳐서 편리하게 사용할 수 있다. 대표적인 프리셋은 ES6+로 변환하는 preset-env가 있다.
폴리필
폴리필은 최신 ECMAscript 환경을 만들기 위해 코드가 실행되는 환경에 존재하지 않는 빌트인, 메소드 등을 추가하는 역활을 한다. 폴리필의 예로는 ES6의 Promise 객체는 env 프리셋을 가지고 변환해도 IE에서 인식하지 못한다. 이러한 경우, 폴리필을 통해 Promise를 ES5 방식으로 구현하여 해결한다.
결론
코어자바스크립트에서 바벨에 대한 설명을 보게되어 조금 더 알아보게 되었다. 이를 통해서 AST 추상구문트리에 대해서도 이해 할 수 있었다. 제대로 이해하기 위해서는 추가적으로 블로그를 작성하거나 자주 읽어보러 다시 와야겠다.
