더북(TheBook)

하지만 어떤 때는 새로운 기능을 지원하지 않는 환경에서 사용하고 싶을 것이다. 예를 들어, 대부분의 자바스크립트 개발은 여전히 웹 브라우저를 대상으로 하며, 브라우저마다 자바스크립트 엔진에 새로운 기능을 적용하는 시점은 다르다(인터넷 익스플로러는 이 책에서 논의된 새로운 기능을 지원하지 않지만16 정부나 대기업 인트라넷 대상으로는 큰 전역 시장 점유율을 차지하고 있다).

이것은 ES5가 출시되었을 때 문제가 되었다. 당시 출시된 자바스크립트 엔진에는 거의 구현되지 않았기 때문이다. 그러나 대부분의 ES5는 구문이 크게 변경된 것이 아니라 새로운 표준 라이브러리 기능이어서 es5-shim.js17, core-js18, es-shims19 또는 비슷한 다양한 프로젝트를 사용하여 “폴리필”(누락된 객체/함수를 제공하는 추가 스크립트를 포함하여 해결)할 수 있었다. 2010년부터 2015년까지 ES2015를 개발하는 동안 해당 구문을 잘 개발하려면 새로운 구문에 대한 실제 경험이 필요하다는 것이 분명했지만 자바스크립트 구현에는 아직 새로운 구문이 없었다.

도구 만드는 사람들이 세상을 구하리라! 그들은 트레이서(Traceur)20나 바벨21(이전의 6to5) 같은 도구를 만들었다. 이 도구는 새 구문을 입력으로 사용하여 소스 코드를 가져와서 이전 구문을 사용하도록 변환하고 이전 스타일 코드를 출력한다(선택적으로 폴리필과 기타 런타임 지원 기능과 함께). 마찬가지로 타입스크립트(TypeScript)22는 사양이 완성되기 훨씬 전에 ES2015가 될 주요 부분을 지원했다. 이러한 도구를 사용하면 새로운 스타일의 코드를 작성할 수 있지만 이전 환경에 전달하기 전에 이전 스타일의 코드로 변환할 수 있다. 이 변환 프로세스를 “컴파일” 또는 “트랜스파일(transpile)”이라고 한다. 처음에는 ES2015에 계획 중인 자바스크립트 개선 사항에 대한 피드백에 유용했지만, ES2015가 나왔을 때도 새로운 기능이 없는 환경에서 실행할 계획이라면 새로운 스타일의 코드를 작성하는 데 유용한 방법이다.

이 글을 쓰는 시점에서 트레이서는 조용해졌지만 바벨은 전 세계의 여러 자바스크립트 개발자들이 사용하고 있다. 바벨에는 진행 중인 거의 모든 기능에 대한 변환이 있다. 심지어 앞으로 변화가 많을 1단계에 대한 변환도 있다(따라서 위험을 감수하고 사용하자. 3단계 이후는 사용하기에 상당히 안전하다). 사용하려는 변환 플러그인을 선택하고 해당 기능을 사용하여 코드를 작성하면 바벨이 해당 기능이 없는 환경에서 사용할 수 있는 코드를 생성한다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.