Vanilla JS

1. 개요

2. 특징

#!syntax javascript
$('li').css('color','red')

#!syntax javascript
document.querySelectorAll('li').forEach(item => item.style.color='red')

#!syntax javascript
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++){
    lis[i].style.color='red'
}

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의 진정한 의미를 이해할 수 있다.

3.1. 2020년대 이유

4. 여담

5. 외부 링크

• 모질라 재단 자바스크립트 가이드
• ECMA 스크립트 명세서 (영어)

6. 관련 문서

• JavaScript
• 바닐라(동음이의어)