ES6 이상의 버전을 브라우저에서 인식하지 못한다면 어떻게 해결해야 할까?
babel은 컴파일러 인가 ? 트랜스파일러인가
브라우저 호환성 이슈가 발생했을 때, 이를 런타임 환경에 맞게 최적화 하는 과정을 크로스 브라우징 이라고 하는데
자바스크립트의 호환성 문제를 해결하기 위해서는 Babel 이라는 도구를 사용한다.
babel은 다른 언어로 변환하는것이 아닌
브라우저의 스펙과 호환성에 맞는 자바스크립트로 변환한다는 관점에서 트랜스파일러이다.
( 단어 뜻을 몰라서 찾아보니 대충 컴파일러 = 언어를 변환, 트랜스파일러 = 문법을 변환)
바벨의 빌드 과정은 파싱, 변환, 출력의 단계를 거치며
- 파싱: 코드를 읽고, 추상 구문 트리(AST)로 변환하는 단계
- 변환: 추상 구문 트리(AST)를 변경
- 출력: 변경된 결과물을 출력
(추상구문트리라는 단어를 몰라서 찾아보니 "추상 구문 트리는 추상 구문을 정의하고 규칙을 나타내는 XML 오브젝트의 구조를 지정하는 XML 스키마의 인스턴스입니다" 라고 나온다... 봐도 모르겠다..ㅠ
일단 추상구문트리라는 형태로 변환해서 그 상태로 하위버젼에 맞게 변경한다는 흐름으로 이해하고 넘어가자면)
위의 단계를 통해 자바스크립트의 호환성 문제를 해결한다.
ES6에 추가된 것은 무엇인가?
일단 따로 정리도 했었지만
var, let, const 차이점
일단 첫번째 추가점으로는 기존의 var의 문제점을 해결하기 위해 let과 const가 생겼다.
그리고 import와 export용법도 ES6에 넘어오면서 생겼고,
알고리즘 스킬트리, 알고리즘 오픈채팅방 에도 사용한 new Map과 Set도 ES6에 넘어오면서 생겼다.
그리고 정말 많이 쓰는 화살표 함수와 배열모양의 state를 다룰때 사용했던 구조분해할당도 있다.
공식적으로는
ES6 / ES2015
Standard Modules — import and export --- ( import export )
Standardised Promises
Classes & Inheritance
Block-scoped variables — let and const --- ( let const )
Template Literals
Object destructing into variables --- ( 구조분해할당 )
Generator functions
Map and Set data structures --- (Map Set)
Internationalisation for Strings, Numbers and Dates via Intl API
Arrow Function --- (화살표함수)
이렇게 있고 표시 안한 부분은 내가 모르거나 사용하지 않은 부분..
