![bg right fit](https://cdn.markslides.ai/users/1/images/fmuT2q-Biw0nwovNya-c9) # Babel ## [소플 (이인제)](https://www.soaple.io/) --- # 목차 - [Babel 소개](#babel-소개) - [Babel 시작하기](#babel-시작하기) - [Babel 설정하기](#babel-설정하기) - [코드 변환하기](#코드-변환하기) - [Babel Plugins & Presets](#babel-plugins--presets) --- ![bg right fit](https://cdn.markslides.ai/users/1/images/fmuT2q-Biw0nwovNya-c9) # Babel 소개 --- # A JavaScript compiler --- # Babel이란? > **A JavaScript compiler** - ES6+ 코드를 이전 버전과 호환되는 JavaScript 버전으로 변환 - Transform syntax - Polyfill 기능: 타겟 환경에 없는 기능을 채워주는 것 - 소스코드 변환 (codemods) --- # Babel 변환 예시 ```js // Babel Input: ES2015 arrow function [1, 2, 3].map(n => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); ``` --- # Babel을 사용하는 이유 - 최신 ECMAScript 문법을 자유롭게 사용하기 위함 - 브라우저 호환성, 하위 호환성(backward compatibility) 준수 - Webpack, Rollup 등의 번들러와 쉽게 통합 가능 --- # Babel 작동 방식 - 코드를 Abstract Syntax Tree (AST)로 파싱 - AST를 변환(Transform) - 새로운 JavaScript 코드를 생성 --- # Babel의 작동 과정을 나타낸 Sequence Diagram ```mermaid sequenceDiagram participant B as Babel participant S as Source Code participant P as Parser participant A as AST participant T as Transformer participant G as Generator S->>P: Input source code P->>A: Parse to AST A->>T: Transform AST T->>G: Generate new AST G->>B: Output transformed code ``` --- # Babel 핵심 패키지들 - `@babel/core`: Babel의 핵심 기능을 담고 있는 패키지 - `@babel/preset-env`: 타겟 환경에 맞게 쉽게 코드를 변환할 수 있도록 해주는 패키지 - `@babel/cli`: Babel을 커맨드 라인에서 사용할 수 있게 해주는 패키지 --- ![bg right fit](https://cdn.markslides.ai/users/1/images/fmuT2q-Biw0nwovNya-c9) # Babel 시작하기 --- # Babel standalone ([🔗 관련 문서](https://babeljs.io/docs/babel-standalone)) 브라우저 및 기타 Node.js가 아닌 환경에서 사용할 수 있는 독립 실행형 Babel 빌드 ```html

``` --- # Babel 설치하기 1. Node.js와 npm 설치 (https://nodejs.org/) 2. Babel 핵심 패지키들 설치 ```bash npm install --save-dev @babel/core @babel/cli @babel/preset-env ``` --- ![bg right fit](https://cdn.markslides.ai/users/1/images/fmuT2q-Biw0nwovNya-c9) # Babel 설정하기 --- # Babel 설정 파일 - 프로젝트 전체 설정 - 다음 확장자를 가지는 `babel.config.*` 파일: `.json`, `.js`, `.cjs`, `.mjs`, `.cts` - 파일 경로에 따른 설정 - 다음 확장자를 가지는 `.babelrc.*` 파일: `.json`, `.js`, `.cjs`, `.mjs`, `.cts` - 확장자가 없는 `.babelrc` 파일 - `"babel"`이라는 키를 가진 `package.json` 파일 --- # `babel.config.json` 파일 예시 ```json { "presets": [ [ "@babel/preset-env", { "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1" } } ] ] } ``` --- ![bg right fit](https://cdn.markslides.ai/users/1/images/fmuT2q-Biw0nwovNya-c9) # 코드 변환하기 --- # Babel을 사용해서 코드 변환 먼저 JavaScript 코드를 작성하고, 아래 명령어를 통해 변환 ```bash npx babel src --out-dir dist ``` --- ![bg right fit](https://cdn.markslides.ai/users/1/images/fmuT2q-Biw0nwovNya-c9) # Babel Plugins & Presets --- # Babel Plugins Plugin은 실제로 코드를 변환하는 역할을 함 - 예시 Plugins - `@babel/plugin-transform-arrow-functions` - `@babel/plugin-transform-destructuring` - `@babel/plugin-transform-spread` - Plugins 목록 - https://babeljs.io/docs/plugins-list --- # Presets Preset은 **Plugin을 모아놓은 것**이며, 대표적으로는 아래와 같은 것들이 있음. - [`@babel/preset-env`](https://babeljs.io/docs/babel-preset-env): 타겟 환경에 맞게 쉽게 코드를 변환 - [`@babel/preset-react`](https://babeljs.io/docs/babel-preset-react): 리액트의 JSX 코드를 변환 - [`@babel/preset-typescript`](https://babeljs.io/docs/babel-preset-typescript): TypeScript 코드를 변환 - [`@babel/preset-flow`](https://babeljs.io/docs/babel-preset-flow): [Flow](https://flow.org/) 코드를 변환 --- # 마무리 - Babel은 모던 JavaScript를 사용하기 위한 강력한 도구임 - 오래된 브라우저에서도 코드가 작동하도록 함 - 최신 JavaScript 기능들을 사용할 수 있게 해줌 --- # References - https://babeljs.io/ --- # Thank you! ## Made with ♥ by [Soaple](https://www.soaple.io/)