개요
브라우저의 렌더링에 대해 알아보면서, 우리는 여러 브라우저가 각자 다른 렌더링 엔진을 사용한다는 것과 이로 인해 같은 소스코드라도 브라우저마다 다르게 동작하는 크로스 브라우징 이슈가 발생한다는 것을 알았다.
현재까지 많은 버전의 웹 브라우저가 쏟아져 나왔고, 이로 인한 호환성 문제가 발생하면서 크로스 브라우징이라는 개념은 꼭 알아두어야 할 중요한 개념이 되었다.
크로스 브라우징이란, 다양한 브라우저에서 의도한 사용자 경험을 동등하게 제공하기 위한 방법을 뜻하는데, 여기서 중요한 것은 크로스 브라우징이 초점을 맞추는 것은 동일성이 아니라, 동등성이라는 것이다. 동일성은 브라우저마다 동일한 화면을 보여주는 것을 의미하지만, 동등성은 브라우저마다 다르게 보여도 사용자가 동등한 경험을 할 수 있도록 하는 것을 의미한다.
Babel
Babel의 필요성
자바스크립트의 표준인 ECMAScript가 굉장히 빠르게 발전하면서, 현재까지 ES5, ES6, ES7 등 수많은 자바스크립트 버전이 출시되었고, 그에 따라 새로운 문법과 기능이 계속 추가되었다.
하지만 다양한 웹 브라우저의 ECMAScript 표준을 지원하는 속도가 각각 달랐기 때문에 브라우저 간 호환성 문제가 발생하기 시작했다. 특히, 자바스크립트 업데이트 중 ES6버전은 큰 변화를 가져온 만큼 현재 주로 사용되는 크롬, 사파리, 파이어폭스, 엣지 등 대부분의 브라우저는 ES6를 지원하지만, IE11과 같은 구형 브라우저에서는 ES6를 지원하지 않는다.
그런데 아직까지 IE9을 쓰는 사용자들도 있으니.. 크로스 브라우징이 이슈가 될 수 밖에 없다. 하지만 우리는 차별없이 모든 사용자에게 동등한 경험을 제공해야 하기 때문에, ES6 이상의 문법을 사용하더라도 모든 브라우저에서 동일하게 동작할 수 있도록 해야 한다.
이런 필요성으로 인해 탄생한 것이 바로 Babel이다.
Babel이란?
Babel은 입력과 출력이 모두 자바스크립트 코드인 자바스크립트 트랜스파일러이다.
트랜스파일러란, 한 프로그래밍 언어로 작성된 소스 코드를 비슷한 수준의 다른 프로그래밍 언어로 변환하는 도구를 말하는데, Babel은 최신 버전의 자바스크립트 코드(ES6+)를 이전 버전의 자바스크립트(ES5)으로 변환해주는 역할을 한다.
즉, Babel을 사용함으로써 최신 자바스크립트 문법을 사용하면서도 브라우저 호환성 문제를 해결할 수 있다.
Babel의 주요 기능
- 트랜스파일링 (Transfiling): ES6+ 코드를 ES5 이하 버전으로 변환하여 브라우저 호환성을 해결한다.
- 폴리필 (Polyfill): 폴리필은 특정 기능이 지원되지 않는 브라우저에서, 개발자가 사용할 수 있는 코드 조각이나 플러그인을 말한다. 폴리필은 프로그램이 처음 시작될 때, 현재 브라우저에서 지원하지 않는 함수를 검사하고, 각 Object의 Prototype에 붙여주는 역할을 한다.
- 플러그인 (Plugin): Babel은 플러그인을 통해 사용자가 원하는 기능을 추가하거나 변경할 수 있도록 지원한다. 예를 들어, JSX를 사용하려면
@babel/preset-react플러그인을 추가해야 한다. - JSX 코드 변환: JSX와 같이 자바스크립트 표준에서 벗어난 코드를 트랜스파일링하여 브라우저가 이해할 수 있는 순수한 자바스크립트 코드로 변환한다.
Babel의 동작 과정
- 파싱 (Parsing): Babel은 코드를 파싱하여 AST(추상 구문 트리)로 변환한다.
AST가 뭔지 모르겠다면 이전 게시글에서 알아보세요 !
- 플러그인 적용 (Plugin): 파싱된 AST에 사용자가 지정한 플러그인을 적용한다. 플러그인은 AST를 조작하거나 변환하는 로직을 가지고 있으며, 특정 기능을 지원하거나 문법을 변환하는 역할을 한다.
- 변환 (Transformation): 플러그인이 적용된 AST를 기반으로 ES5 코드로 변환한다.
- 코드 생성 (Generation): 변환된 AST를 다시 자바스크립트 코드로 생성한다. 이 단계에서 Babel은 AST를 순회하며 자바스크립트 코드를 생성하고, 최종 변환된 코드를 출력한다.
- 출력 (Print): 최종적으로 변환된 브라우저에서 실행 가능한 자바스크립트 코드를 출력한다.
Babel 사용 순서
- Babel CLI 설치: Babel을 사용하기 위해서는 먼저 Babel CLI를 설치해야 한다.
yarn add -D @babel/core @babel/cli
여기서 개발 의존성(-D)으로 설치하는 이유는 Babel은 개발 환경에서만 사용되기 때문이다.
- Babel 설정 파일 생성: Babel 설정 파일인
.babelrc,babel.config.js,babel.config.json중 하나를 프로젝트 루트 디렉토리에 생성한다.
.babelrc: 주로 하위 디렉토리나 파일에서 특정 플러그인이나 변환 설정을 사용할 때 사용한다.babel.config.js: 프로젝트 전체에 대한 Babel 설정을 지정할 때 사용한다.babel.config.json:babel.config.js과 동일한 역할을 하지만, 정적 구성인 JSON 형식으로 설정한다.
- Babel Plugin/Preset 설치 및 설정: Babel은 플러그인과 프리셋을 통해 ES6+ 코드를 ES5 이하 버전으로 변환한다. 따라서, 사용하고자 하는 플러그인과 프리셋을 설치하고, 설정해야 한다.
yarn add -D @babel/preset-env
.babelrc{ "presets": ["@babel/preset-env"] }