자바스크립트의 진화
JS는 매번 새로운 기능 추가를 위하여 제안하고 분석하고 가치가 있다고 판단되면 이곳에 추가됩니다. 그리고 궁극적으로 명세서에 등록이 됩니다.
JS 엔진을 만드는 각 조직은 나름대로 우선순위를 매겨 명세서 내의 어떤 기능을 구현할 지
결정합니다. 명세서에 등록된 기능을 구현하지 않고 초안에 있는 제안을 먼저 구현하는 경우도
있습니다. 구현 난이도가 높아서 초안의 기능을 구현하는 일도 종종 있습니다.
바벨
명세서에 등록된 지 얼마 되지 않은 기능으로 코드를 작성하다 보면 특정 엔진에서 우리가
작성한 코드를 지원하지 않는다는 걸 경험할 때가 있습니다. 명세서 내의 모든 기능을 엔진이
구현하지 않기 때문입니다. 이런 경우에서 바벨을 사용할 수 있습니다.
🔔 바벨은, 트랜스파일러로 모던 자바스크립트 코드를 구 표준을 준수하는 코드로
변경합니다.
1) 바벨의 역할
1. 트랜스 파일러
바벨은 코드를 재 작성해주는 트랜스파일러 프로그램 입니다.
개발자의 컴퓨터에서 동작되는데, 바벨을 실행하면 기존의 코드가 구 표준을 준수하는 코드로
변경됩니다. 변경된 코드는 웹사이트 형태로 사용자에게 전달됩니다.
웹팩과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러 즉,
바벨을 동작시켜줍니다. 이러한 과정이 없다면 개발이 끝난 코드를 통합하는데 어려움이 발생
할 수 있습니다.
2. 폴리필
명세서엔 새로운 문법이나 기존에 없던 내장 함수에 대한 정의가 추가될 때가 있습니다.
새로운 문법을 사용해서 코드를 작성하면, 바벨은 이를 구 표준을 준수하는 코드로 변경합니다.
반면, 새롭게 표준에 추가된 함수는 명세서 내의 정의를 읽고 이에 맞게 직접 함수
를 구현해야 사용할 수 있습니다. 개발자는 스크립트에 새로운 함수를 추가하거나 수정해서
스크립트가 최신 표준을 준수할 수 있게 작업을 할 수 있습니다.
이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한
함수의 스크립트를 폴리필이라고 합니다.
폴리필은(polyfill)은 구현이 누락된 새로운 기능을 매꿔주는 역할을 합니다.
주목할만한 폴리필 2가지
- core js : 다양한 폴리필을 제공한다. 특정 기능의 폴리필만 사용 가능
- polyfill.io : 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스
2) 트랜스파일러 없이 최신기능 사용
모던 자바스크립트를 이용해 스크립트를 작성하려면 트랜스파일러와 폴리필은 필수입니다.
하지만 대부분의 브라우저들은 최신 기능들을 대부분 지원합니다. ( Google Chrome )
트랜스파일러가 없어도 최신 기능을 대부분 사용할 수 있기 때문에 트랜스파일러가 없어도
안심해도 됩니다.
❤️ alert 함수
alert('트랜스파일러가 없어도, 대부분의 브라우저에서 작동되는 함수입니다.');