✅ Babel
바벨은 자바스크립트 컴파일러
컴파일러
컴파일러란, 특정 프로그래밍 언어로 작성된 코드를 다른 프로그래밍 언어나 컴퓨터 프로세서가 이해할 수 있는 기계어로 변환하는 프로그램.
코드를 작성하면, 전체 코드에 대한 오류를 검사하고 기계어로 된 프로그램으로 출력하는 번역기 같은 역할. 컴파일 뒤에 실행파일을 생성한다.
하지만 자바스크립트는 컴파일러가 아니라, 인터프리터로 동작한다.
인터프리터
인터프리터는 특정 프로그래밍 언어로 작성된 코드를 기계어로 변환하는 프로그램
작성한 코드를 실시간으로 읽어 한줄 씩 번역함.
즉 바벨은 ES5+ 코드를 자바스크립트의 하위 호환 버전으로 변환해서, 오래된 브라우저에서 시행하도록 변환하는 컴파일러.
컴파일러가 필요한 이유
모든 브라우저가 최신 문법, 기술(ES6) 을 지원하지 않기 때문에 구 기능(ES5)으로 변환하는 작업이 필요하다.
바벨이 하는 일
- Transform syntax (구문 변환)
- JSX and React
- bebel-polyfill 을 통해서 폴리필 기능 지원
✅ 바벨 동작 방식
- Parsing
- 바벨은 소스 코드를 분석해서 AST(Abstract Syntax Tree)로 변환한다.
- AST란 소스 코드의 추상 구문 구조 트리.
- 컴파일러에서 자료구조로 사용되고
@babel/parser의 parse함수를 사용해서 AWT로 파싱이 가능하다.
- 컴파일러에서 자료구조로 사용되고
- Transformation
- 이전 단계에서 생성된 AST를 브라우저가 지원하는 문법으로 AST를 변경한다.
- 이 단계에서 plugin 또는 preset(plugin 배열)에 의해 관리된다.
- 이때 사용하는 플러그인은
@babel/traverse을 사용해서 AST를 순회한다
- 이때 사용하는 플러그인은
@babel/traverse를 사용해서 AST를 순회하고, 각 AST 노드들은 브라우저가 지원하는 코드를 나타내는 새로운 노드들로 대체되고 새로운 AST로 변경된다.
- Code Generation
- 바벨은 새로운 AST를 바탕으로
@babel/generator를 통해서 새로운 코드를 생성한다.
✅ Configuration
preset은 옵션을 사용할 수 있어, 명령어를 통해 CLI 옵션과 preset 옵션을 모두 전달하는 대신 설정 파일을 사용하여 옵션을 전달할 수 있다.
babel.config.json 파일을 생성하여 presets에 추가하면 된다.
✅ .babelrc VS babel.config.js
바벨은 두 가지 설정 파일 포맷을 가진다.
단독으로 사용될 수도 있으며, 함께 사용될 수도 있다.
- 프로젝트 전체 구성
babel.config.json
- 상대파일 구성
.babelrc.json- package.json 파일 안에 정의된 ‘babel’ key
바벨은 컴파일되는
‘filename’부터 폴더 구조를 따라 올라가며,.babelrc파일을 로드한다.
구분해서 사용하는 기준?
- .babelrc
- 서브셋 디렉토리 또는 파일에서 특정한 플러그인이나, 변형 할 때 사용.
- 프로젝트 내에 서드파티 라이브러리가 바벨에 의해 트랜스폼되기 원하지 않을 때
- babel.config.json
- 여러 패키지 디렉토리를 가진 프로젝트에서 하나의 바벨 설정을 가져갈 때 유용. 따라서 주로 보편적으로 사용됨
- .js vs .json
.js를 사용하면 바벨 구성 api가 노출이 됨- (https://babeljs.io/docs/en/config-files#config-function-api)
- 바벨 설정 파일은 일반적으로 모듈로서 작성되며, 함수 형태로 내보낼 수 있음 → 바벨이 호출하여 설정을 읽고 처리 가능
- .js 파일을 사용하면 바벨 설정 파일에서 자바스크립트 코드를 사용하여 설정을 동적으로 조작가능 → 설정에 로직을 추가하거나 환경에 따라 다른 설정 적용 가능
.json파일은 단순한 데이터 형식으로 작성되어있음. 자바스크립트 코드가 아니라 텍스트 데이터로만 구성됨- 설정이 정적이며, 자바스크립트 코드를 포함할 수 없어, 설정이 변경되지 않고 고정된 경우에 적합
FrontEnd Developer.