웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 바닐라 JS의 의미, VanillaJS

Last Modified : 2020-12-17 / Created : 2020-04-16
8,897
View Count
자바스크립트에서 자주 등장하는(?) 바닐라JS(VanillaJS)에 대하여 알아봅니다. 바닐라JS는 무엇일까요? 뭘 의미할까요?




# 바닐라JS란 무엇인가? VanillaJS

우선 바닐라JS는 프레임워크나 라이브러리가 아닙니다. 하지만 그렇게 잘못 이해하기도 하는데 실제로 바닐라JS의 소스를 확인해보면 용량이 0byte로 내용이 없습니다. 다시 말해 바닐라JS는 순수 자바스크립트(Pure Javascrpipt)와 동일합니다. 하지만 순수 자바스크립트와 바닐라JS가 용어가 웹에서 혼용되 사용되면서 이런 혼동이 발생하지 않았나 생각되네요. (실제로 뭐가 더 좋은지 뭘 사용해야 하는지 묻는 질문도 쉽게 찾을 수 있죠.)

어쨌든 자바스크립트가 바로 바닐라JS입니다. 바닐라라는 의미가 기본적인 맛... 뭔가 첨가가 거의 없는 의미로 생각해보면 약간 이해가 되기도 합니다.


! 그럼 바닐라JS의 장점은 무엇일까요?

순수 자바스크립트를 사용한다는 것은 불필요한 라이브러리, 플러그인 등을 사용하지 않음을 의미합니다. 즉 순수하게 자바스크립트만 사용하여 코드를 작성하면 당연히 장점과 단점이 존재하게 될 텐데요 ~ 일단 동일한 기능을 사용하기 위해서는 코드가 좀 더 길고 복잡할 수 있는 단점이 있겠죠.


하지만 ~ 순수 자바스크립트는 불필요한 코드를 완전히 배제해 필요한 기능만 성능상 가장 우수하게 구현할 수 있겠죠. 물론 그렇기 때문에 구현에 더 어려울 수 있습니다. 여기서 불필요한 코드는 이미 완성된 코드를 사용하면 필수 불가결한 부분 중 하나입니다. 간단한 기능 구현을 위해 소 잡는 칼이 필요한 것은 아니니까요.


! 마치면서

최근의 자바스크립트는 너무 많은 라이브러리, 프레임워크, 플러그인 등등 사용성 면에서는 편리하겠지만 동일한 기능 구현을 위해 너무 많은 선택사항들이 존재하게 된 것 같습니다. 이런 의미에서 표준화가 더욱 필요하지 않나 생각됩니다. 바닐라JS를 보면 자주 사용하는 ajax, 기타 이벤트 등을 순수 자바스크립트를 사용하는 방법을 제공합니다.
아래의 글도 찾고 계시지 않나요?

    Previous

    [자바스크립트] 객체가 문자열인 경우 객체 또는 JSON 타입으로 변경하는 방법

    Previous

    [Typescript] 1편. 짧고 쉽게 타입스크립트 이해하기