[패스트캠퍼스 챌린지 11일차] ECMAScript(ES6) - Polyfill, Transpile

Fast campus Logo

 

Fastcampus_Node.js 수강 목록

 

패스트캠퍼스 작심 30일 챌린지 11일차.

---

오늘의 학습 내용은 Polyfill과 Transpile.

 

먼저 polyfill은 자바스크립트 표준 라이브러리에는 등록되어 있지만

아직 브라우저나 Nodejs에서 지원하지 않는 기능을 미리 써보기 위해 만들어진 객체다.

 

기존에는 javascript에서 특정 문자를 바꾸기 위해서는 replace 함수를 사용하였다.

그러나 replace 함수는 일치하는 문자 하나만 변경한다.

만약 script 안에 일치하는 문자가 많다면?

아마 replaceAll을 많이 떠올릴 것이다.

 

아직 ES5 문법으로 개발하여 replace와 정규식을 이용해 문자를 변경하고 있지만,

이미 자바스크립트 라이브러리에는 replaceAll 기능이 정의되어 있다.

 

replaceAll 뿐만 아니라 이전 시간에 배운 Promise의 all과 관련된 함수도 새로 정의되어있고,

예제에서 다룬 flat 함수도 정의되어 있다.

하지만 아직 브라우저에서 지원하고 있지 않기 때문에 polyfill을 이용해서 미리 사용해보자!

 

polyfill 실습

 

ployfill을 사용하기 위해서는 core-js를 설치하고, 코드 상단에 import 'core-js'를 작성해줘야 한다.

(강의에서는 require('core-js')로 import 하였다.)

 

core-js를 임폴트하면 polyfill 사용 준비 끝!

(아! jsconfig.json 파일에 es2019 library 추가하기)

 

// require('core-js');

const complicatedArray = [1, [2, 3]];
const flattendArray = complicatedArray.flat();
// flat : 2차원 배열->1차원배열

console.log(flattendArray);

사용 준비가 완료되면 위의 코드를 실행해보자!

그럼 2차원 배열이 1차원 배열로 바뀌는 것을 볼 수 있다.

자바스크립트 표준 라이브러리에 정의된 flat 함수를 사용했기 때문이다.

 

자바스크립트를 공부하는 사람들은 core-js 깃헙 사이트에서 어떤 기능이 추가되었는지 확인해보고,

미리 학습해보자!

---

그리고 두번째, Transpile은 코드를 A 언어에서 B 언어로 변환하는 작업을 한다.

딱 여기까지만 들으면 Java를 C로 변환하는 작업을 말하는건가 싶다.

뭐 비슷하긴하지만 여기서는 ES6 문법의 Javascript를 ES5 문법의 Javascript로 변환하는 것을 생각하면 된다.

 

transpile은 왜 필요할까?

구형 런타임 환경에서 신규 문법을 활용하기 위해 필요한 기능이다.

ES6에서는 지원하는데 ES5에서는 지원하지 않아 기능이 동작하지 않으면 안되니

Transpiler가 변환을 해준다.

 

대표적인 Transpiler로는 Babel, tsc(Typescript Compiler), ESBuild가 있으며,

강의에서는 ESBuild를 npm을 통해 설치하여 실습을 진행하였다.

---

분명 내가 필요로 하는 기능인데 함수가 없어 스크립트를 작성하지 못하는 경우가 발생할 것이다.

그럴 때는 core-js를 확인하여 내가 원하는 기능이 정의되어있는지 잘 확인해보고,

어떻게 동작하는지 알아보는 것도 많은 도움이 될 것 같다.

 

그리고 이제는 ES6 문법을 많이 사용하고 웹에 적용하게 될 것이다. 그럼에도 ES5 기반의 환경에서 동작할 수 있도록 Transpile에 대해 자세히 학습해볼 수 있었으면 좋겠다.

---

 

[오늘의 학습통계]

패스트캠퍼스 작심 30일 챌린지 11일차 학습통계

---

- 패스트캠퍼스 URL : https://bit.ly/37BpXiC

* 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.