바닐라 JS

Seungwon Go
4 min readMay 26, 2021

어떠한 라이브러리나 프레임워크를 쓰지 않는 자바스크립트를 ‘바닐라 JS’라고 부릅니다.

예전에는 이렇게 별도로 ‘바닐라 JS’라고 부르는 용어가 없었습니다. 그런데 어느 순간 이렇게 바닐라 JS라는 용어가 생겨났습니다. 왜 이런 용어가 생겨났을까요?

현재 거의 모든 웹 애플리케이션은 jQuery, Angular, React, Vue 등 수많은 자바스크립트 라이브러리 및 프레임워크를 사용해서 구축이 되고 있습니다. 그러다 보니 애플리케이션은 점점 더 복잡도가 증가하고 있고, 일부 기능을 사용하기 위해서 전체 라이브러리를 추가 하다 보니 애플리케이션은 점점 무거워지고 성능 역시 더이상 보장할 수 없는 상태로 바뀌게 되었습니다.

이런 시점에서 외부 라이브러리, 프레임워크를 사용하지 않고 순수 자바스크립트로 구현해서 가볍고, 빠르고, 호환성이 좋은 웹 애플리케이션을 만들자는 움직임이 일어난 것입니다.

바닐라 JS 공식 사이트(http://vanilla-js.com/)에 접속하면 다음과 같이 다운로드 할 Core Functionality를 선택하고 다운로드 할 수 있도록 나와 있습니다.

제공되는 옵션 모두를 선택하고 다운을 받도록 하겠습니다.

vanilla.js라는 이름으로 파일이 다운로드 됩니다. 다운 받은 파일을 열어보면 다음과 같이 코드가 한줄도 없는 빈 파일임을 확인할 수 있습니다.

바닐라 JS는 어떤 라이브러리, 프레임워크를 사용하지 않는 순수 자바스크립트라고 했습니다. 자바스크립트가 실행되는 환경에서 기본 기능만으로 동작을 하는것이기 때문에 추가적인 코드나 라이브러리는 필요하지 않는 것입니다. 그렇기 때문에 바닐라 JS 파일을 다운로드 받았을 때 파일 안에는 코드가 한줄도 없는 비어있는 상태인 것입니다. 순수 자바스크립트 만을 사용한다는 것을 재치있게 개발자에게 전달하는 방법임에 틀림 없습니다.

바닐라 JS로 웹 애플리케이션을 구축한다면 당연히 가볍고, 빠르고, 호환성이 좋은 웹 애플리케이션을 구축할 수 있습니다. 하지만 개발자가 기존에는 쉽게 가져다 사용했던 수많은 라이브러리에 해당하는 코드를 직접 구현을 해야 한다는 고차원의 개발수준을 요구하게 됩니다.

이런 흐름 속에 개발자는 그 어느때보다 자바스크립트를 제대로 이해하고 사용할 수 있어야 되게 되었습니다. 이 뿐만 아니라 계속해서 쏟아지는 수많은 외부 라이브러리, 프레임워크를 제대로 사용하기 위해서 역시 자바스크립트를 제대로 이해하는 것이 중요합니다.

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어입니다. 모든 웹 브라우저에 인터프리터가 내장 되어 있어서 자바스크립트를 실행할 수 있습니다. 즉 웹 브라우저가 탑재된 모든 기기에서 자바스크립트로 구현한 프로그램을 실행시킬 수 있다는 것입니다.

Node.js가 나오면서 자바스크립트는 더이상 웹 브라우저에 종속된 언어가 아니라 웹 애플리케이션은 물론 데스크탑 애플리케이션, 모바일앱, 키오스크, 게임, 아두이노 같은 마이크로 컨트롤러까지 자바스크립트를 사용할 수 있는 분야는 점점 다양해 지고 있습니다.

자바스크립트 언어 하나를 잘 익히는 것 만으로도 할 수 있는 것이 점점 늘어나고 있습니다. 이 말은 또한 자바스크립트를 예전에 웹 브라우저에서 HTML DOM을 핸들링 하는 정도의 수준이 아닌, 좀 더 고차원적인 코딩을 해야 한다는 것을 뜻합니다.

그래서 자바스크립트를 제대로 배우고, 제대로 사용할 수 있어야 합니다.

그렇다면 기초라는 것은 무엇일까요?

흔히들 프로그래밍 언어에서 기초는 기초 문법을 배우는 것이라 착각을 하는 경우가 많습니다.

한국에서는 아이가 태어나면 1살, 그리고 건물의 첫 층을 1층 이라고 하죠. 하지만 유럽의 경우는 아이가 태어나면 0살, 그리고 건물의 첫 층을 0층 이라고 합니다. 그리고 앞으로 여러분이 배우게 될 모든 프로그래밍 언어에서 배열(Array)이 시작 인덱스(Index)는 0 부터 시작합니다.

한국에서는 0은 없는 것으로 여기며, 유럽에서는 0은 모든 것에 시작점이자 기반(Base)입니다.

우리에게는 이 0이 절실히 필요합니다. 여러분이 좋은 개발자가 되기를 원한다면 절대로 이 0을 간과해서는 안됩니다.

--

--