babel이란?
[ 목차 ]
1. babel의 등장배경
2. babel의 개념
3. babel의 기능 3가지
4. babel의 프로세스 3단계
1. babel의 등장배경
프론트엔드 영역의 기술들이 빠르게 변화하면서 최신 브라우져 조차도 지원하지 못하는 문법과 여러 기술들이 출연하고 있습니다.모두가 빠르게 새로운 브라우저를 사용한다면 호환성에 대한 걱정없이 개발할 수 있겠지만, 아직도 많은 사람들이 예전 버전의 브라우저를 사용하고 있습니다. 그렇기 때문에 프론트엔드 개발자하면 하위 호환성을 반드시 고려할 수 밖에 없습니다. 이렇게 다양한 상태의 브라우저에서도 동일한 서비스를 유지하기 위해 크로스브라우징은 필수입니다.
크로스 브라우징은 브라우저 환경에 맞춰 사용자에게 동일한 웹 서비스를 경험할 수 있도록 최적화 하는 작업을 말합니다. 일부 최신 브라우저에서만 동작하는 기능을 그렇지 않은 브라우저에서 구현해야 할 경우, 기능을 단순화 하거나 생략해야 하는 경우가 발생하기도 합니다. 이러한 크로스 브라우징 이슈는 프론트엔드 개발자들에게 코드의 일관성도 망가트리고 혼란스럽게 만드는 요소 중 하나입니다. 그리고 이 이슈를 해결하기 위해 생겨난 툴이 바로 바벨입니다. ES6+ 버전의 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜줍니다. 바벨은 이렇게 추상화 수준을 유지한 채로 코드를 변화시키는 트랜스파일러의 역할을 합니다. 바벨을 통해 ES6+의 자바스크립트 코드는 하위 버전으로 변환되고, 그로 인해 IE나 다른 브라우저에서 동작할 수 있게 만듭니다.
2. babel의 개념
자바스크립트 컴파일러
바벨은 ES5+ 코드를 자바스크립의 하위 호환 버전으로 변환하여 오래된 브라우저에서 실행하도록 변환하는 컴파일러입니다.
check Point | 자바스크립트는 컴파일러가 아닌 인터프리터다?
자바스크립트는 일반적으로 웹 브라우저에서 실행되는 스크립트 언어로, 주로 웹 페이지의 동적인 기능을 구현하기 위해 사용됩니다. 자바스크립트는 보통 브라우저에서 인터프리터로 실행되며, 브라우저의 JavaScript 엔진이 자바스크립트 코드를 실행합니다.
자바스크립트의 실행 방식은 크게 두 가지로 나뉩니다:
- 인터프리터 (Interpreter): 초기에는 자바스크립트 코드가 브라우저에서 직접 읽혀지고 해석되어 실행되었습니다. 이러한 방식은 코드를 한 줄씩 해석하고 실행하기 때문에 빠른 실행이 가능하지만, 코드의 실행 속도가 상대적으로 느릴 수 있습니다.
- 컴파일러 (Compiler): 최근에는 많은 브라우저에서 자바스크립트 코드를 미리 컴파일하여 중간 코드나 기계 코드로 변환하는 방식을 사용하기도 합니다. 이렇게 하면 코드 실행 속도가 빨라지는 장점이 있습니다. 예를 들어, Google의 V8 JavaScript 엔진은 자바스크립트 코드를 미리 컴파일하여 실행 속도를 향상시키는 기술을 사용합니다.
따라서, 자바스크립트는 기본적으로 인터프리터 방식으로 실행되지만, 최적화된 컴파일러 기술이 도입되면서 컴파일러와 인터프리터의 경계가 모호해졌습니다. 현재의 브라우저 및 엔진은 이러한 방식을 혼합하여 최적의 성능을 달성하려고 노력하고 있습니다.
2-1. 컴파일러란?
특정 프로그래밍 언어로 작성된 코드를 다른 프로그래밍 언어나 컴퓨터 프로세서가 이해할 수 있는 기계어로 변환하는 프로그램.
즉, 인간이 사용할 수 있는 언어로 작성된 프로그램을 전체 코드에 대한 오류를 검사하고 기계어로 된 프로그램으로 출력하는 번역기 역할입니다. 컴파일 뒤 실행파일을 생성합니다.
JavaScript에 컴파일러가 필요한 이유
모든 브라우저가 최신 문법, 기술(ES6) 을 지원하지 않기 때문에 구 기능(ES5)으로 변환하는 작업이 필요합니다.
2-2. 인터프리터란?
인터프리터는 특정 프로그래밍 언어로 작성된 코드를 기계어로 변환하는 프로그램.
인간이 사용할 수 있는 언어로 작성된 프로그램을 실시간으로 읽어 한 줄씩 번역합니다. 한 줄씩 읽을 때마다 해당 줄에 오류가 있는지 확인한 후, 그 줄을 기계코드로 변환합니다. 실행파일을 생성하고 저장하지 않아 메모리를 적게 사용합니다.
2-3. 컴파일러와 인터프리터 비교
| 컴파일러 | 인터프리터 |
| 전체를 한번 훑고 컴퓨터가 이해할 수 있는 기계어로 번역 | 각행을 고레벨에서 중간 코드로 즉각 변환&실행 |
| 속도가 빠름 (상대적) | 속도가 느림 (상대적) |
| 전체를 파악하여 에러를 출력 | 오류가 발생한 시점에서 이후 출력 중단 |
| 기계 종속성 자유도 낮음 | 기계 종속성 자유도 높음 |
3. Babel의 기능 3가지
1) Transform syntax (구문 변환)
최신의 자바스크립트 문법을 오래된 브라우저가 이해할 수 있도록 오래된 문법으로 변환 해줍니다.
2) babel-polyfill을 통해서 polyfill 기능을 지원
polyfill이란?
폴리필(polyfill) 은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미 합니다. 브라우저에서 지원하지 않는 기능들에 대한 호환성 작업을 채워 넣는다고 해서 polyfill 이라고 칭합니다. 폴리필은 오래된 브라우저에 네이티브로 지원하지 않는 사용자가 사용하는 메서드, 속성, API가 존재하지 않을 때 추가해줍니다. 폴리필은 프로그램이 처음 시작할 때, 지원하지 않는 기능들을 지원해줍니다.
babel-polyfill
바벨은 최신 문법을 오래된 문법으로 변환해 주는 트랜스파일러 역할만 할 뿐 최신 함수를 사용할 수 있는 건 아닙니다. 앞에서 설명한대로 polyfill 은 프로그램이 처음에 시작될 때 지원하지 않는 기능들을 추가하는 것입니다. 즉, babel 은 컴파일시에 실행되고 babel-polyfill 은 런타임에 실행되는 것입니다. 폴리필(polyfill)은 최신 ECMAScript 환경을 만들기 위해 코드가 실행되는 환경에 존재하지 않는 빌트인, 메소드 등을 추가하는 역할을 합니다.
3) JSX문법 변환
JSX란?
JavaScript를 확장한 문법 (Javascript + xml)
템플릿 언어(HTML 내부에 변수 및 문법을 사용할 수 있는 언어)로도 보일 수 있지만 JavaScript 코드 내부에서 HTML 문법을 사용한 것입니다.
JSX 문법을 변환해야 하는 이유
JSX는 JavaScript 코드이지만 브라우저에서 단독으로 실행될 수 없습니다. JSX를 바로 실행하면 브라우저는 JSX 문법을 이해하지 못하기 때문에 JSX 코드를 브라우저가 이해할 수 있는 JavaScript 코드로 트랜스파일링 해줘야합니다. 바벨로 컴파일된 JSX는 React.createElement를 호출하여 리액트 엘리먼트를 반환합니다. 이러한 이유 때문에 JSX 문법을 사용하는 컴포넌트 파일에는 React를 import해줘야 합니다.
4. Babel의 프로세스 3단계
바벨은 세 단계로 빌드를 진행합니다.
- 파싱(Parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
- 변환(Transforming) : 추상 구문 트리를 변경
- 출력(Printing) : 변경된 결과물을 출력
이전 단계에서 생성된 AST를 브라우저가 지원하는 오래된 문법으로 AST를 변경합니다. 이 단계에서 plugin 또는 preset(plugin 배열)에 의해 관리되는데 이때 사용되는 plugin들은 @babel/traverse을 사용하여 AST를 순회합니다. 즉, @babel/traverse을 사용하여 AST를 순회하며 각 AST 노드들은 브라우저가 지원하는 코드를 나타내는 새로운 노드들로 대체되고 새로운 AST로 변경됩니다.
1) Parsing (파싱)
바벨은 소스 코드를 분석하여 AST(Abstract Syntax Tree)로 변환합니다.
AST란?
AST는 소스 코드의 추상 구문 구조의 트리입니다. 컴파일러에서 자료 구조로 사용되며 컴파일러의 구문 부석(parsing) 단계의 트리로 표현된 결과물입니다. @babel/parser의 parse 함수를 사용하여 AWT로 파싱 할 수 있습니다.
2) Transformation (변환)
바벨은 파싱과 출력을 담당하고 변환은 플러그인이 진행합니다. 바벨 플러그인(plugin)은 바벨이 어떤 코드를 어떻게 변환할 지에 대한 규칙을 나타냅니다. 플러그인은 직접 만들어서 커스텀 플러그인을 사용해도 되고, 이미 잘 만들어진 플러그인을 가져다가 써도 됩니다.
바벨 플러그인에 대한 바벨 공식문서
https://babeljs.io/docs/en/plugins
Plugins · Babel
Babel's code transformations are enabled by applying plugins (or presets) to your configuration file.
babeljs.io
프리셋(preset)
플러그인을 매번 일일이 설정하는 것이 번거롭기 때문에 필요한 플러그인들을 목적에 따라 세트로 묶어놓는 경우가 많습니다. 이러한 세트를 프리셋(preset)이라고 합니다. 프리셋도 마찬가지로 직접 모듈을 만들어서 설정할 수도 있고, 바벨에서 제공하는 프리셋을 가져와서 사용할 수도 있습니다. 바벨 7 이전에는 연도별 프리셋을 제공했지만 이후 버전에서는 env 하나로 합쳐져서 무척 편리하게 사용할 수 있게 되었습니다.
3) 출력(Printing) / Code Generation (코드 생성)
바벨은 새로운 AST를 바탕으로 @babel/generator를 통하여 새로운 코드를 생성한다.
참고 문서
https://velog.io/@suyeon9456/Babel
https://bravenamme.github.io/2020/02/12/what-is-babel/
https://velog.io/@suyeon9456/Babel
'Web Development > Front End 관련 개념 정리' 카테고리의 다른 글
| [FE] 상태관리란? (0) | 2023.11.28 |
|---|---|
| SPA(Single Page Application)란? (0) | 2023.10.10 |
| Local Storage & Session Storage란? (0) | 2023.08.16 |
| webpack이란? (0) | 2023.08.16 |
| [OAuth2.0] OAuth 2.0이란? (0) | 2023.08.15 |
