안녕하세요. 이번 시간에는 제이쿼리가 정말 필요한지에 대해 제 의견을 말하는 시간을 갖겠습니다. 현재 제이쿼리의 점유율을 보면 70%가 넘습니다. 자바스크립트를 사용하지 않는 페이지를 제외하면 90%가 넘습니다. 그리고 신기하게도 꾸준히 유지됩니다. 대부분의 사람들이 웹사이트를 만들 때 일단 제이쿼리부터 다운받고 본다는 얘기죠.
이 글을 쓴지 1년이 지난 지금은 다음과 같습니다. 점유율이 더 올라갔네요.
하지만 제이쿼리가 필수적인 것은 아닙니다. 제 블로그도 제이쿼리 없이도 잘 돌아갑니다. (허접한 제 블로그를 예로 들어서 죄송합니다...) 지금까지 강좌에서 제이쿼리 코드 밑에 항상 순수 자바스크립트 코드를 같이 썼습니다. 눈치 채셨나요? 모든 제이쿼리 메소드를 순수 자바스크립트로 바꿔 쓸 수 있습니다. 그리고 프로그래머라면 제이쿼리 없이도 순수 자바스크립트로 같은 기능을 구현할 줄 알아야합니다.
그리고 현재 추세가 자바스크립트 자체에서 쉽게 DOM에 접근 가능하도록 메소드를 추가하고 있습니다. 점점 더 제이쿼리같은 편의 기능을 제공하는 것이죠. 또한 대부분의 브라우저가 HTML5와 ES2015 등의 표준을 따르기 때문에 브라우저 간 호환성 문제도 크게 개선되고 있습니다. 이제 IE 점유율만 줄어들면(우리나라에서는 먼 얘기...) 호환성은 크게 걱정 안 해도 될 거 같습니다.
제이쿼리의 가장 큰 단점은 속도입니다. 속도가 순수 자바스크립트로 코딩한 것보다 현저히 느립니다. 특히 애니메이션을 할 경우, 브라우저가 지원하는 css 애니메이션보다 느린 경우가 많습니다. (브라우저는 특정 상황에서 GPU를 사용해서 애니메이션을 표현하기 때문에 훨씬 빠릅니다.) 이게 문제가 되는 게 구형 브라우저일수록 더 느립니다. 제이쿼리를 하는 이유가 IE를 쉽게 지원하기 위해서이지만, 오히려 구형 브라우저에서 속도 문제를 야기할 수 있습니다.
위의 이미지를 보면, jQuery를 사용할 때 getElementById보다 10배 느린 것을 볼 수 있습니다. querySelector보다는 다섯 배 느리고요. 이렇게 느린 속도가 조금씩 누적되다보면 상당한 차이를 야기할 수도 있습니다.
또 다른 단점은 코드 관리가 어렵습니다. 제이쿼리는 코드가 간결하기 때문에 사람들이 쉽게 생각하는 경우가 있습니다. 코드가 짧기 때문에 평소보다 코드를 많이 붙이게 되고 코드가 꼬이거나 중복되는 경우가 많습니다. 특히 자바스크립트를 어려워하시는 초보분들이 많이 사용해서 제이쿼리의 원리를 모른 채 코딩하여 코드의 품질이 낮아지는 문제가 있습니다.
그리고 위의 단점과 이어지는 문제인데, 사람들마다 너무 다른 버전을 사용하고 있습니다. 옛날 버전을 사용하는 분들은 대부분 최적화되지 않거나 버그가 있는 제이쿼리를 사용하고 있을 겁니다. 1버전은 2016년 8월 기준으로 1.12.4까지 나왔고 2버전은 2.2.4 까지 나왔습니다. 3버전은 3.1입니다. 참고로 IE 지원이 필요 없는 분들은 2나 3버전을 사용하면 용량을 더 줄일 수 있습니다.
그리고 Promise의 구현이 가짜라는 등의 여러 가지 호환 문제도 있습니다.
대안
제이쿼리의 대안은 우선 document.querySelector같은 순수 자바스크립트 메소드입니다. 대부분의 선택자를 대체할 수 있습니다. 속도도 훨씬 빠릅니다. 물론 선택자를 제외하고 태그를 조작하는 부분은 직접 구현해주어야 하지만요. 만약 직접 코딩하기는 싫지만 큰 용량이 부담 될 때엔 가벼운 제이쿼리가 있습니다. 바로 zepto.js입니다. 제이쿼리 용량의 1/3 밖에 안 되고, 모듈화 되어있어 필요한 기능만 받을 수 있습니다.
AJAX 때문에 jQuery를 사용하시는 분도 있는데, AJAX만 필요할 때는 axios와 superagent가 있고요. jQuery의
일부 기능만 필요하다면 그 기능에 특화된 라이브러리를 찾아보세요.
하지만 저도 일반 웹사이트를 만들 때는 제이쿼리부터 다운로드받고 시작합니다. 편하긴 하거든요. 제이쿼리는 일종의 도구이기 때문에 알아두시면 좋긴 합니다. 사실 어떠한 도구든 배워서 나쁠 것은 없습니다. 다음 시간에는 제이쿼리의 성능을 올리기 위한 방법에 대해 알아보겠습니다!
익명
