바닐라 자바스크립트(Vanilla Javascript) 란?

바닐라 자바스크립트 혹은 vanilla.js는 한 마디로 말하면 자바스크립트(Javascript) 언어 자체를 말한다. 아니, 자바스크립트를 자바스크립트라고 부르지 왜 굳이 바닐라 자바스크립트라고 부를까? 이를 위해서는 자바스크립트 발전 역사를 알아야 한다.

라이브러리 전성시대

마이크로소프트의 Internet Explorer(이하 IE)가 Netscape와의 브라우저 전쟁에서 완승한 후 한때 90%가 넘는 점유율을 보일때가 있었으나 2004년 모질라 재단의 Firefox, 2008년 구글 Chrome이 각각 출시되면서 웹 브라우저 시장은 그야말로 혼돈의 도가니가 되었다. 여기서부터 웹개발자들의 고민이 시작되었다. Firefox와 Chrome과는 달리 IE는 웹 표준을 잘 지키지 않았기 때문에 브라우저간 호환성이 큰 문제가 되었다. 똑같은 자바스크립트나 CSS라도 브라우저마다 다르게 동작했고, 이는 곧 개발 비용의 상승으로 이어졌다. 이를 해결해주는 도구가 바로 jQuery 였다.

jQuery는 2006년 첫 출시 이래 근 10년간 큰 인기를 얻어왔다. 이 시기는 jQuery를 필두로 Dojo, Ext JS, MooTools 등등의 라이브러리가 득세를 한 시기였다. 웹 개발자들에게 이런 라이브러리들이 인기를 끈 이유는 크게 두 가지로 요약된다.

첫 번째, 앞서 말한 브라우져 호환성 문제 두 번째, jQuery를 사용하면 DOM 조작이나 CSS, 애니메이션을 굉장히 쉽게 사용할 수 있었다. 자바스크립트도 그렇게 어려운 편은 아니지만 사용성 측면에서는 사실 jQuery에 비할바가 아니었다.

문제

이렇게 라이브러리가 득세할 동안은 상당수 웹 개발자들이 자바스크립트 자체보다 jQuery, Dojo 같은 특정 라이브러리를 더 잘 알고있는 경우가 많았다. 다들 파스타 전문가라고는 하지만 실상을 보면 면을 삶을지도, 소스를 만들지도 모르면서 밀키트를 가져다가 데워먹는것과 같디고 할까.

또한 이러한 라이브러리들을 사용하면 몇 가지 문제가 있다. 첫 번째는, 심각한 성능 저하다.

자바스크립트 성능 비교

두 번째는, 라이브러리는 꽤 무겁다. jQuery를 예로 들자면, npm에서 확인해보면 3.6.0기준으로 1.32MB나 한다.

ES6(ES2015)의 등장과 SPA의 득세, 그리고

자바스크립트의 3번째 표준안인 ES6(ES2015)에는 모듈, 스코프, Promise 도입 등 굉장히 발전한 모습으로 돌아왔다. 언어 기능 자체도 좋아진데다가 앞서 말한 라이브러리의 많은 기능이 언어 자체에 추가되었다.

언어도 좋아졌지만 리액트를 비롯한 SPA가 득세를 하면서 자바스크립트 언어 자체의 중요성이 커지고 jQuery등의 라이브러리를 사용할 일이 더 줄어들었다.