Vanilla JS

1. 개요[편집]

---

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

2. 특징[편집]

---

하지만 순수 자바스크립트의 특성상 라이브러리를 쓰면 간단하게 쓸 수 있는 코드가 길어지는 일이 왕왕 발생한다. 예를 들어서 jQuery를 쓰면

$('li').css('color','red')

이렇게 간단하게 표현할 수 있는 걸

document.querySelectorAll('li').forEach(item => item.style.color='red')

이런 식으로 forEach 같은 반복문을 명시적으로 써서 표현해야 하는 경우도 생기기 때문에 초심자의 경우 더 어렵게 느껴지기도 한다.[* 심지어 인터넷 익스플로러 같이 구형 브라우저를 맞추기 위해서는 더 복잡한 반복문을 사용하기도 한다.

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

]

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

3. 논점[편집]

---

실제로는 바닐라에 대한 명확한 개념이 없고 의미가 혼용되는 경우가 많기 때문에 아래의 여러 오해를 사기도 한다.

1. 바닐라 js는 (새로 나온) 프레임워크가 아니다.

1. 바닐라 js가 '무조건 좋은 것'이 아니다.

1. 바닐라 js는 UI에 대해서만 말이 된다.

4. 여담[편집]

---

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


공식 사이트(?)

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

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

5. 외부 링크[편집]

---

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

6. 관련 문서[편집]

---

• JavaScript
• 바닐라(동음이의어)#프로그래밍