jQuery 지양하기

You (Might) Don’t Need jQuery

Dong-gri
Dong-gri
Aug 19 · 5 min read

웹에이전시에서 작업한 사이트들을 살펴보면 jquery기반입니다. 심지어 1.x 대를 아직까지 사용하는 곳도 있구요… (ie6지원때문이라기엔 사용한 css가 지원안함.)

길고 어려운 javascript때문에 플러그인도 많고 상대적으로 쓰기 쉬운 jQuery를 많이 사용해왔으나 요즘 추새가 탈 jquery 이므로 저 또한 jQuery 대신 순수 javascript(ES숫자로 버전을 나누는것 같지만 잘 모르므로)를 사용하는 시도를 하고 있습니다.

확실히 과거에 비해 현재 javascript는 jQuery와 비슷해진 부분이 많고 쓰기도 쉬워졌습니다.

학습을 위하거나 포트폴리오 등 시간에 구애받지 않는 프로젝트라면 부담이 덜한텐데, 실무에 이를 적용하려하니 여러자료도 살펴봐야하고 오류났을때의 소요시간이며 여러모로 부담되는 점이 많습니다.

그러다가 괜찮은 서비스(혹은 프로젝트?)를 찾아 다른분들과 함께 나누고자 합니다.

You Dont Need jQuery

오늘날 프론트엔드 개발 환경은 급격히 진화하고 있고, 모던 브라우저들은 이미 충분히 많은 DOM/BOM API들을 구현했습니다. 우리는 jQuery를 DOM 처리나 이벤트를 위해 처음부터 배울 필요가 없습니다. React, Angular, Vue같은 프론트엔드 라이브러리들이 주도권을 차지하는 동안 DOM을 바로 처리하는 것은 안티패턴이 되었고, jQuery의 중요성은 줄어들었습니다. 이 프로젝트는 대부분의 jQuery 메소드의 대안을 IE 10 이상을 지원하는 네이티브 구현으로 소개합니다.

노트: jQuery는 여전히 훌륭한 라이브러리이며 많은 유즈 케이스를 갖고 있습니다. 원하지 않으신다면 마이그레이트하지 않으셔도됩니다.

외국에서도 jQuery를 탈피가 대세인가 봅니다. 지금도 여전히 jQuery가 훌륭한 라이브러리지만, 그 중요성이 많이 퇴색했으므로 네이티브로 구현하자는게 취지 같습니다.

한국어 문서 또한 있습니다.

사용법은 매우 간단합니다.

inputbox에 jQuery에서 사용하던 함수(?)를 적거나 네이티브 함수를 입력하고 하단의 ie지원 여부를 선택하기만 하면 됩니다.

그러면 위와 같이 1:1로 비교해 대체가능한 함수를 쉽게확인할 수 있습니다.


jQuery가 그리울 때

jQuery에서는 class에 대해 $(“.class”) 하나만으로 해당하는 엘리트먼트에 이벤트를 적용하거나 효과를 줄 수 있습니다. 반면 네이티브에서는

querySelectorAll

이 녀석을 사용해야 합니다. 그냥 querySelector 를 사용하면 최상단에 적용된 요소만 지정되기 때문입니다.

더 불편한 것은 querySelectorAll을 사용했다 해서 이벤트를 먹인다고 모든 요소에 이벤트가 적용되는 것이 아니라 for 문으로 배열 하나하나에 이벤트를 지정해야 한다는 점입니다.

const imgSliderNext = document.querySelectorAll("ul.sliderControl button.next");

for (let i = 0; i < imgSliderPrev.length; i++) {
imgSliderPrev[i].onclick = (() => {
imgSlider.goTo("prev");
});
}

이게 아닐 수도 있지만, 인터넷 찾아보니 이렇게 사용하는 것 같습니다.

또, 원하는 효과나 방식을 검색해 나오는 stackoverflow의 답변의 코드가 jQuery가 압도적으로 많습니다. jQuery에 해당하는 부분을 일일히 바꿔줄 수는 있지만, 코드가 복잡하거나 어려울땐 Copy&Paste가 불가능 합니다.

또 plugin으로 한번에 구현이 가능한데, 그러질 못해 대안을 찾아야할때 jQuery가 그립습니다.

guleum

Dong-gri LAB

Dong-gri

Written by

Dong-gri

dongri.me

guleum

guleum

Dong-gri LAB

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade