[Javascript] Babel과 트랜스파일링

 

 

 

1. 트랜스파일러란 무엇일까?

트랜스파일러는 특정 프로그래밍 언어로 작성된 코드를 다른 프로그래밍 언어로 변환하는 도구를 말한다. 보통 트랜스파일러는 원시 코드를 다른 언어의 동등한 코드로 변환해서 해당 언어의 특정 플랫폼이나 환경에서 실행할 수 있게 해준다.
Babel이 대표적으로 널리 사용되는 트랜스파일러이다. 

 

2. Babel이란?

Babel은 Javascript 코드를 변환해주는 트랜스파일러인데, 주로 최신 ECMAScript 표준에 따라 작성된 코드를 구식 브라우저에서 지원되는 호환 가능한 코드로 변환되는 데 사용한다. 

브라우저별로 제조사가 다르고, 그에 따른 렌더링엔진 및 Javascript를 파싱하는 엔진 등등의 세부스펙이 다르다. 그래서 같은 코드라고 하더라도 브라우저에 따라 다르게 동작할 수 있기 때문에 이를 일관성있게 맞추는 과정이 필요한데 그것을 크로스 브라우징이라고 한다. 
어떤 브라우저 및 환경에서 접속한다 하더라도 유저가 동일한, 일관된 경험을 할 수 있게 하는 것이다.

이것이 Babel을 사용하는 이유이고 Babel을 통해 Javascript 크로스 브라우징을 구현할 수 있다.

Babel이 제공하는 기능으로는

• 최신문법의 ECMAScript 코드를 구버전 브라우저에서도 동작하는 코드로 변환하여 크로스 브라우징 대응
• 다양한 플러그인 제공으로 코드 변환 과정을 설정할 수 있음
• React JSX를 Javascript 코드로 변환
• 프리셋 제공

등이 있다. 

Babel은 다음과 같은 과정으로 트랜스파일링을 진행한다. 

1. 소스코드 입력 :Javascript로 작성된 코드를 입력받는다.
2. 파싱: 입력된 코드를 파싱하여 AST로 변환한다.
3. 트랜스포머: 트랜스포머(Transformer)가 AST를 수정하고 변환한다. 이 단계에서 설정한 플러그인에 따라 코드를 변환한다. (예를 들면 Polyfill)
4. 생성: 변환된 AST를 다시 Javascript 코드로 생성한다. 이렇게 변환된 코드는 이제 구버전 브라우전에서도 동작이 가능해진다.
5. 결과 출력: 변환된 코드를 지정된 출력 형식으로 출력한다.

 

3. 폴리필(Polyfill)이란?

폴리필은 최신 Javascript 문법에 추가되어 기존에 없던 메서드나 객체, 함수와 같이 구버전 브라우저에서 동작하지 않는 코드들을 다른 방식으로 코드를 작성하여 동일한 기능으로 동작하게 하는 것을 말한다.