이젠 Modern JavaScript로 publish 하자

Modern Browser

 흔히 Chrome, Safari, Edge, Firefox 같은 최신(modern) 웹 브라우저를 말한다. 특히 앞에서 언급한 4개의 브라우저의 경우 브라우저 시장의 90% 이상을 차지하며, 동일한 렌더링 엔진에 의존하는 다른 브라우저 5%를 추가하면, 전 세계 웹 트래픽의 95%가 위 브라우저이나, 위 브라우저 기반이라고 할 수 있다.

 

Modern JavaScript

 모던 자바스크립트란, 특정 ECMAScript 사양 버전으로 작성된 자바스크립트 코드를 의미하지 않으며, 최신 브라우저가 모두 지원하는 구문을 말한다. 아래의 기능은 구글에서 말하는 10년 동안 가장 널리 사용된 자바스크립트의 기능이다.

• Classes (ES2015)
• Arrow functions (ES2015)
• Generators (ES2015)
• Block scoping (ES2015)
• Destructuring (ES2015)
• Rest and spread parameters (ES2015)
• Object shorthand (ES2015)
• Async/await (ES2017)

 최신 버전의 언어 사양 기능은 최신 브라우저에서 일관되지 않는 지원을 제공한다(ES2020, ES2021 등). 따라서 이러한 기능에 직접 의존하는 것은 안전하지 않다. 즉 모던 자바스크립트란 계속 변하는 개념이지만, 현재 시점(2021년 5월)에선 ES2017이 일반적으로 사용되는 최신 구문 기능을 대부분 포함하면서도 광범위한 브라우저 호환성을 제공한다. 다시 말해ES2017이 오늘날 모던 자바스크립트에 가장 가깝다고 할 수 있다.

 

Legacy JavaScript

 레거시 자바스크립트란, 위의 모든 언어 기능을 사용하지 않는 코드를 말한다. 이런 레거시 자바스크립트가 "왜 나왔을까? 언제 쓰일까?"라고 생각해 본다면 떠오르는 게 있는가?

 

 대부분의 개발자들이 위의 기능들을 사용하며 소스 코드를 작성한다. 하지만, 자세히 보면 브라우저 지원 향상을 위해 모든 것을 레거시 구문으로 컴파일 한다. 물론 결과는 맞긴하다. 레거시 구문으로 컴파일하면 브라우저 지원이 증가하지만, 다시 생각해 본다면 효과는 생각보다 작다. 브라우저 지원이 약 95%에서 98%로 증가하지만, 상당한 비용이 발생한다.

용량 증가

• 레거시 자바스크립트는 일반적으로 동등한 모던 자바스크립 코드보다 약 20% 더 크고 느리다.
• 설치된 라이브러리는 일반적인 프로덕션 자바스크립트 코드의 90%를 차지한다. 라이브러리 코드는 모던 자바스크립트 코드를 통해서 피할 수 있었던 폴리필(polyfill) 및 helper 중복으로 인해 훨씬 더 높은 레거시 자바스크립트 오버헤드를 발생시킨다.

원래 비동기 함수는 62개의 문으로 컴파일 되지만, 트랜스 파일된 출력은 1100개 이상으로 컴파일된다.

결론

 ES2017이 모던 자바스크립에 가까우며, npm, babel, webpack, rollup 과 같은 도구를 통해 빌드 시스템을 구성하고 구문을 사용해서 패키지를 작성하자.

 

출처 및 도구 설정 방법‌

- web.dev

- 깃북으로 보기