모던 JavaScript 웹개발을 위한 ES2015


ECMAScript 6

자바스크립트는 ECMA 라는 조직 산하의 TC-39 위원회라는 곳에서 표준화 작업을 하고 있습니다. 자바스크립트 관련 표준화 문서는 ECMA-262라는 문서로 공개되고 있고, 그러면서 ECMAScript라는 명칭도 사용하게 되었습니다. 최근의 자바스크립트 표준을 ES6 등으로 부르는 이유도 이 때문입니다.

ECMAScript 6는 2015년에 표준화 작업이 마무리되었고, 매년 ECMAScript의 사양이 개정될 예정이므로 혼선을 피하기 위해 ECMAScript 2015라는 명칭으로 불리게 되었습니다.

ES6는 한동안 커다란 변경이 없던 기존의 자바스크립트(ES5) 이후 가장 커다란 변화였고, 결국 ES6가 기존 자바스크립트에 비해 변경된 부분을 이해하고 사용하는 것이 현대의 자바스크립트 프로그래밍에 중요한 요소가 되었습니다.

현재 크롬, 파이어폭스와 같은 에버그린 웹 브라우저 및 Node.js와 같은 자바스크립트 실행환경에서 이 새로운 자바스크립트의 사양을 구현하고 있고, 상당부분 구현이 진행되었습니다.

Evergreen Web Browser

Chrome, Firefox와 같은 웹 브라우저는 항상 최신의 브라우저 버전을 유지하기 위해 자동 업데이트 기능을 충분히 활용하고 있습니다. 사용자가 웹 브라우저의 설정을 따로 변경하지 않는 이상, 새로운 웹브라우저 버전이 있을 경우 웹 브라우저를 사용하는 동안 자동으로 업데이트 되며, 사용자가 특별히 관심을 가지지 않는 한 업데이트 여부를 눈치채기 쉽지 않습니다.

이러한 방식으로 업데이트를 진행하는 웹브라우저를 에버그린 웹 브라우저라고 부르며, 이러한 방식을 사용하는 이유는 인터넷 익스프롤러에서 발생했던 심각한 보안 이슈와 파편화를 생각해보면 알 수 있습니다.

자바스크립트 트랜스파일러

하지만 우리는 당장 ES2015 사양의 자바스크립트만으로 웹 프론트엔드 개발을 진행할 수는 없습니다. 위에 잠깐 언급한 것과 같이 여전히 인터넷 익스프롤러의 점유율이 무시할 수 없는 수준이며, 각 웹 브라우저 마다의 구현율 역시 차이가 있습니다. 그래서 현재는 최신 ES6+ 를 사용해 개발을 진행한 뒤 ES6+ 자바스크립트의 코드를 오래된 웹 브라우저에서도 동작하는 자바스크립트의 코드로 변경해주는 JavaScript Transcompiler 라는 것을 사용하게 됩니다.

가장 폭넓게 사용되는 JS Transcompiler는 Babel 이며, Babel의 사용법은 ES6의 문법을 확인해 본 후 알아보겠습니다. 그전에 ES6 문법의 실습을 위해서는 Node.js 의 최신 버전을 사용하는 것을 추천하며, Babel의 웹사이트에 구현된 REPL 환경에서 테스트 해 볼 수도 있습니다. http://babeljs.io/repl

이 과정을 이해하기 위해서는 자바스크립트에 대한 이해가 필수적이며, 기본적인 자바스크립트의 문법은 설명하지 않습니다. 자바스크립트에 대한 소개는 아래 강의를 참고해 주세요.

웹개발을 위한 JavaScript 기본문법