Admin: 새 문서: 공식 사이트(?) [목차] > 빠르고 가벼운 크로스 플랫폼 프레임워크 # == 개요 == '''Vanilla JS'''는 자...

2021-12-07T05:03:13Z

새 문서: 공식 사이트(?) [목차] > 빠르고 가벼운 크로스 플랫폼 프레임워크 # == 개요 == '''Vanilla JS'''는 자...

새 문서

[[http://vanilla-js.com|공식 사이트(?)]]

[목차]

> 빠르고 가벼운 크로스 플랫폼 프레임워크 [[http://vanilla-js.com|#]]

== 개요 ==
'''Vanilla JS'''는 [[자바스크립트]] 프레임워크로 다른 프레임워크나 [[jQuery]]보다도 압도적으로 빠르고 웹표준을 잘 지키는 웹브라우저들에 대해서는 크로스 브라우징이 잘 되는 특성이 있다. [[페이스북]], [[구글]], [[유튜브]] 등등 유명한 해외 사이트에서 사용되었으며, 다른 플랫폼보다도 오래되었음에도 불구하고 꾸준히 업데이트 되어 온 프레임워크이다. 용량도 매우 가벼워서 압축을 하는 경우 압축을 하지 않은 경우보다 '''용량이 더 나가는''' 역설적인 무게를 자랑한다.
== 진실 ==
어떠한 라이브러리나 프레임워크를 쓰지 않는 자바스크립트를 이르는 별명이다. 그러므로 바닐라 JS 자체의 용량은 '''0Byte'''이다. 용량 자체가 없으니 압축했을 때에는 압축 코드가 들어가 용량이 더 나갈 수밖에. 사용자정의된 라이브러리나 프레임워크 자체를 쓰지 않기 때문에 당연히 다른 라이브러리나 프레임워크를 사용했을 때보다 빠르고 호환성이 좋을 수밖에 없다. 또한 숙련된 사람일 수록 별의별 기능을 구현할 수 있다는 특징이 있다.

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

{{{#!syntax javascript
$('li').css('color','red')
}}}
이렇게 간단하게 표현할 수 있는 걸

{{{#!syntax javascript
const _doc = document, qA = sel => _doc.querySelectorAll(sel);
for (let i of qA('li')){i.style.color='red'}
}}}
이런 식으로 반복문을 명시적으로 써서 표현해야 하는 경우도 생기기 때문에 초심자의 경우 더 어렵게 느껴지기도 한다.

그렇지만 [[디버그]] 기능에서는 바닐라 JS가 진가를 발휘한다. 바닐라 JS로 만든 구문은 디버그를 할 때에 해당 구문만을 조사하지만 라이브러리를 통해 만든 구문은 디버그를 할 때 해당 구문 뿐 아니라 라이브러리 파일 안을 몇 바퀴 돌고 오는 일도 있기 때문이다.
== 참조 ==
* [[자바스크립트]]
* [[https://developer.mozilla.org/ko/docs/JavaScript/Guide|모질라 재단 자바스크립트 가이드]]
* [[https://www.ecma-international.org/publications/standards/Ecma-262.htm|ECMA 스크립트 명세서 (영어)]]

[[분류:라이브러리]]

Vanilla JS - 편집 역사

Admin: 새 문서: 공식 사이트(?) [목차] > 빠르고 가벼운 크로스 플랫폼 프레임워크 # == 개요 == '''Vanilla JS'''는 자...