JavaScript의 Polyfill 및 Transpiler.

코드가 한 브라우저에서 실행되고 다른 브라우저에서는 실패하는 상황에 처한 적이 있습니까?

그리고 당신은 도대체 무슨 일이 일어나고 있는지 궁금해 할 것입니다??



코드를 철저히, 반복해서 확인한 후에도 100% 정확하다는 것을 알게 됩니다.

그렇다면 실제 문제는 어디에 있습니까?



JavaScript의 이상한 동작을 이해해 봅시다.

우리 모두 알다시피 JavaScript는 시간이 지남에 따라 계속 진화하고 있습니다. 브라우저도 시간에 따라 업데이트해야 합니다.

브라우저를 업데이트하지 않으면 이전 버전의 브라우저에서 최신 JavaScript 코드가 실패합니다.

기본적으로 그것은 당신의 잘못이 아니라 브라우저의 잘못입니다.

프로 팁: 브라우저를 업데이트하는 것을 잊지 마세요.

하지만 기다려...

우리는 사용자에게 나쁜 사용자 경험을 제공하고 싶지 않습니다.

이 문제를 해결할 수 있는 방법이 없을까요..?

그리고 대답은 ...

예! 우리는 마술사입니다.

이를 위해 새로운 마법 진언을 배워야 합니다.

그리고 그것들은:

Polyfill의 만트라

Transpiler의 만트라

폴리필의 만트라

polyfill은 기본적으로 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는 데 사용되는 코드 조각입니다.

예:

let str = 'hello world';

console.log(str.includes('hello')); // true
console.log(str.includes('bye')); //false

Chrome, firebox, safari 등의 업데이트된 버전에서 위의 코드를 실행하면 정상적으로 작동합니다.

그러나 Internet Explorer 11에서 실행하면 아래와 같은 오류가 발생합니다.



이전 엔진에서 코드를 실행하려면 포함 기능을 위한 폴리필을 작성해야 합니다.

// Checking if includes method exist or not
if (!String.prototype.includes) {
    // polyfill method
    String.prototype.includes = function (searchString) {
    let isFound = false;

    // here <this> refers to the string it self
    if (this.indexOf(searchString) !== -1) {
      isFound = true;
    }
    return isFound;
  }
} 

// Now it will work in IE 11 too.

let str = 'hello world';

console.log(str.includes('hello')); // true
console.log(str.includes('bye')); //false

트랜스파일러의 만트라

트랜스파일러는 하나의 소스 코드를 다른 소스 코드로 변환하는 소프트웨어입니다. 오래된 엔진에서도 작동하도록 최신 코드를 구문 분석하고 해당 언어의 이전 구문을 사용하여 다시 작성할 수 있습니다.



Babel 가장 많이 사용되는 변환기 중 하나입니다.

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

팁: 이 두 가지 만트라를 기억하면 코드가 실패하지 않습니다.




이 블로그가 도움이 되었는지 알려주세요.

더 많은 블로그 게시물을 보려면 나를 따르십시오.

||