[JavaScript] 바닐라 자바스크립트란?

학습목표

저는 조금 어리석게도, 순수 자바스크립트에 대한 개념이 확립되지 않은 상태로 SPA 프레임워크 학습부터 시작하였습니다.

때문에 React.js, Vue.js를 경험하면서 필요한 구문만 외워서 사용하였고, 스스로가 자바스크립트 개발자라 할 수 없다고 판단하였습니다.

이번 기회에 자바스크립트 개발을 시도해 봤다면 한 번 쯤은 들어봤을 바닐라 자바스크립트(Vanilla Javascript)가 무엇인지 알아보고자 하였습니다.

 

 

---

 

바닐라 자바스크립트의 정의

바닐라 자바스크립트의 홈페이지에 접속하면 다음과 같은 문구를 확인할 수 있습니다.

 

 

즉, 빠르고 가벼운 우수한 크로스 플랫폼 프레임워크라고 설명하고 있습니다.

 

사실, 바닐라 자바스크립트는 순수한 자바스크립트를 대신하여 사용하는 말이 될 수 있습니다.

바닐라는 스페인어 'Vainilla'에서 유래된 단어이며 핵심, 근본 이라는 의미를 함유하고 있다고 설명할 수 있습니다.

외국의 소프트웨어 업계에서는 Vanilla == Plain 을 의미하기도한다 합니다.

 

 

---

 

 

jQuery와 SPA 프레임워크

 

jQuery

jQuery는 "write less, do more" 이라는 슬로건을 가진 오픈소스 기반 라이브러리 입니다.

SPA 프레임워크의 흥행 이전 압도적인 점유율을 기록하고 있었고, 현재도 꾸준히 업데이트가 이루어지고 있었습니다.

가상 DOM을 활용하는 SPA 프레임워크에 비해 jQuery는 DOM을 직접적으로 조작하는 동작 방식을 가지고 있습니다.

따라서, jQuery는 현재 유행하는 SPA 프레임워크와 동작 방식이 상이하여 혼재가 어려울 수 있습니다.

 

 

SPA

SPA는 Single Page Application의 약어로 단일 페이지라는 개념을 만든 프레임워크입니다.

쉽게 말해서, 다른 화면으로 전환할 때 화면의 일부분만을 변경하며 보여주는 방식으로 이해할 수 있습니다.

컴포넌트화, 모듈화 라는 키워드로 재사용성을 극대화 시켰으며 현재 웹 프론트엔드 개발에 필수적인 요소로 자리잡게 되었습니다.

 

 

가장 인기있는 SPA 프레임워크로는 Angular.js, React.js, Vue.js를 뽑을 수 있습니다.

직접적으로 DOM을 조작하는 jQuery와 달리 가상 DOM을 활용하는 것이 가장 큰 차이점이라고 할 수 있습니다.

 

 

---

 

 

바닐라 자바스크립트가 필요한 이유

먼저, 순수 자바스크립트이기 때문에 별도의 다운로드가 필요 없으며 가벼운 특징을 보입니다.

외부의 라이브러리 도움 없는 자바스크립트 코드를 작성하면, 길고 복잡한 코드를 만들어내야 할 수 있다는 단점이 있을 수 있습니다.

하지만, 바닐라 자바스크립트를 중점적으로 학습한다면 자바스크립트에 대한 이해도를 향상시키기 적합하며, 이는 곧 SPA 프레임워크를 활용하는데도 큰 도움이 될 것입니다.

또한, 바닐라 자바스크립트는 앞서 언급한 jQuery와 SPA 프레임워크를 활용한 코드보다 더 빠른 속도를 자랑한다고 합니다.

 

 

 

---

리뷰

• 바닐라 자바스크립트를 알아야 하는 이유 확립
• jQuery와 비교 필요