새로운 프레임워크 아님 주의!
Vanilla JS는 대체 뭘까?

자바스크립트(JavaScript)는 프런트엔드 영역에서 주로 사용하는 언어예요. 프론트엔드 분야에서 압도적으로 많이 쓰이기 때문에 자바스크립트를 기반으로 한 프레임워크나 라이브러리도 자연스럽게 대세를 차지하고 있어요.

바닐라 자바스크립트(Vanilla JS)는 외부의 라이브러리나 프레임워크를 이용하지 않는 순수 자바스크립트를 말해요. 라이브러리나 프레임워크를 사용하지 않기 때문에, 그걸 사용했을 때보다 빠르고 호환성이 좋다는 게 특징입니다. 이런 특징은 디버그(Debug)*를 할 때 큰 힘을 발휘하는데요. 보통 라이브러리를 통해 만든 구문은 디버그 과정에서 해당 구문과 이용 라이브러리 파일까지 조사하는데요. 바닐라 JS의 경우엔 해당 구문만 조사하기 때문에 디버그하는 시간이 크게 줄어들어요.

_{맛의 근본(?)인 바닐라와 자바스크립트의 근본인 바닐라 자바스크립트. 바닐라(Vanilla)는 일반적임(Plain)을 의미하는 데 쓰이는 단어이기도 해요.}

하지만 라이브러리를 활용하면 간단한 코드도 바닐라 JS로 작성하면 길어진다는 어려움이 있어요. jQuery를 쓰면 한 줄로도 작업할 수 있는 코드를 여러 줄로 작성한다는 것은 비효율적이라고 느껴지기도 하고요. 그래서 바닐라 JS로 개발하는 것은 쉽지 않은 일이에요.

그럼에도 바닐라 JS 능력을 중요하게 생각하는 추세가 된 이유가 뭘까요? 자바스크립트의 본질을 제대로 알지 못한 상태에서 편의성만을 위해 프레임워크나 라이브러리를 활용하는 것에 대한 문제가 제기되었거든요.

떠오르는 바닐라 JS,
그 뒤엔 jQuery가 있었다

바닐라 JS의 중요성이 조명된 이유를 알려면 제이쿼리(jQuery)에 대한 이야기를 빼놓을 수가 없어요. 제이쿼리는 프론트엔드 개발자들이 스크립트를 작성할 때 가장 많이 쓰는 라이브러리예요. 한때 자바스크립트 라이브러리 사용률 76%로 압도적인 1위를 기록하기도 했어요(2020년 10월, W3Techs 설문 기준).

_{오픈 소스 기반의 자바스크립트 라이브러리, 제이쿼리(jQuery).}

제이쿼리가 처음 나왔던 2000년대 중반은 웹브라우저들 사이의 자바스크립트 호환성이 낮은 시기였어요. 이런 문제점을 바탕으로, 작성된 자바스크립트 코드를 웹 브라우저에 맞게 변환 및 실행하는 라이브러리가 다양하게 나왔는데요. 그중 제이쿼리가 가장 쉬운 API 문법을 제공했어요. 이 외에도 제이쿼리는 유지관리가 용이한 코드 작성 지원, 다양한 기능 제공 등 'Write less, do more'이라는 모토에 걸맞는 다양한 장점 덕분에 많은 개발자의 사랑을 받았어요.

자바스크립트 프레임워크와 라이브러리는 제이쿼리에 의존하고 있다는 이야기가 있을 정도로 제이쿼리의 입지는 굳건했지만, 최근에 그 의존도가 하락하고 있어요. 자바스크립트(JavaScript)의 지속적인 개선으로 인해 대부분의 기능을 바닐라 JS로 구현할 수 있게 된 것, 웹 표준 API가 확장된 것 등 다양한 이유가 있는데요. 대표적인 이유로는 가상 돔(Virtual DOM)을 사용하는 라이브러리의 등장이 꼽혀요.

웹페이지는 브라우저 내에서 돔(DOM)*이라는 표준 형식으로 파싱(Parsing)** 되어 표현돼요. 돔은 서비스 이용자의 동작에 맞춰 움직이는 인터랙티브 웹(Interactive Web)을 구현하기 위해선 필수적입니다. 하지만 돔 조작이 많아질수록 브라우저의 성능이 낮아지는 문제가 있었고, 이를 해결하기 위한 대안으로 등장한 것이 가상 돔(Virtual DOM)입니다.

