제1편. ES6 이해와 브라우저 호환 전략

제1편. ES6 이해와 브라우저 호환 전략

자바스크립트는 지속적으로 진화하고 있습니다. ES6(ECMAScript 2015)는 현대 자바스크립트 개발의 기본이 되었지만, 여전히 구형 브라우저를 고려해야 할 상황도 많습니다. 이 글에서는 ES6 도입의 이유, 핵심 문법 차이, 그리고 호환성 대응 전략을 다룹니다.

1-1. 왜 ES6를 써야 하는가?

• 가독성 향상: let, const, 화살표 함수 등으로 코드가 간결하고 명확해집니다.
• 생산성 증가: 디스트럭처링, 템플릿 리터럴, 모듈 시스템 등은 더 나은 구조화를 돕습니다.
• 최신 프레임워크 호환: React, Vue 등 대부분의 프레임워크는 ES6 이상을 기본 전제로 합니다.

1-2. ES5 vs ES6 핵심 문법 비교

1-3. 주요 문법별 브라우저 지원 여부

Can I use 사이트를 활용하면 문법별 브라우저 호환성 정보를 시각적으로 확인할 수 있습니다.

1-4. 구형 브라우저 대응이 필요한 현실

• 기업 환경에서는 여전히 IE11을 사용하는 시스템이 존재합니다.
• 정부기관, 교육기관은 구형 브라우저를 강제하는 경우가 많습니다.
• Babel 등의 트랜스파일러를 활용하면 ES6 코드를 ES5로 변환하여 IE에서도 동작하게 만들 수 있습니다.
• core-js, polyfill 등을 함께 사용하면 Promise, Array.prototype.includes 같은 기능도 하위 호환이 가능합니다.

1-5. 개발자가 놓치기 쉬운 ES6 사용 팁

• const는 객체의 불변성을 보장하지 않는다.
  const obj = { a: 1 } 이후 obj.a = 2는 가능하다. 불변 객체로 만들고 싶다면 Object.freeze() 같은 기능을 병행해야 한다.

• 템플릿 리터럴은 다중 줄 문자열도 지원한다.

  // 줄바꿈 포함
  const a = `Line1
  Line2`;
  
  // 공백 + 줄바꿈 포함
  const b = `Line1  
    Line2`;
    형태로도 가능하다.
  

• 디스트럭처링은 함수 매개변수와 함께 사용하면 매우 유용하다.

  function greet({ name }) {
    console.log(`Hello ${name}`);
  }
  

요약

• ES6는 코드 가독성과 생산성을 향상시키는 최신 문법입니다.
• 주요 문법 중 일부는 IE11 등 구형 브라우저에서 지원되지 않습니다.
• Babel을 활용하면 ES6 코드를 구형 환경에서도 사용할 수 있습니다.
• 실제 사용 시 문법적 세부 사항까지 이해해야 예기치 못한 오류를 줄일 수 있습니다.

심화학습

Q1. 왜 var보다 let, const를 사용하는 것이 더 안전할까?
var는 함수 스코프(function scope)를 가지며, 같은 이름으로 중복 선언 가능하고 호이스팅 문제가 발생할 수 있습니다. 반면 let과 const는 블록 스코프(block scope)를 가지며, 변수 재선언을 방지하고 예측 가능한 코드 흐름을 만듭니다. 특히 const는 재할당을 막아 불변성 유지에 유리합니다.

Q2. Babel은 실제로 어떤 방식으로 ES6 코드를 변환하는가?
Babel은 파싱 → 트랜스파일링 → 출력의 3단계로 작동합니다. ES6 코드를 AST(Abstract Syntax Tree)로 파싱한 뒤, 플러그인을 통해 ES5 문법으로 변환하며, 마지막으로 ES5 코드 문자열로 출력합니다. 플러그인 예: @babel/preset-env는 환경에 맞는 변환만 적용합니다.

Q3. 기업 환경에서 ES6를 도입하려면 어떤 점들을 검토해야 할까?
브라우저 지원 정책: 사내에서 사용하는 브라우저 현황 조사
빌드 환경 준비: Babel과 Webpack을 통한 트랜스파일 및 번들링
테스트 체계: 구형 브라우저에서 주요 기능 동작 테스트
폴리필 전략: 필요한 경우 core-js, regenerator-runtime 등의 도입