바벨
이전의 브라우저 또는 환경에서 이전 버전의 자바스크립트로 변환하는데 주로 사용되는 트랜스파일러
바벨의 기능
- 변환구문
- 대상 환경에서 누락된 폴리필 기능
- 소스코드 변환
트랜스파일러란?
한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 의미
예시)
- c++ → c
- ES6 → ES5(babel)
- typescript → js
- sass/scss → css
폴리필(polyfill)이란?
브라우저에서 지원하지 않는 코드를 사용가능한 코드 조각이나 플러그인(추가기능)을 의미
- 바벨은 ESNext 에서 지원하는 문법을 ES5 문법으로 번역해 주지만, ES5에 존재하지 않는 ES6의 Map, Promise, Set, Object.assigin() 등등은 존재하지 않음
- 존재하지 않는 문법에 polyfill을 사용해 사용 가능하게 만들어 줌
왜 사용해야할까?
- 크로스 브라우징
모든 브라우저가 ES6의 기능(최신기능)을 제공하지 않기 때문에 ES5코드(구기능)로 변환시키는 과정이 필요하기 때문이다. - 리액트 JSX
react에서 사용하는 jsx는 브라우저에서 읽을 수 있는 형식이 아니다. 그래서 원본 코드는 브라우저에서 제대로 실행되지 않는다. 웹팩과 바벨을 사용해 코드를 js로, 브라우저에서 실행시킬 수 있도록 해야 한다.
설치방법
npm i -D @babel/core @babel/preset-env babel-loader@babel/core : babel의 핵심기능 모듈
@babel/preset-env : 필요한 플러그인 조합을 공유, 구성이 없으면 이 사전 설정에는 최신 JavaScript(ES2015, ES2016 등)를 지원하는 모든 플러그인이 포함
babel-loader: 바벨이랑 웹팩을 연결
웹팩
여러 개 파일을 하나로 합쳐주는 모듈 번들러
모듈이란?
프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위를 의미
번들러란?
번들 : 의존성 관계가 있는 파일들을 모아 의존성은 유지시켜 주면서 하나로 합쳐주는 과정
장점
- 모든 모듈을 로드하기 위한 검색 시간 단축 : 하나의 파일만 파싱 하면 되기 때문에
- 사용하지 않는 코드 제거
- 파일 크기를 줄여줌
왜 사용해야 할까?
- 여러 개의 파일을 하나로 번들링 하여 HTTP 요청 횟수를 줄여준다.
- 사용하지 않은 코드를 제거하는 등의 불필요한 리소스 다운로드를 방지한다.
- 모듈화를 통해 많은 양의 자바스크립트 리소스를 관리하기 이롭게 해 준다.
설치 방법
npm init
npm i -D webpack webpack-cli- webpack-cli를 이용하면 CLI(command line interface)에서 웹팩 실행 가능
- create-react-app, next.js 등의 프레임워크에서는 웹팩을 세밀하게 다뤄야 하므로 webpack-cli를 이용하지 않고 코드에서 직접 실행
참고자료
자바스크립트 개발 환경: 웹팩과 바벨 - chanyeong
🖥️ 컴파일 / 트랜스파일 / 인터프리터 비교 쉽게 설명
'CS > 프로그래밍' 카테고리의 다른 글
| TDD (0) | 2023.11.03 |
|---|---|
| 원시 값과 참조 값 (0) | 2023.11.03 |
| use strict, undeclared (0) | 2023.11.01 |
| 탐색 알고리즘 (1) | 2023.10.13 |
| 정렬 알고리즘 (0) | 2023.10.13 |