시작하기 위해 개발환경을 만들다 | Javascript & ES6 공부 노트 #1

ES6는 어떤 한 언어 이름의 약자와 버전이 합쳐진 이름입니다. 그리고 ES2015라 불리는 언어 스펙의 다른 이름이기도 합니다. 그리고 ES는 ECMAScript를 줄여서 부르는 이름이지요. 그냥 쉽게 말해서 ECMAScript 2015년 버전이 ES6입니다. 이 언어는 Javascript(자바스크립트)를 보완 혹은 대체하기 위해 나온 언어라고 볼 수 있습니다.

ES는 Javascript와 비슷합니다. 하지만 같지는 않습니다. 하지만 아무리 ECMAScript와 Javascript가 다르다고 이야기해도, ES가 Javascript 토대에서 만들어진 것 같다는 느낌이 너무 강하게 들기 때문에 완전히 다르다고 하기에도 어렵다고 생각됩니다. 다만 이 글 타래는 Javascript와 ES6 모두를 공부하기 위한 목적이라 ES6의 경우 약간의 부연 설명을 추가할 예정입니다.

그런데 왜 하필이면 ES6일까요? ES7도 있고 아니면 ES5도 있는데 말이죠. 이건 제가 처한 현실(?) 때문이라는 점이 가장 큰 이유겠지만, 인기 있는 브라우저에서 가장 활발하게 쓰이는 스펙은 아무래도 ES6 같아서입니다. 그리고 ES7은 아직 좀 이르다고 보이기도 하기 때문입니다. 2015년에 만들어진 ES6 스펙도 아직 완벽하게 보급되진 않았다고 볼 수도 있으니깐요. 심지어 IE는 ES5에서 지원이 끊긴 상태이기도 합니다.

[관련 링크] 브라우저별 ES6 호환성 표

한 언어를 공부하기 위해서 제일 먼저 해야 할 것은 구글링...은 틀린 말은 아니지만, 아무래도 개발환경을 구축하는 것이 가장 우선일 것 같습니다. 그래야 뭐든 시작할 수 있으니까요.

사실 ES6 공부(?) 환경은 ES6를 지원하는 웹 브라우저만 있으면 시작할 수 있습니다. 대표적으로 구글 크롬(Google Chrome)이 있고, 파이어폭스(Firefox)도 있고 사파리(Safari)도 있습니다. 최신 버전은 다들 문제없이 지원된다. 그러니 아무 편집기로 .html 파일이나 .js 파일로 바로 만들어서 로드해서 돌려 볼 수 있지요.

하지만 이 방식은 최종 실행 환경에 가깝다 보니 공부 단계에서는 상당히 귀찮은 편이기도 합니다. 공부하기 위해서는 REPL(Read - Evaluate - Print Loop) 같은 도구가 있으면 편한데 말이죠. REPL은 언어 인터프리터로 실시간으로 코드를 입력해서 실행시켜보고 결과를 볼 수 있고 에러도 바로 확인할 수 있으니 공부하기에 더없이 좋은 환경입니다.

ES6를 지원하는 REPL 중 가장 가까운 물체(?)는 바로 크롬이라고 생각됩니다. 단순히 크롬을 실행시키고 개발자 도구를 띄워서 Console을 열면 거기서 뜨는 프롬프트를 REPL처럼 쓸 수 있으니깐요.

물론 크롬뿐만이 아닙니다. 사파리도 개발자 도구에 콘솔이 있고, 확인해 보지는 않았지만, 파이어폭스에도 분명 명령어 입력을 지원하는 자바스크립트 콘솔이 있을 것으로 추측됩니다.

그 외에 ES6를 지원하는 node.js를 사용해 볼 수도 있습니다. node.js를 설치하고 node를 실행시키면 REPL 인터프리터가 뜹니다. (주의: 글쓴이는 윈도우 환경에서 어떤지 잘 모릅니다)

인기 있는 에디터인 VSCode에도 REPL과 비슷한 기능이 있을까요? Electron으로 만들어진 크로미움 기반의 에디터인데 당연히 ES6 코드도 아무 문제 없이 실행할 수 있어야 정상 같은데 예상외로 이와 관련된 것을 찾지 못하였습니다. 의외로 ES나 Javascript에서는 REPL이 그다지 쓰이지 않는 걸지도 모르겠습니다.

 

약간 특별하게, 저에게는 좀 더 친숙한 도구가 있습니다. 바로 Emacs 입니다. 사실은 Spacemacs라는 커뮤니티 드리븐 설정[...]을 이용하긴 하지만 어쨌든 Emacs를 제법 오랫동안 사용해왔습니다. 이 녀석 안에서 코딩하고 실행시켜보고 결과를 볼 수 있다면 더없이 편할 것 같습니다. 다행히도 관련 도구는 이미 존재하고 잘 설정되어 있으므로 쉽게 구축할 수 있었습니다.

아래 영상을 통해 Spacemacs에서 Skewer Mode를 이용한 Javascript 혹은 ES6 라이브 코딩의 예를 볼 수 있습니다.

https://www.youtube.com/watch?v=tYkydjQ4pTE

여기저기 다양한 도구들을 주워 담아 Elisp(Emacs Lisp)으로 잘 버무린 Emacs 확장을 쓰는 만큼 좀 번잡하게 느껴질 수도 있습니다. 하지만 익숙한 편집기에서 쓸 수 있다는 것은 정말 큰 장점이 아닐까 생각됩니다.

이외에도 다양한 도구나 IDE가 있을 것 같지만 제가 아는 것들은 이 정도겠네요.

어쨌거나 이걸로 공부를 위한 개발환경은 구축되었습니다. 다음부터는 실제로 시작해봅시다.

이 글은 콘솔에 뭔가를 찍어보자 | Javascript & ES6 공부 노트 #2 글로 이어집니다.