jQuery 지양하기
You (Might) Don’t Need jQuery
You (Might) Don’t Need jQuery
웹에이전시에서 작업한 사이트들을 살펴보면 jQuery 기반입니다. 심지어 1.x 대를 아직 사용하는 곳도 있고요… (IE 6 지원 때문이라기엔 사용한 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가 훌륭한 라이브러리지만, 그 중요성이 많이 퇴색했으므로 네이티브로 구현하자는 게 취지 같습니다.
한국어 문서 또한 있습니다.
사용법은 매우 간단합니다.
input box에 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");
});
}이게 아닐 수도 있지만, 인터넷 찾아보니 이렇게 사용하는 것 같습니다.
또, 원하는 효과나 방식을 검색해 나오는 stack overflow 답변의 코드가 jQuery가 압도적으로 많습니다. jQuery에 해당하는 부분을 일일이 바꿔줄 수는 있지만, 코드가 복잡하거나 어려울 땐 Copy & Paste가 불가능합니다.
또 plugin으로 한 번에 구현이 가능한데, 그러질 못해 대안을 찾아야 할 때 jQuery가 그립습니다.