[Babel] 바벨이란 ?

바벨은 자바스크립트 컴파일러이다.

컴파일러란 ?

컴파일러는 특정 프로그래밍 언어로 작성된 코드를 '다른 프로그래밍 언어'나 컴퓨터 프로세서가 이해할 수 있는 '기계어'로 변환하는 프로그램이다.

즉, 인간이 사용할 수 있는 언어로 작성된 프로그램을 전체 코드에 대한 오류를 검사하고 기계어로 된 프로그램으로 출력하는 번역기이다. 컴파일 뒤 실행파일을 생성한다.

 

하지만 자바스크립트는 컴파일러가 아닌 인터프리터로 동작한다.

 

인터프리터란 ?

인터프리터는 특정 프로그래밍 언어로 작성된 코드를 '기계어'로 변환하는 프로그램이다.

인간이 사용할 수 있는 언어로 작성된 프로그램을 실시간으로 읽어 한 줄씩 번역한다. 한 줄씩 읽을 때마다 해당 줄에 오류가 있는지 확인한 후, 그 줄을 기계코드로 변환한다.

 

또한 실행파일을 생성하고 저장하지 않아 메모리는 적게 사용되지만 코드가 실행될 때마다 실행파일을 생성하여 compiler 보다 속도가 느리다.

 

바벨은 ES5+ 코드를 자바스크립의 하위 호환 버전으로 변환하여 오래된 브라우저에서 실행할 수 있도록 변환하는 "컴파일러"이다. (트랜스파일링: 특정 언어로 작성된 코드를 다른 언어로 변환)

 

Javascript 에서 컴파일러가 필요한 이유 ⭐️

모든 브라우저가 자바스크립트의 최신 문법과 기술(ES6)을 지원하지 않기 때문에 구 기능(ES5)으로 변환하는 작업이 필요하다. 

 

Babel의 주요 기능 ⚙️

1. Transform syntax(구문 변환) : 트랜스파일링은 최신의 자바스크립트 문법을 오래된 브라우저가 이해할 수 있도록 오래된 문법으로 변환해 준다.
2. babel-polyfill을 통한 폴리필 기능 지원 : 폴리필은 프로그램이 처음 시작할 때, 오래된 브라우저에 사용자가 사용하는 메서드, 속성, API 등이 존재하지 않을 때 지원하지 않는 기능들을 제공해준다. 바벨은 최신 문법을 오래된 문법으로 변환해 주는 트랜스파일러 역할만 할 뿐 최신 함수를 사용할 수 있는 건 아니다. 바벨은 컴파일 때 실행되고 폴리필은 런타임에 실행된다. (바벨은 컴파일 때 실행되고 폴리필은 런타임에 실행된다.)
3. JSX & React : Babel은 JSX문법을 자바스크립트 코드로 변환한다.