현대 웹 개발에서 jQuery와 바닐라 JS의 역할

안녕하세요 찐망고입니다.

 

수업을 하다 보니 바닐라 JS를 언급하는 친구들이 늘었더라구요

jQuery와 바닐라 JS에 관련하여 포스팅을 해보려 합니다.

 

자바스크립트는 프론트 사이드에서 꽤나 많이 언급되어 사용되는 언어이자 서버사이드 개발이 가능한 언어랍니다. 

 

물론 프론트 영역에서의 사용이 절대적이기 때문에

자바스크립트를 기반으로 한 프레임워크들이 현재 대세로 자리 잡고 있어요. 

페이스북 엔지니어가 제작한 React, 

구글 엔지니어가 제작한 Vue,

대규모 애플리케이션에 적합한 Angular 등이 이에 해당합니다.

 

또 프레임워크라고 하기에는 아주 조금 애매한 감이 있지만

현업 웹 개발에서 많이 사용하는 jQuery도 결국 자바스크립트의 라이브러리 중 하나입니다.

 

jQuery란?

제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다.

웹페이지의 요소들을 쉽게 찾고 조작 가능하고,

모든 웹브라우저에 대응할 정도로 호환성이 뛰어나며,

관련 플러그인들이 웹상에 공개되어있으며 직접 플러그인을 구현하거나 확장이 가능한 라이브러리입니다.

 

 

바닐라 JS라는 용어는 어디서?

 

vanilla-js라는 사이트가 있습니다.

vanilla-js.com/

Vanilla JS

이 사이트에 접속하면 

놀랍고 강력한 JavaScript 애플리케이션을 구축하기 위한 빠르고 가벼운 크로스 플랫폼 프레임 워크입니다.

라는 문구가 보이지만 다운로드해서 보면 0바이트입니다.

사실상 코드가 아예 없거든요 😂

외국 소프트웨어 세계에선 바닐라(vanilla) = 일반(Plain)을 의미한다고 해요

 

결론적으로 바닐라 Js란 외부 라이브러리나 프레임워크를 쓰지 않는 순수 JavaScript를 뜻하는 단어를 말합니다.

 

사용자 정의된 라이브러리나 프레임워크 자체를 쓰지 않기 때문에

당연히 다른 라이브러리나 프레임워크를 사용했을 때보다 빠르고 호환성이 좋을 수밖에 없고

또한 숙련된 사람일수록 별의별 기능을 구현할 수 있다는 특징이 있습니다

하지만 순수 자바스크립트의 특성상 라이브러리를 쓰면 간단하게 쓸 수 있는 코드가 길어지는 일이 발생합니다.

jQuery로 한 줄이면 제어 가능한 것들이 아무래도 여러 줄의 코드를 통해 비효율적으로 작업될 수도 있죠~

 

 

그럼에도 바닐라 JS를 사용하는 이유?

일단 jQuery가 많은 개발자에게 사랑받을 수 있었던 이유를 먼저 얘기해볼게요.

제가 이전에 브라우저 관련 포스팅을 한 적이 있는데요.

이전 포스팅에 브라우저 전쟁이야기 하며 잠깐 말했지만

자바스크립트가 여러 가지의 브라우저에서 일관되게 동작하기 위해서는

표준을 좀 우회해서 코드를 작성해야 했었단 말이죠..

특히 IE는 자바스크립트뿐만 아니라 웹과 관련된 표준 명세를 따르지 않아 지금도 웹 개발환경에선 말이 많아요

편법적인 자바스크립트 코드를 사용해 웹 개발을 하는 경우가 많았는데

jQuery는 그러한 문제(크로스 플랫폼)를 손쉽게 해결한단 말이죠. 

그리고 아주 간단한 몇 문장으로도 요소를 쉽게 제어할 수 도 있었고요.

접근하기 쉽고 간단하다 보니 js를 배우지 않고 jQuery만 공부하는 경우도 많았고요.

 

그런데 지금은 얘기가 조금 달라졌죠~

일단 EMCAScript6(es6) 제정되고 새로운 기술들이 도입되면서 코드를 작성할 때 효율이 점점 늘었고요

브라우저에서 종속된 언어였던 자바스크립트가 서버사이드 개발도 가능해지고, 

위에서 얘기한 프런트에서 사용하는 React, Angular, Vue 등이 es6의 문법을 사용하면서

바닐라 Js에 대한 언급이 더 늘어나는 것 같아요.

 

 

 

정리하며,

웹 프런트엔드 영역에서 jQuery의 입지가 낮아지는 느낌이 드나요?

 

https://w3techs.com/technologies/overview/javascript_library에 따르면,  

Usage Statistics and Market Share of JavaScript Libraries for Websites, January 2022

2022년 1월 25일 현재 "웹사이트용 자바스크립트 라이브러리 사용 동향"에서

jQuery의 점유율은 전체 웹사이트의 78.3%의 사용률로 압도적인 수치로 1위를 기록하는 걸 확인할 수 있습니다.

사용률은 여전히 높으나, 아마 개발자들 사이에서는 점점 사용하지 않으려고 하는 움직임들이 있죠

 

위에서 포스팅한 웹브라우저 환경의 변화라거나,

가상 돔(Virtual DOM)을 사용하는 라이브러리인 React나 Vue.js도 한몫한 부분이 있습니다. 

가상 돔을 사용하는 라이브러리가 많아질수록 돔을 직접 조작하는 제이쿼리의 필요성이 줄어들겠죠..

 

하지만 그럼에도 2020년 현재 개발자가 가장 많이 사용하는 오픈소스는 jQuery입니다 

https://olc.kr/board/read.jsp?id=3735&code=news

 

jQuery는 제 생각엔 이젠 필수 역량이 된 것 같아요

친한 개발자 친구의 의견을 덧붙여 보자면 자바스크립트 자체 스펙(정의)인 기능들을 가지고 개발하고,

필요한 기능은 라이브러리를 연결해서 사용하는 것이 좋을 것 같다고 해요

100% 자바스크립트로만 만든다는 건 비효율적이니까요.

대신 업데이트가 될 라이브러리여야 겠죠?