Vanilla JS, 선택일까 필수일까

Vanilla JS, 선택일까 필수일까

Vanilla JS,
꼭 공부해야 할까요?

#바닐라JS #VanillaJS #프런트엔드 #JQuery

여러분은 프레임워크나 라이브러리 없이
개발을 해본 적 있나요?
상상만으로도 많은 어려움이 예상되지 않나요?

최근 몇 년 사이에 프런트엔드 개발자들 사이에서
순수 자바스크립트인 바닐라 JS에 대한
학습의 중요성이 강조되고 있어요.

인프메이션 #56에서는
Vanilla JS의 중요성이 대두된 이유와
Vanilla JS의 장점을 파헤쳐 보려 합니다.

인프메이션 #56 🍦

소소하게 뜨거운 감자로 떠올랐던 Vanilla JS!
빠르게 쓱 훑어볼까요?

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

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

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

*디버그(Debug): 프로그래밍 과정에서 발생하는 오류나 비정상적인 연산, 흔히 말하는 버그를 찾아 수정하는 것을 의미합니다. 디버그하는 과정을 디버깅(Debugging)이라 하기도 해요.

맛의 근본(?)인 바닐라와 자바스크립트의 근본인 바닐라 자바스크립트. 바닐라(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)입니다.

*돔(DOM): 돔(DOM, Document Object Model)은 문서 객체 모델로, XML이나 HTML 문서에 접근하기 위한 프로그래밍 인터페이스예요. 돔은 문서 내의 요소를 정의하고, 프로그래밍 언어가 돔 구조에 접근하는 방법을 제공해요.

**파싱(Parsing): 문서나 HTML 등의 데이터를 분해하고 분석하고, 원하는 형태로 조립한 특정 데이터만 추출하는 것을 말해요. 파싱을 수행하는 프로그램은 파서(Paser)라고 합니다.

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

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

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

리액트는 무조건 바닐라 JS로 작성해야 할까요? 🤔

가상 돔을 이용할 때 제이쿼리를 쓰면 충돌이 발생한다고 표현하는 이유는 제이쿼리와 가상 돔을 이용하는 프레임워크 및 라이브러리의 역할이 충돌하기 때문이에요. 제이쿼리와 리액트 및 뷰 모두 돔을 갱신한다는 같은 목적을 가진 도구거든요. 리액트와 뷰 등을 다룰 때 제이쿼리를 사용할 수는 있지만, 함께 쓰는 경우는 거의 없다고 해요. 같은 목적을 가진 두 도구를 굳이 한 번에 사용할 필요는 없으니까요. 


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에 대한 이해 없이 프레임워크 사용법만 익숙하신 분들을 선호하지는 않고요. 왜냐하면 프레임워크는 언제든 바뀔 수 있잖아요. 저 같은 경우에는 예전에 jQuery로 개발을 했다가 Backbone.js로 프레임워크로 전환을 했고요. 그 다음에는 Angular 1으로, 이후에는 Vue.js로 개발을 했었는데 프레임워크가 계속 바뀌기 때문에 코어라고 불리는 Vanilla JS에 대한 이해도를 특히나 프론트엔드에서 중요하게 평가를 하고 있어요."

(참고 콘텐츠: 주간 인프런 #34)

 

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


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

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

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

댓글 6

댓글을 작성해보세요.

  • gp
    gp

    바닐라js 는 필요함 -_-;

  • MAXK
    MAXK

    초기 Dom원리에 대해 설명하거나 교육용자료나 설명용으로 사용하지 실제 실무에선 대부분 React같은거 쓸 수 밖에 없어요... NextJS가 대세조

  • 가후
    가후

    그냥 유행

    근데 크게 유행하지 않을 유행인듯

  • 안뇽
    안뇽

    안녕하세요 현재 3년차에 들어서는 프론트엔드 개발자입니다. 칼럼 정말 재밌게 읽었습니다 :)
    관련하여 궁금한 부분이 있습니다 

    저는 의무적으로 바닐라 공부를 해왔고 하고 있습니다. 하지만 많은 컨퍼런스와 시니어분들의 의견을 들어도 바닐라의 학습 중요성, 당위성이 개인적으로는 크게 와닿지 않습니다.

    제이쿼리에서 리액트로 넘어갔던 시점이나 앞으로 새롭게 파생될 프레임워크의 러닝커브에 바닐라가 근본적으로 중요한가는 의문입니다.
    오픈소스 개발자가 꿈이라면 당연히 바닐라가 가장 중요하다고 얘기할 수 있겠지만, 개발자라는 직업 특히 프론트엔드 개발자는 보다 유저와 맞닿는 가치를 만드는데 집중하는 개발자라고 생각합니다. 대부분의 프론트 개발자는 바닐라의 동작원리나 바닐라로 코딩하는 방법보다는 보다 실무적인 기술과 최적화 기법을 필요로 할 것이라고 생각합니다.

    브라우저 최적화를 위한 JS지식들은 필요에 의해 그때그때 공부하면 된다고 생각하고 알기 싫어도 알게 된다고 생각하고, 리액트가 하루아침에 사라진다고 바닐라로 웹 개발 하게 될거라고 생각하지 않습니다.
    새로운 패러다임이 나올거고 새로운 프레임워크가 생겨날텐데 과연 그때 바닐라의 동작원리가 얼마만큼 생산성에 도움을 주고 실무적인 내용에 얼마만큼 도움을 줄 수 있는가에 대한 물음표는 항상 생깁니다.

    결국 새로운 패러다임에  적응하고 보다 효율적으로 문제를 해결할 수 있는 능력이 중요하다고 생각하고 있는데 아직 주니어의 어린 생각인지 어떻게 받아들여야 할지 항상 궁금하네요 !! 

  • 데브심
    데브심

    바닐라 JS 공부해야지 해야지 한지가 몇년이 지났는지 모르겠네요... 늦었지만 지금부터라도 공부를 열심히 해야할 것 같습니다 !

  • 이재석
    이재석

    들어만 봤지. 실제로는 어떤 언어인지에 대해 몰랐는데 ~ 이런 콘텐츠 좋네요

채널톡 아이콘