[비개발자의 앱 개발 수난기 #4] ES6 알아보기 - Babel 소개, String literal

ES6 알아보기 전에 자바스크립트의 역사와 ECMAScript, DOM, BOM의 개념을 살펴보녀, 그 중 ES6와 템플릿 리터럴(String literal)에 대해 자세히 다루고 있습니다. 또한, Babel을 통한 ES6 코드의 호환성과 컴파일 과정을 설명합니다.

ES6 알아보기: 자바스크립트 (JavaScript)

ES6를 알아보기 전에 우선 자바스크립트를 먼저 얘기해보겠습니다. 자바스트립트는 1995년 넷스케이프(Netscape) 웹 브라우저에서 웹페이지에 동적인 요소를 구현하기 위해 발명되었습니다. 그 후 많은 다른 웹 브라우저들도 이 언어를 탑재하기 시작하면서 현대의 웹 어플리케이션을 구현할 수 있는 언어가 되었습니다. 자바스크립트는 ECMAScript + BOM(Browser Object Model) + DOM(Document Object Model) 이라는 1개의 코어와 2개의 모델로 이루어져 있습니다. 잠깐, 근데 여기서 DOM과 BOM이란 무엇일까요?

ES6 알아보기: DOM (Document Object Model)

DOM이란 The Document Object Model(문서 객체 모델)의 약자로 HTML, XML 문서의 프로그래밍 인터페이스입니다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있습니다. 간단히 말해 DOM은 자바스크립트와 같은 스크립팅 언어를 통해 HTML 요소를 제어할 수 있는 방법을 제공합니다. 객체 모델을 통해 JavaScript는 다음과 같은 동적 HTML을 만드는 데 필요한 모든 기능을 제공합니다.

JavaScript는 페이지의 모든 HTML 요소를 변경할 수 있습니다.
JavaScript는 페이지의 모든 HTML 속성을 변경할 수 있습니다.
JavaScript는 페이지의 모든 CSS 스타일을 변경할 수 있습니다.
JavaScript는 기존 HTML 요소 및 속성을 제거 할 수 있습니다.
JavaScript는 새로운 HTML 요소 및 속성을 추가 할 수 있습니다.
JavaScript는 페이지의 모든 기존 HTML 이벤트에 반응 할 수 있습니다.
JavaScript는 페이지에서 새로운 HTML 이벤트를 만들 수 있습니다.

ES6 알아보기: BOM (Browser Object Model)

BOM이란 Browser Object Model(브라우저 객체 모델)의 약자로 웹 프로그래머가 웹 브라우저의 기능 요소들을 직접 관리/제어할 수 있도록 특별한 객체들을 미리 구조화시켜 모아놓은 것입니다. 즉, BOM의 역할은 웹 브라우저의 버튼, URL 주소 입력 창, 타이틀 바 등 웹 브라우저 윈도우 및 웹페이지의 일부분을 제어할 수 있게 하는 것입니다. window 객체를 통해 접근이 가능합니다. 아래는 대표적인 BOM 객체입니다.

window: 최상위 객체로 브라우저 창 객체
screen: 사용자 환경의 디스플레이 정보 객체
location: 현재 페이지의 url을 다루는 객체
navigator: 웹브라우저 및 브라우저 환경 정보 객체
history: 현재의 브라우저가 접근했던 URL history

ES6 알아보기: ES6

자바스크립트(Javascript)가 넷스케이프(Netscape) 브라우저만이 아니라 다른 웹 브라우저들의 지원까지 받기 시작하면서 다양한 웹 브라우저에서 자바스크립트(Javascript)가 공통적으로 작동하기 위해 표준 규격이 필요해졌습니다. 이를 위해 만들어진 것이 ECMAScript입니다. ES6는 ECMAScript 6을 줄여서 표현한 것으로 ECMAScript의 6번째 버전입니다. ES6는 자바스크립트를 조금 더 편리하고 프로그래밍 언어 답게 작성할 수 있도록 새로운 문법을 도입했습니다. ES11 버전까지 출시되었지만 왜 ES6가 가장 많이 언급되는 걸까요? 그 이유는 ES6에서 추가된 문법들이 기존의 문제들을 깔끔하게 해결하고 가독성 및 유지 보수성을 강화하는 문법도 많이 추가되었기 때문입니다. 그러나 ES6 문법으로 작성한 자바스크립트는 오래된 브라우저와 호환성이 좋지 않기 때문에 반드시 ES5 문법으로 변환 과정을 거쳐야 합니다. 이때 ES6 문법을 ES5 문법으로 자동 변환해주는 도구가 Babel입니다.

ES6 알아보기: Babel

최신 자바스크립트 문법을 모든 브라우저가 이해하지 못하기 때문에 Babel이 브라우저가 이해할 수 있는 문법으로 변환해줍니다. 즉 ES6 문법으로 개발했지만, 바벨을 사용할 경우 ES5문법만 지원하는 브라우저에 알맞게 ES6문법을 ES5 문법으로 번역해줍니다. 초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 일만 했지만, 현재는 리액트의 JSX 문법, 타입스크립트, 코드 압축, Proposal 까지 처리해줍니다.

What is Babel? · Babel

Babel is a JavaScript compiler

ES6 알아보기: Babel 문법 기초

실습을 하기 위해 우선 https://es6console.com/ 사이트를 방문합니다. es6console.com은 브라우저에서 ES6 코드를 테스트 해보기 위한 open-source JavaScript 콘솔입니다.

변수 선언

ES6를 사용하기 이전에는 변수를 선언하기 위한 방법으로 var를 항상 사용했습니다. ES6에서는 var 대신에 let과 const를 사용합니다. 이에 대한 자세한 설명은 추후 강의에서 살펴봅니다.

템플릿 리터럴

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입했습니다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 ` 를 사용합니다.

템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공합니다. 이를 문자열 인터폴레이션(String Interpolation)이라 합니다. 문자열 인터폴레이션은 ${ … }으로 표현식을 감쌉니다. 문자열 인터폴레이션 내의 표현식은 문자열로 강제 타입 변환됩니다. 즉, 아래 첨부한 예시와 같이 love 라는 문자열을 표시하기 위해 예전에는 따옴표 안에 white-space와 love 라는 문자를 입력했다면, ES6 이후에는 따옴표 안에 입력하지 않아도 표현식 그대로 강제 변환되는 것을 볼 수 있습니다.