Javascript - 바닐라 스크립트란 무엇이고 왜 필요한가

바닐라 자바스크립트 (Vanilla Javascript)는 과연 무엇일까? 그리고 왜 필요한 걸까? 이 질문에 대해서 대답하기 위해서는 최근의 자바스크립트가 아니라 이전의 웹 생태계와 그 안에 있던 자바스크립트를 이해할 필요가 있다. 완전히 같다고는 이야기할 수 없지만 Java에 빗대어 보면 POJO (Plain Old Java Object)와 비슷한 맥락을 가지고 있다고 생각한다.

먼저 바닐라 스크립트가 어떤 것인지 알아보자 - Vanilla Javscript

 

Vanilla JS is a fast, lightweight, cross-platform framework

for building incredible, powerful JavaScript applications.

바닐라 JS는 빠르고 가벼운 크로스 플랫폼 프레임워크다.

놀랍고 강력한 Javascript 애플리케이션 만들기 위한

 

 

공식 사이트는 아니지만 바닐라 자바스크립트를 대변하는 웹 사이트에서는 Vanilla JS를 위와 같이 정의한다. 바닐라 자바스크립트에 대한 정의가 꽤나 멋있다. React, Vue, Angular와 같은 자바스크립트 프레임워크처럼 재미있고, 무언가 웹 개발의 생산성과 유지보수를 좋게 해 줄 것만 같다.

 

바닐라 자바스크립트 vs jQuery - http://vanilla-js.com

 Vanilla-js 웹 사이트에는 바닐라 자바스크립트와 jQuery를 비교한 내용을 게시해놓았다. 명령어를 수행하는 속도와 사용하는 코드를 예로 들어 차이점을 이야기한다. 바닐라 스크립트의 정의처럼 비교 결과는 바닐라 스크립트가 jQuery에 비해 유용하다고 보여준다.

 

 이제 바닐라 자바스크립가 정확히 무엇인지 알기 위해 실제 Vanilla JS 코드를 확인해보자. 아래는 바로 바닐라 자바스크립트 소스다.

 바닐라 자바스크립 소스를 보았다면 바닐라 자바스크립트가 무엇인지 알 수 있다. 우리가 정체를 궁금해했던 Vanilla JS는 아무것도 아니다. 바로 순수한 자바스크립트다. 실망스러울 수 있지만 이게 바로 바닐라 자바스크립트 (Vanilla JS)다. 그리고 정말인지는 몰라도 바닐라 (Vanilla)라는 단어의 뜻은 스페인어 "Vaninilla"에서 가져왔으며 작은 꼬투리나 콩을 뜻한다고 한다.

 

 

바닐라 자바스크립트는 왜 필요한 걸까?

이제 바닐라 자바스크립트가 무엇인지 알았다. 그렇다면 이제 "바닐라 자바스립트는 왜 필요한가?"라는 질문을 할 차례일까? 지금의 자바스크립트는 화면뿐만 아니라 서버를 넘어 장르를 불문하고 개발할 수 있는 강력한 언어로 손꼽히는데 말이다. 그래서 질문을 "바닐라 자바스크립트는 왜 화두가 되었을까?"라고 바꿔보았다. 그리고 이 질문에 대한 답은 웹 개발 환경의 생태계에 있다.

 

 최신의 표준 명세에 따라 웹 개발 환경이 만들어지기 이전의 웹 개발 환경에서는 자바스크립트가 여러 가지의 브라우저 (Chrome, Firefox, Safari 등등)에서 일관되게 동작하기 위해서는 표준을 우회하는 코드를 작성해야 했다. 특히 Windows의 IE는 자바스크립트뿐만 아니라 웹과 관련된 표준 명세를 따르지 않아 지금도 웹 개발에 있어 최대의 난제이기도 하다. 그런 이유에 의해 편법적인 자바스크립트 코드를 사용해 웹 개발을 해야 하는 경우가 많았고, jQuery는 그러한 문제(크로스 플랫폼)를 손쉽게 해결했다.

 

 그렇지만 역설적이게도 지금의 모던한 웹 개발 환경에서는 발전된 ECMAScript 명세와 최신의 브라우저를 바탕으로 표준 자바스크립트만으로도 쉽게 개발을 할 수 있게 되어, 이전과 달리 순수한 자바스크립트 (Vanilla JS)의 중요성이 화두가 되기 시작했다.

끝맺음

바닐라 자바스크립트는 프레임워크를 쓰지 말고 순수한 자바스크립트만 쓰자는 극단적인 이야기는 아니다. 단지 프레임워크만 중요하다고 생각하고 자바스크립트를 등한시하지 말자는 개발자들의 이야기다. 개발자는 상황에 따라 직접 라이브러리를 만들어야 할 수 도 있고, 프레임워크를 사용하더라도 예상하지 못한 오류를 빈번하게 마주한다. 그런 상황에서 문제를 해결하기 위해서는 어떻게 해야 할까? 우리는 하나의 프레임워크를 잘 다룬다고 해서 React 개발자이거나 Vue 개발자 아니면 Angular 개발자에 국한되는 개발자가 아니다. 그냥 개발자다.

반응형

댓글(5)

  • 익명
    2022.04.04 13:53

    비밀댓글입니다

    • 2022.04.04 21:35 신고

      제 글이 도움이 되셨다니 기분이 좋네요 ~ :)
      제 글은 출처만 적어주시고 마음껏 가져다가 사용해주세요~

      감사합니다!


    • 2022.05.12 09:10 신고

      더 유용한 글을 쓸 수 있도록 하겠습니다!.
      Avril님 감사합니다!

  • 클리넥스
    2022.05.20 13:24

    안녕하세요 글을 너무 잘 쓰셔서 흥미롭게 잘 읽었습니다.
    저는 react에서 virtual dom같은 걸 통해서 spa를 구성하는게 바닐라로는 불가능한줄 알았는데 꼭 그런것도 아니더라구요.
    그래서 궁극적으로는 react나 vue같은걸 쓰는 이유가 뭔지 의문이 생겨서 검색하다가 이 글을 보게됐습니다.

    "지금의 모던한 웹 개발 환경에서는 발전된 ECMAScript 명세와 최신의 브라우저를 바탕으로 표준 자바스크립트만으로도 쉽게 개발을 할 수 있게 되어,"

    혹시 이 이유를 알 수 있을까요? 문맥상 chromium이나 firefox같은 브라우저가 대세가 되면서 IE에 대응해야할 이유가 없어져서 좀 더 자유롭게? 사용할 수 있다고 이해했는데요. 관련한 내용을 좀 더 알고싶습니다.

    감사합니다.

    • 2022.05.20 17:22 신고

      안녕하세요. :)

      글에서 언급한 "모던한 웹 개발 환경"의 요소는 이야기해주신 것처럼 최신의 브라우저도 포함되지만, 가장 큰 부분은 Babel과 같은 트랜스컴파일러의 등장과 자바스크립트를 이용한 개발 환경(Nodejs..등등)의 발전이라고 생각합니다.

      jQuery가 유행했던 시기에도 크로스 브라우징 자바스크립트 개발 환경이 발전하면서 순수한 자바스크립트를 써도 환경에 따라 몇 가지 설정만으로 필요한 스크립트로 변환이 가능하고, 브라우저가 없어도 Nodejs를 바탕으로 자바스크립트가 동작 할 수 있는 환경이 만들어지면서 자바스크립트의 사용 범위가 광범위해졌습니다. 동시에 많은 개발자들에게 많은 매력도 어필 할 수 있게 되었구요.

Designed by JB FACTORY