메모리에 가상 돔을 만들고 실제 돔과 비교하며 작업한 후, 수정된 부분은 실제 돔에 적용하는 식으로 활용할 수 있어요. 브라우저의 성능과 속도 문제를 보완한다는 장점을 바탕으로, 가상 돔을 이용한 프레임워크와 라이브러리가 늘었어요. 리액트(React), 뷰(Vue.js), 앵귤러(Angular)가 대표적이에요.

_{가상 돔을 채용한 프레임워크와 라이브러리의 대표 주자 React, Vue.js, Angular}

제이쿼리와 비교했을 때 가상 돔을 이용한 경우가 생산성이 훨씬 높아요. 이에 자연스럽게 가상 돔을 채용하는 리액트(React)나 뷰(Vue.js) 등이 새로운 대세로 떠올랐어요. 가상 돔을 이용할 때 제이쿼리를 쓰면 스크립트 충돌이 발생할 수도 있어서, 되도록 바닐라 JS로 스크립트를 작성하려는 경향이 생겼습니다. 제이쿼리를 활용해 직접 돔을 제어하는 것보다, 상태(State)를 통해 돔을 선언적으로 제어하는 것이 코드에 대한 이해를 훨씬 쉽게 만들어주기 때문이에요.

Back to Basics
Vanilla JS, 선택일까 필수일까

_{바닐라 JS를 대변(?)하는 웹사이트(vanilla-js.com).}

어느 자바스크립트 개발자가 만든 vanilla-js.com이라는 웹사이트에서는 바닐라 JS를 다음과 같이 정의하고 있어요. '바닐라 JS는 놀랍고 강력한 자바스크립트 앱을 만들기 위한 빠르고 가벼운 크로스 플랫폼 프레임워크다.'

웹사이트에서 정의한 것처럼, 바닐라 JS는 빠르고 가볍다는 장점이 있어요. 하지만 바닐라 JS가 무조건 좋은 것은 아닙니다. 여느 프로그래밍 언어와 마찬가지로, 기본 언어만으로 높은 생산성을 달성하는 것은 쉽지 않거든요.

바닐라 JS를 지향하자는 이야기가 나오는 것은 프레임워크나 라이브러리를 무조건 금지하자는 의미가 아니라, 거기에 지나치게 의존하지 말자는 것이 핵심이에요. 사용률이 높은 제이쿼리(jQuery), 다양한 프레임워크 및 라이브러리 속엔 자바스크립트의 본질이 있어요. 제이쿼리든 리액트든 마법처럼 기능을 구현해주는 프레임워크나 라이브러리의 본질을 알고 쓰자는 움직임인 것이죠.

_{리액트 같은 프레임워크나 라이브러리가 마법처럼 구현해주는 일을 바닐라 JS로 다루는 'Vanilla Javascript로 ㅇㅇ만들기' 시리즈가 유행하기도 했어요. (출처: https://junilhwang.github.io/TIL/)}

기업에서도 바닐라 JS 능력을 중요하게 생각하고 확인하려는 추세라고 합니다. 채용 공고에 '자바스크립트에 대한 충분한 이해가 있는 사람'을 우대한다는 내용을 작성하거나, 코딩 테스트에서 바닐라 JS 관련 문제를 출제하기도 해요. 프레임워크나 라이브러리는 언제든 바뀔 수 있으므로 바닐라 JS에 대한 이해를 중요하게 생각하는 거예요.

바닐라 JS 공부의 중요성, 여러분은 어떻게 생각하시나요? 댓글로 여러분의 의견을 남겨주세요!

재미있는 IT 지식을 전달하는 [인프메이션]!

매달 첫번째 & 세번째 화요일마다 찾아오는 인프런 뉴스레터,
[헬로 인프런]으로 가장 빨리 인프메이션을 받아보세요!
지난 [인프메이션] 이 궁금하다면? (클릭)

헬로 인프런 구독하러 가기 💌
([인프런 소식 및 홍보]를 ON으로 바꿔주세요 😊)