1. Introduction

: 도입

개발자가 사용하는 새로운 Javascript 구문과 웹 브라우저가 인식하는 Javascript 구문 간의 차이를 해결하는 방법을 중점으로 배울 것이다.

ES6 라고 하는 새로운 버전의 자바스크립트가 출시되고서, 웹 개발자들에게 큰 관심을 받게 되었다.

가독성과 효율성이 향상되어 새로운 ES6 구문들을 빠르게 채택하게 되었다.

하지만. 대부분의 브라우저에서 ES6 를 지원하지 않기 때문에, 개발자는 브라우저 호환성 문제를 다뤄야하게 되었다.

여기에서는 브라우저 호환성 문제를 해결하기 위한, 두 가지 방법으로

• caniuse.com → HTML, CSS, Javascript 에 대한 웹 브라우저 호환성 데이터를 제공하는 웹 사이트.
• Babel → 지원되지 않는 새로운 Javascript(ES6) 를 최신 브라우저(ES5)로 변환하는 데 사용할 수 있는 Javascript 의 라이브러리이다.

var pasta = "Spaghetti"; // ES5 syntax

const meat = "Pancetta"; // ES6 syntax

let sauce = "Eggs and cheese"; // ES6 syntax

// Template literals, like the one below, were introduced in ES6
const carbonara = `You can make carbonara with ${pasta}, ${meat}, and a sauce made with ${sauce}.`;

var 는 ES5 에서 사용했었던 구문이고, const 와 let 은 ES6에서 사용하는 구문이다.

이를 같이 적고, ${ } 를 통해서 사용한다면, 오류가 발생한다.

이러한 문제를 어떻게 해결할 수 있을까?

2. caniuse.com (1)