바닐라.js(vanilla.js)가 모예요?

가끔 웹 관련 세미나를 가서 강의를 듣다 보면 가끔 듣는 말이 있다. 프레임워크를 써야 할까? 라이브러리를 써야 할까? 아니면 바닐라.js를 써야 할까? 프레임워크와 라이브러리의 차이는 다음에 다뤄 보자~ 간단히 정의하면 바닐라.js는 순수 자바스크립트를 말한다. 순수 자바스크립트는 말 그대로 요즘 프레임워크로 많이 쓰이는 AngularJS,ReAct,Vue.js나 DOM를 컨트롤 하기 위한 라이브러리로 많이 쓰이는 jQuery를 사용하지 않고 순수한 자바스크립트(엄밀히 말하면 ECMAScript)를 이용해서 코드를 작성하는 방법을 말한다. 고로 순수하게 자바스크립트를 사용해서 코드를 작성하려면 ECMAScript의 기본과 DOM(Document Object Model)과 BOM(Browser Object Model)의 구성요소에 대해서 잘 알고 있어야 한다.

그럼 간단히 jQuery를 이용해 DOM을 접근하는 방법과 바닐라.js를 이용해 DOM을 접근하는 방법을 예제로 알아보자. 아래 소스는 http://vanilla-js.com 에서 참고

vanilla.js
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script>$('#thing').fadeOut();</script>

내가 말하고 싶은 건 처음 웹 프런트엔드나 백엔드 개발자로 시작을 해 자바스크립트를 이용해서 무언가를 만든다고 할 때 프레임워크와 라이브러리를 잘 가져다 사용하는 것도 중요하지만 자바스크립트의 기본은 웹브라우저 즉 사용자 프런트단에서 돌아가는 스크립트(물론 요즘은 Node.js 발달로 백엔드에서도 잘 돌아감)이므로 자바스크립트의 기본이 되는 ECMAScript와 웹브라우저를 컨트롤 하기 위한 DOM과 BOM의 구성요소에 대해 잘 알고 프레임워크와 라이브러리를 사용하기를 바라는 마음에서 간단히 정리해 본다.

그럼 다음에는 아까 언급한 데로 프레임워크와 라이브러리를 차이를 알아보자~

You May Also Like

About the Author: nogada

Leave a Reply

Your email address will not be published. Required fields are marked *