[공부 필기] JavaScript 문법 공부 17일차

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/polyfills

폴리필

 

✅ 폴리필(polyfill)

- 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할을 한다.

- 충전솜이라는 의미를 가지고 있다고 한다.

→ 정리 : 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 말한다.

 

- 자바스크립트 끊임없이 진화하는 언어다.

- 새로운 제안(proposal)이 정기적으로 등록, 분석되며, 가치가 있다고 판단되는 제안은 명세서에 등록된다.

 

- 브라우저 등이 가지고 있는 자바스크립트 엔진,

- 이 자바스크립트 엔진을 개발한 개발팀은 나름대로 우선순위를 매겨 명세서 내에서도 어떤 기능을 먼저 구현할지를 결정해놓았다.

   » 명세서가 아니라 초안(draft)에 있는 제안을 먼저 구현하기로 결정하는 경우도 있다고 한다.

 

- 이 말은 즉슨 자바스크립트 엔진이 표준 전체를 지원하지 않고 일부만 지원할 수 있다는 이야기이다.

   » 흔한 일이라고 한다.

- 엔진별로 어떤 기능을 지원하고 있는지는 https://kangax.github.io/compat-table/es6/ 에서 확인할 수 있다.

 

# 자바스크립트 엔진이 표준 전체를 지원하기 않기 때문에

   폴라필(브라우저에서 지원하지 않는 코드를 사용 가능한 코드 조각이나 플러그인으로 변환한 코드)을 배우는 것일까..

 

✅ 바벨

- 특정 엔진에서 우리가 작성한 코드가 지원하지 않을 때 바벨을 사용한다.

- 바벨은 트랜스파일러(transpiler)이며, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔준다.

   » 바벨 = 코드를 재작성해주는 트랜스파일러 프로그램

 

- 바벨의 역할

   » 트랜스파일러

       개발자의 컴퓨터에서 돌아가며, 이를 실행하면 구 표준을 준수하는 코드로 변경되고

       변경된 코드는 웹사이트 형태로 사용자에게 전달된다.

       # 웹팩(webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜준다.

       → 정리 : 새로운 문법을 사용해 코드를 작성하면 트랜스파일러는 이를 구 표준을 준수하는 코드로 변경해준다.

   » 폴리필

       새로운 문법으로 코드를 작성하면 트랜스파일러가 변환해준다.

       하지만, 새로운 표준에 추가된 함수는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 한다.

       # 자바스크립트는 매우 동적인 언어라서 어떤 함수라도 스크립트에 추가할 수 있고, 기존 함수를 수정할 수도 있다.

       이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 "폴리필"이라고 한다.

       주목할 만한 폴리필 - core js, polyfill.io 

 

- 모던 자바스크립트를 이용해 스크립트를 작성하려면 트랜스파일러와 폴리필이 필수라고 한다.

 

 

직접 바벨을 사용해보고 싶었지만

사용하기에는 내 JavaScript 지적 레벨이 낮아서(?)

많이 성장한 후 다시 돌아와서 시도해봐야겠다.