최근 수정 시각 : 2023-04-27 17:22:36

Vanilla JS

1. 개요2. 특징3. 논점4. 여담5. 외부 링크6. 관련 문서

1. 개요

외부 라이브러리나 프레임워크를 쓰지 않는 순수 JavaScript를 이르는 말이다. 사용자 정의된 라이브러리나 프레임워크 자체를 쓰지 않기 때문에 당연히 다른 라이브러리나 프레임워크를 사용했을 때보다 빠르고 호환성이 좋을 수밖에 없다. 또한 숙련된 사람일 수록 별의별 기능을 구현할 수 있다는 특징이 있다.

2. 특징

하지만 순수 자바스크립트의 특성상 라이브러리를 쓰면 간단하게 쓸 수 있는 코드가 길어지는 일이 왕왕 발생한다. 예를 들어서 jQuery를 쓰면
#!syntax javascript
$('li').css('color','red')
이렇게 간단하게 표현할 수 있는 걸 
#!syntax javascript
document.querySelectorAll('li').forEach(item => item.style.color='red')
이런 식으로 forEach 같은 반복문을 명시적으로 써서 표현해야 하는 경우도 생기기 때문에 초심자의 경우 더 어렵게 느껴지기도 한다.[* 심지어 인터넷 익스플로러 같이 구형 브라우저를 맞추기 위해서는 더 복잡한 반복문을 사용하기도 한다. 
#!syntax javascript
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++){
    lis[i].style.color='red'
}
]

그렇지만 디버그 기능에서는 바닐라 JS가 진가를 발휘한다. 바닐라 JS로 만든 구문은 디버그를 할 때에 해당 구문만을 조사하지만 라이브러리를 통해 만든 구문은 디버그를 할 때 해당 구문뿐 아니라 라이브러리 파일 안을 몇 바퀴 돌고 오는 일도 있기 때문이다. 또한 디버그가 아니더라도 라이브러리 파일 안을 몇 바퀴 돌고 오는 것은 실제 컴퓨터 연산 상에서 라이브러리를 사용할 때 존재하기 때문에 바닐라 JS를 사용하면 연산 시간을 크게 줄여준다.

3. 논점

실제로는 바닐라에 대한 명확한 개념이 없고 의미가 혼용되는 경우가 많기 때문에 아래의 여러 오해를 사기도 한다.
  1. 바닐라 js는 (새로 나온) 프레임워크가 아니다.
    여러 기사나 글에서 바닐라 js를 쓰자! 라는 이야기가 많기 때문에 가장 많은 사람들이 착각하게 되는 부분이다.
    바닐라 js는 어떠한 유형의 라이브러리나 프레임워크가 아니며, 따라서 추가적인 설치나 사용법을 배울 필요가 없다.
    그렇다면 왜 굳이 용어를 구분하는가, 또는 당연히 여러 라이브러리도 js를 기반으로 하는데 내가 쓰는 것은 자바스크립트가 아니란 말인가? 하는 혼동이 올 수 있으며 이는 아래의 오해들과 이어진다.
  2. 바닐라 js가 '무조건 좋은 것'이 아니다.
    어느 프로그래밍 언어나 마찬가지로, 기본 언어만으로 높은 생산성을 달성하기는 쉽지 않으며, 특히나 바퀴를 재발명하는 일이 있어서는 안 된다.
    js로 개발을 할 때 아무 라이브러리도 없이 개발을 하게 된다면 당연하겠지만 생산성이 급격하게 저하되며, 가뜩이나 부족하고 표준화되지 못한 js의 내장(정확히는 corejs의 Object밑에 있는 메서드들) 라이브러리로는 모든 요구사항을 따라잡기 버겁다.[1]
    바닐라 js를 지향하자는 말은 아무 라이브러리도 쓰지 말자는 것이 아니라 '라이브러리에 대한 지나친 의존'을 버리라는 것이 논점이다.
    즉 제이쿼리로 슬라이드 뷰를 쉽게 만들 수 있지만 js만 써서는 할 수 없다면 그것은 개발자로써 특정 도구에 지나치게 의존한다는 뜻이 된다.
    기억할 점은, 실제 현장에서는 당연히 제이쿼리를 쓰고, 리액트를 써서[2] 만들며, js만으로 만드는 경우가 오히려 드물다.
  3. 바닐라 js는 UI에 대해서만 말이 된다.
    js의 범위가 넓어짐에 따라 node 등으로 백엔드를 개발하는 js개발자에게는 바닐라 js라는 말 자체가 의미가 통하지 않는다.
    바닐라 js는 과거에 '구현이 복잡한 동적인 UI'를 쉽게 만들기 위한 제이쿼리같은 툴에 지나치게 의존하던 개발자들이 native DOM API 자체를 사용하지 않게 되면서 만들어진 용어이다. 즉, 과거엔 js가 제이쿼리와 사실상 동일시 되던 '브라우저 위에서 돌아가는 스크립트 언어' 정도의 위상이었고, 표준화되지 않은 여러 DOM API들로 인해 차라리 통일된 제이쿼리 같은 라이브러리가 오히려 브라우저 호환성(IE등도 지원)이 높았음을 고려해야 한다.
    따라서 현재의 js의 쓰임(백엔드 등)과 위상, 표준화된 문법(ES6+), 표준화된 브라우저 API등과 과거의 차이를 이해해야만 바닐라 js의 진정한 의미를 이해할 수 있다.

4. 여담

Vanilla JS를 마치 하나의 프레임워크처럼 사이트를 만들기도 했다.

파일:vanillajs.png
공식 사이트(?)
Vanilla JS는 자바스크립트 프레임워크로 다른 프레임워크나 jQuery보다도 압도적으로 빠르고 웹표준을 잘 지키는 웹브라우저들에 대해서는 크로스 브라우징이 잘 되는 특성이 있다. 페이스북, 구글, 유튜브 등등 유명한 해외 사이트에서 사용되었으며, 다른 플랫폼보다도 오래되었음에도 불구하고 꾸준히 업데이트 되어 온 프레임워크이다. 용량도 매우 가벼워서 압축을 하는 경우 압축을 하지 않은 경우보다 용량이 더 나가는 역설적인 무게를 자랑한다.

마치 다른 프레임워크 사이트처럼 다운로드 버튼이 있지만 어떤 옵션을 고르건 빈 js 파일 하나만 다운로드된다. 적용법 역시 실 운영 환경에서는 빈 줄 하나를 삽입하라고 되어 있는데, 부연설명으로 Vanilla JS는 너무나 유명해서 오랫동안 브라우저에 탑재되어 왔다는 내용을 적었다.

5. 외부 링크

6. 관련 문서

[1] 간단한 예로 데이터 처리를 들 수 있다. js의 sort메서드는 사용하기 복잡하며, 의도치 않은 결과를 낼 수 있고, 경우에 따라 브라우저마다 동작이 달라지는 일마저 생길 수 있다. 그리고 groupby처럼 고수준의 동작은 지원하지 않는다. 이런 단점을 해결하기 위해 Underscore.js(또는 lodash), stdjs등이 서드파티로 개발되는 것이다.[2] 리액트의 목적 자체가 컴포넌트의 재사용이다. 즉 이미 누가 만든 것이 있다면 새롭게 짤 필요가 없다.

분류