바닐라 JS(JavaScript)와 제이쿼리(jQuery)

  학원을 다닐 때  커리큘럼이 백엔드 위주였어서 node.js / express / 리액트(React) 등을 포함한 js파트는 찍먹만 했고

 

2023.10.31 - [응용SW 개발 (React)/필기일지] - 231030 [응용SW개발] 리액트 SPA 실습

231030 [응용SW개발] 리액트 SPA 실습

이외 [FRONT-END] 메뉴 글 등

 

팀 프로젝트 때도 jsp와 thymeleaf 템플릿으로 프론트를 구현해서 js는 간단한 클라이언트 처리들을 구현할 때만 사용했었는지라 다른 분야에 비해서 심도 있는 학습을 하지 못해 보충을 열심히하고 있다.

 

---

 

 

이번에 JS 예제들을 구현하며, 공부를 할때 제이쿼리를 위주로 먼저 구현을 했었고,

이제 다시 바닐라 JS로 다시 코드를 짜보려고하는데

 

이에 앞서 기초 다지기 겸 다시 바닐라 JS와 제이쿼리의 장단점을 비교해보려한다.

 

프론트가 React와 Vue를 쌍두마차로 재사용성을 강조하는 컴포넌트 활용 기반의 현대적인 기술로 전환되는 추세기 때문에 여기에서는 기술구조 상 제이쿼리를 사용하는 것이 맞지 않고,

기본이 되는 바닐라 js를 공부하면,  웹 개발의 기초 원리, 프로그래밍 언어의 핵심 개념에 대한 이해가 깊어진다고 하고,제이쿼리는 업데이트가 더디고 곧 사장될 기술이다! 란 얘기도 있었으나..

 

아직도 많은 프로젝트에서 제이쿼리를 사용하는 곳이 많고, 제이쿼리 파생 라이브러리도 많다고 하기 떄문에

결론 : 모두 공부하기로했다!

(참고로 구글링 中 봤던 여러 개발 커뮤니티에서도 아직도 바닐라 VS 제이쿼리 관련 주제로 키보드 배틀이 벌어지고 있었다....)

 

---

 

 

 

먼저 각각의 장단점

Vanilla JavaScript  바닐라JS

 

장점:

• 경량성: 별도의 라이브러리나 프레임워크 없이 순수한 자바스크립트만으로도 웹 개발이 가능
• 성능: 브라우저가 자바스크립트를 직접 해석하므로 실행 속도가 제이쿼리보다 빠를 수 있음

• 학습 적용성 : 다른 라이브러리나 프레임워크를 이해하는 기초가 됨.

   

단점:

• 크로스 브라우징: 각 브라우저마다 동작이 조금 다를 수 있어 크로스 브라우징에 대한 처리가 필요.
• 복잡성: 더 복잡한 작업을 구현하거나 DOM 조작을 다룰 때 코드가 복잡해 질수 있음
• 반복적인 코드: 특정 기능을 반복적으로 구현해야 할 경우, 반복적인 코드 작성이 필요.

jQuery 제이쿼리

 

장점:

• 간편한 DOM조작 : DOM 조작을 간편하게 처리할 수 있는 다양한 메서드와 선택자를 제공.
• 크로스 브라우징 : 크로스 브라우징에 대한 처리를 대부분 내부에서 처리해주기 때문에 일관된 동작 기대 가능.
• 애니메이션 및 효과 : UI 요소의 애니메이션 및 효과를 쉽게 구현할 수 있는 메서드를 제공.
•  
• 플러그인 : 다양한 플러그인이 제공되어 웹 개발 작업을 빠르게 구현할 수 있음. 

단점:

• 제이쿼리 라이브러리의 크기가 상대적으로 크기 때문에 페이지 로딩 속도가 느려질 수 있음
  (사실 간단한 작업에서는 미미)
• 커스터마이징 한계: 제이쿼리의 기능을 수정하거나 커스터마이징할 떄 일부 제한이 있을 수 있음.

 

사실 jQuery는 js 라이브러리 중 하나지만 비교 대상으로서의 차이점

	바닐라 자바스크립트(Vanilla JavaScript)	제이쿼리(jQuery)
문법과 API 복잡도	브라우저에서 기본적으로 지원하는 언어로, 브라우저 내장 함수와 기능을 직접 사용.	단순하고 일관된 API를 통해 DOM 조작, 이벤트 처리, AJAX 요청 등을 간편하게 수행할 수 있도록 도와줌.
크기	웹 페이지에 추가적인 라이브러리 로딩 없이 사용.	별도의 라이브러리 파일을 로딩해야 하므로 페이지로딩 시간이 조금 더 길어질 수 있음.
성능	최신 브라우저의 최적화된 엔진을 사용하여 실행되므로 일반적으로 빠른 성능을 제공.	라이브러리를 로딩하고 추상화된 함수를 사용하기 때문에 일부 상황에서는 성능이 느릴 수 있음.
유지보수	브라우저 업데이트나 라이브러리 변경 없이도 동작	라이브러리 버전 업데이트나 호환성 문제가 발생할 수 있음. 사용 빈도가 줄어들고 있어서 유지보수에 주의가 필요.

[출처] 제이쿼리(jQuery) vs 바닐라 자바스크립트(Vanilla JavaScript)|작성자 joje