홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

폴리필과 트랜스파일러

저자：Eve Cole 업데이트 시간：2025-01-02 15:40:29

JavaScript 언어는 꾸준히 발전하고 있습니다. 언어에 대한 새로운 제안이 정기적으로 나타나고 분석되어 가치가 있다고 판단되면 https://tc39.github.io/ecma262/ 목록에 추가된 다음 사양으로 진행됩니다.

JavaScript 엔진 뒤에 있는 팀은 무엇을 먼저 구현해야 할지에 대한 자신만의 아이디어를 가지고 있습니다. 그들은 덜 흥미롭거나 하기가 더 어렵기 때문에 초안에 있는 제안을 구현하고 이미 사양에 있는 제안을 연기하기로 결정할 수 있습니다.

따라서 엔진이 표준의 일부만 구현하는 것은 매우 일반적입니다.

언어 기능에 대한 현재 지원 상태를 볼 수 있는 좋은 페이지는 https://compat-table.github.io/compat-table/es6/입니다(규모가 크며 아직 공부할 것이 많습니다).

프로그래머로서 우리는 최신 기능을 사용하고 싶습니다. 좋은 물건이 많을수록 좋습니다!

반면에, 아직 최신 기능을 이해하지 못하는 오래된 엔진에서 최신 코드가 작동하도록 하려면 어떻게 해야 할까요?

이를 위한 두 가지 도구가 있습니다:

  1. 트랜스파일러.

  2. 폴리필.

이 장에서 우리의 목적은 작동 방식과 웹 개발에서의 위치에 대한 요점을 파악하는 것입니다.

트랜스파일러

트랜스파일러는 소스 코드를 다른 소스 코드로 변환하는 특별한 소프트웨어입니다. 최신 코드를 구문 분석(“읽고 이해”)하고 이전 구문 구조를 사용하여 다시 작성할 수 있으므로 오래된 엔진에서도 작동합니다.

예를 들어 2020년 이전의 JavaScript에는 "무효 병합 연산자"가 없었나요 ?? . 따라서 방문자가 오래된 브라우저를 사용하는 경우 height = height ?? 100 와 같은 코드를 이해하지 못할 수 있습니다. height = height ?? 100 .

트랜스파일러는 코드를 분석하고 height ?? 100 을 (height !== undefined && height !== null) ? height : 100 .

 // 트랜스파일러를 실행하기 전에
키 = 키 ?? 100;

// 트랜스파일러 실행 후
높이 = (높이 !== 정의되지 않음 && 높이 !== null) ? 높이 : 100;

이제 다시 작성된 코드는 이전 JavaScript 엔진에 적합합니다.

일반적으로 개발자는 자신의 컴퓨터에서 트랜스파일러를 실행한 다음 트랜스파일된 코드를 서버에 배포합니다.

이름에 관해 말하자면, Babel은 가장 유명한 트랜스파일러 중 하나입니다.

webpack과 같은 최신 프로젝트 빌드 시스템은 코드가 변경될 때마다 자동으로 트랜스파일러를 실행하는 수단을 제공하므로 개발 프로세스에 통합하기가 매우 쉽습니다.

폴리필

새로운 언어 기능에는 구문 구조와 연산자뿐만 아니라 내장 함수도 포함될 수 있습니다.

예를 들어, Math.trunc(n) 숫자의 소수 부분을 "자르는" 함수입니다. 예를 들어 Math.trunc(1.23) 1 반환합니다.

일부 (매우 오래된) JavaScript 엔진에는 Math.trunc 없으므로 이러한 코드는 실패합니다.

구문 변경이 아닌 새로운 기능에 대해 이야기하고 있으므로 여기서는 아무것도 트랜스파일할 필요가 없습니다. 누락된 함수를 선언하기만 하면 됩니다.

새로운 기능을 업데이트/추가하는 스크립트를 "폴리필"이라고 합니다. 이는 격차를 "메우고" 누락된 구현을 추가합니다.

이 특별한 경우 Math.trunc 에 대한 폴리필은 다음과 같이 이를 구현하는 스크립트입니다.

 if (!Math.trunc) { // 그러한 함수가 없는 경우
  // 구현
  Math.trunc = 함수(숫자) {
    // Math.ceil과 Math.floor는 고대 JavaScript 엔진에도 존재합니다.
    // 이 내용은 튜토리얼의 뒷부분에서 다룹니다.
    반환 번호 < 0? Math.ceil(숫자) : Math.floor(숫자);
  };
}

JavaScript는 매우 역동적인 언어입니다. 스크립트는 내장된 기능을 포함한 모든 기능을 추가/수정할 수 있습니다.

두 가지 흥미로운 폴리필 라이브러리는 다음과 같습니다.

  • 많은 것을 지원하는 core js는 꼭 필요한 기능만 포함할 수 있게 해줍니다.

요약

이 장에서는 JavaScript 엔진에서 아직 잘 지원되지 않더라도 현대적이고 "최첨단" 언어 기능을 연구하도록 동기를 부여하고 싶습니다.

트랜스파일러(최신 구문이나 연산자를 사용하는 경우)와 폴리필(누락될 수 있는 기능을 추가하기 위해)을 사용하는 것을 잊지 마세요. 코드가 작동하는지 확인합니다.

예를 들어 나중에 JavaScript에 익숙해지면 babel-loader 플러그인을 사용하여 webpack 기반의 코드 빌드 시스템을 설정할 수 있습니다.

다양한 기능에 대한 현재 지원 상태를 보여주는 유용한 리소스:

  • https://compat-table.github.io/compat-table/es6/ – 순수 JavaScript용.

  • https://caniuse.com/ – 브라우저 관련 기능용.

PS Google Chrome은 일반적으로 언어 기능이 가장 최신 버전입니다. 튜토리얼 데모가 실패하면 사용해 보세요. 하지만 대부분의 튜토리얼 데모는 모든 최신 브라우저에서 작동합니다.

관련 기사