오늘의 질문
ES6에 대해서 아는 대로 설명해 주세요.
내답변
ES6 는 자바스크립트 국제 표준버전이다. ECMAScript 라고도 불리며 자바스크립트의 버전이라고 보면 될 것 같다.
ES6의 경우 현재까지도 사용되는 최신 자바스크립트 문법이 대거 추가되었는데 let과 const 키워드 , 구조분해 할당, Spread 방식, 화살표 함수 , 템플릿 리터럴등이 추가되었던 버전이다.
특히 기존 자바스크립트의 동작을 아예 바꾸었던 Promise 도 이 버전에서 추가되었다.
브라우저에서는 버전마다 자바스크립트의 버전지원이 달라지는데 매년 자동 업데이트를 하는 일반 유저의 환경이라면 고려할 필요가 없지만 관공서나 공공기관 등 내부적으로만 업데이트를 하는 경우 혹은 서버자체가 폐쇄망이라 오랜 시간 업데이트가 안되어있는 경우 해당 문법을 지원하지 않을 수 있다.
내부적으로 웹팩에서 트랜스파일러등이 구형 문법 방식으로 변경하는 동작을 해주기도 하지만 버전마다 변경된 사항이 이전에는 어떻게 구현되었나를 알지 못하는 경우 왜 동작하지 않는지 알기가 어려울 수 있다.
매일메일 답변
ES6(ECMAScript 2015)는 자바스크립트의 최신 버전으로, 2015년에 공식 발표 되었다. ES6 는 코드의 가독성과 유지보수성을 높이고, 현대 웹 애플리케이션의 요구를 반영하기 위한 여러 기능들을 제공한다.
첫째, let 과 const 키워드가 추가되었다. let은 변수 선언 const 는 상수 선언에 사용된다. 이전 버전에서 사용되던 var 와 달리 let 과 const 는 블록 스코프를 가지므로 코드 안정성이 더 높다. 또한 변수 선언 이전에 접근했을 때 undefined가 할당되지 않고 , ReferenceError 가 발생한다는 점에서도 차이가 있다.
둘째, 화살표 함수가 도입되었다. 기존의 함수 정의 방식보다 간결하고 가독성이 좋아졌다. this의 바운딩을 호출 문맥과 일치시켜 함수 내부의 혼란이 줄었다
셋째, 클래스 문법이 추가되었다. 이를 통해 객체 지향 프로그래밍의 핵심 개념인 생성자, 상속, 메서드 오버라이딩 등을 자바스크립트에서 활용할 수 있게 되었다.
넷째, 템플릿 리터럴이 추가되었다. 문자열 내에 변수를 손쉽게 삽입 가능하여 기존의 문자열 연결 방식보다 가독성과 유연성이 향상되었다
그외에도 구조분해 할당, Spread Operator와 Rest Parameter, Promise 등 중요한 기능들이 ES6를 기점으로 추가되었다.
ES6 이전 버전의 문법은 몰라도 괜찮을까?
ES6 이전 버전의 문법과 특징을 이해하는 것은 여전히 중요하다
첫째, 기존 코드베이스와의 호환성 때문이다. 많은 자바스크립트 프로젝트와 라이브러리들은 ES6 이전 버전 문법을 사용하고 있다. 이러한 코드를 유지 보수하거나 활용하기 위해서는 ES6 이전 문법에 대한 이해가 필요하다.
둘째, 대규모 프로젝트의 경우 ES6 도입을 위해서는 점진적인 마이그레이션이 필요한데, 이 과정에서 ES6 이전 문법과 ES6 문법이 혼재되어 사용될 수 있다. 따라서 이전 버전 문법에 대한 이해가 필요하다
끝으로 ES6 기능을 구형 브라우저에서 사용하려면 폴리필이나 트랜스파일러를 활용해야 하는데, 이때에도 ES6 이전 문법에 대한 기본적인 이해가 필요할 수 있다.
피드백
-
Prosmise 의 경우 동작을 아예 바꾸었다 보다는 비동기 처리 방식의 표준을 제공했다 라고 표현하는게 더 정확하다. 기존에도 콜백 방식은 존재했기 때문
-
모듈 시스템 (import/export) 기존에는 CommonJS, AMD 와 같은 모듈 시스템에서 현대 JS 개발의 토대인 import 와 export 가 추가되었다
-
Babel 이 사실상 표준처럼 쓰여저 구형 브라우저에서도 사용 가능하게 만들어 준것이다.
추가 지식
트랜스파일러란?
한 언어를 같은 수준의 다른 언어로 변환하는 도구이다.
최신 문법으로 작성된 코드를 모든 브라우저에서 동작하도록 변환하는 것. 대표적으로 Babel 이 있다.
// ES6+
const sum = (a, b) => a + b;
// ES5
var sum = function(a, b) {
return a + b;
};
Babel
자바스크립트의 대표적인 트랜스파일러
플러그인/프리셋 시스템을 제공한다.
React JSX, Typescript 코드도 트랜스파일이 가능하다
const App = () => <h1>Hello</h1>;
-> 변환
const App = () => React.createElement("h1", null, "Hello");
Webpack(웹팩)
: 모듈 번들러
여러 개의 자바스크립트, CSS, 이미지 파일 등을 하나의 번들 파일로 묶어주는 도구
브라우저는 원래 JS 모듈 시스템을 지원하지 않았기에 (ES6이전) 수십 수백개의 JS 파일을 묶어주어야 했음
주요 기능
코드 스플리팅(Code Splitting): 필요한 시점에만 로딩
트리 셰이킹(Tree Shaking): 사용하지 않는 코드 제거
로더(Loader): Babel 같은 트랜스파일러 실행 (babel-loader)
플러그인(Plugin): 최적화, 빌드 관리, 환경 변수 삽입
Webpack에서 babel-loader를 설정 → JS 파일을 읽을 때 Babel로 변환 → 번들에 포함
대안
Webpack 은 오래된 만큼 설정이 복잡하여 간단하면서도 빠른 도구들이 추가됌
Vite: ESBuild 기반 초고속 빌드 + dev 서버
Parcel: 설정 거의 없이 바로 번들링
ESBuild: Go 언어 기반의 초고속 트랜스파일러/번들러
