- Published on
JS 단원 07: 브라우저 호환성과 ES6 이후 변화
1. ECMAScript란?
- 자바스크립트의 공식 명세 이름
- ES5, ES6(ES2015), ES2023 등 해마다 업그레이드됨
// ES6 이전
var name = "Tom";
// ES6 이후
let name = "Tom";
const age = 30;
2. ES6 이후 주요 문법 변화
| 항목 | ES5 이전 | ES6 이후 |
|---|---|---|
| 변수 선언 | var | let, const |
| 함수 | function 키워드 | 화살표 함수 |
| 문자열 | 연결 연산자(+) | 템플릿 리터럴 |
| 클래스 | 함수 기반 프로토타입 | class 문법 |
| 모듈 | IIFE, 글로벌 | import/export |
| 비동기 | 콜백 | Promise, async/await |
| 컬렉션 | 배열, 객체 | Map, Set, WeakMap |
| 반복문 | for | for...of, forEach |
3. 브라우저 호환성 이슈
3-1. 모던 브라우저
- Chrome, Firefox, Safari, Edge 등 최신 버전은 대부분 ES6 완전 지원
- 자동 업데이트로 대부분 최신 문법 사용 가능
3-2. 구형 브라우저 (IE 11 이하)
let,const, 화살표 함수 등 지원 안 됨- 호환을 위해 트랜스파일러와 폴리필 필요
4. Babel의 역할
- 최신 JS → 하위 호환 가능한 코드로 변환
- 예: 화살표 함수 → function 표현식
// 원본
const add = (a, b) => a + b;
// 변환 후
var add = function(a, b) {
return a + b;
};
5. Polyfill이란?
- 브라우저가 지원하지 않는 기능을 코드로 모방
- 예: Promise, fetch, Array.prototype.includes 등
npm install core-js
import "core-js/stable";
import "regenerator-runtime/runtime";
6. 최신 브라우저 기능 확인 사이트
- https://caniuse.com/
- 특정 문법이나 API가 어떤 브라우저에서 지원되는지 확인 가능
7. ES6 이후 개발 환경
- 대부분의 프로젝트는 Webpack + Babel + ESLint 조합
- 개발은 최신 문법으로, 배포는 브라우저 호환 코드로 처리
8. 실제 프로젝트에서의 적용 흐름
- 개발자는 ES2022 수준으로 작성
- Babel로 ES5 이하로 변환
- 필요 시 polyfill 포함
- 번들링 → 배포
npx babel src --out-dir dist --presets=@babel/preset-env
요약
- ES6 이후 자바스크립트는 간결하고 선언적인 문법으로 진화
- 구형 브라우저 대응을 위해 Babel과 Polyfill이 필요
- caniuse로 지원 현황 확인 가능
- 개발은 최신 JS, 배포는 호환 JS가 현대 표준
심화학습
Q1. 트랜스파일과 폴리필의 차이점은 무엇인가요?
A1. 트랜스파일은 문법 수준의 변환이고, 폴리필은 기능 자체를 구현하는 코드입니다.
Q2. 어떤 상황에서 Babel이 필수일까요?
A2. ES6 이상의 문법을 사용하는데 구형 브라우저도 지원해야 하는 경우 Babel은 반드시 필요합니다.
Q3. 모든 프로젝트에서 최신 문법을 바로 사용해도 안전한가요?
A3. 최신 문법은 대부분 안전하지만, 배포 대상이 어떤 브라우저를 사용하는지에 따라 Babel 설정을 조정해야 합니다.