개발
jQuery와 javascript 그리고 es6에 대한 고찰
by
오랜만에 개발글 하나 써보고 싶어서 그간 좀 궁금했던 부분에 대해 정리해보았다.
바로 JavaScript 에 대한 이야기이다.
너무 복잡하고 고수입장에서 이야기하기보다 현실적인 웹 개발자나 퍼블리셔 입장에서 좀 생각해보고자 한다.
ES5와 jQuery
나만해도 자바스크립트는 HTML 문서를 만드는데 그 위에 복잡한 기능을 구현하기 위한 사양으로 가져다 쓰는 정도로 입문하게 되었다.
학부생 시절에는 es5 문서니 뭐니 과제를 했던거 같긴한데, 내가 실질적으로 웹을 만지고 다녔을땐 자바스크립트보다는 제이쿼리(jQuery)가 이미 대세였다.
// ES5
document.getElementById("btn").addEventListener("click", function() {
alert("clicked");
});
// jQuery
$("#btn").click(function() {
alert("clicked");
});Copy제이쿼리는 자바스크립트에 없었던 선택자(Selector)기능을 필두로 여러 복잡하게 구현해야했던 페이드, 슬라이드, 다중 배열처리, 이벤트 할당들을 직관적인 함수로 제공했다.
그러다보니까 웹 퍼블이나 개발을 하는 입장에서 제이쿼리는 뭐 거의 필수 스크립트에 해당했다.
오히려 그때는 순수 자바 스크립트로 돌리면 코드가 더 더럽다고 소리가 나올정도였으니 말이다.
다만 제이쿼리 라이브러리의 무게는 감수해야되는 그런 느낌이었다.
다만 2015년도에 ES6가 발표되자마자 뭔가 분위기가 바뀌기 시작했다.
그렇다고 바로 제이쿼리 유행이 끝난건 아니었지만 슬슬 느려터진 제이쿼리는 들어내고 이제 ES6로 퍼블하고 개발하자라는 이야기가 곳곳에서 나오기 시작했으니 말이다.
채 5년이 지나기도전에 기업의 구인공고에는 필수 스킬에서 jQuery가 빠지고 ES6가 들어가기 시작했다.
ES6
과연 ES6가 얼마나 좋길래 이렇게 제이쿼리를 대체하게 된것일까?
일단 제이쿼리에 있던 혁신적인 선택자 기능이 ES6에 공식적으로 편입되었다.
// ES5
var el = document.getElementById("myBtn");
// ES6+
const el = document.querySelector("#myBtn");
const list = document.querySelectorAll(".items"); Copy특히나 이 선택자는 CSS에서 사용했던 선택자와 문법이 동일하기 때문에 제이쿼리에서 그랬듯이 ES6에서도 빠르게 시용되기 시작했다.
두번째로는 복잡했던 이벤트 바인딩 문제가 해결되었다.
// ES5 (IE 대응 고려하면 복잡)
el.attachEvent ? el.attachEvent("onclick", handler) : el.addEventListener("click", handler);
// jQuery
el.on('click', function () {});
// ES6+
el.addEventListener("click", handler);Copy이 부분은 확실히 문제가 되었던 자바스크립트 코어가 개선되면서 굳이 제이쿼리 방식을 쓰지않아도 되는 장점이 더 크다고 생각한다.
실제로 이벤트리스터 방식의 관리로 통합된 이후 인터렉션 관련 스크립트 작업을할때 생각해야하는게 좀더 직관적으로 변하긴 했기 때문이다.
그리고 위에서 언급했던 페이드 같은 애니메이션은 이제 공식에서 CSS쪽으로 밀어주는경향이 강하다보니 ES6에서는 해당기능을 과감하게 빼고 클래스 제어로 유도하게 되었다.
// jQuery
$("#box").fadeIn();
// ES6+
const box = document.querySelector("#box");
box.classList.add("fade-in"); // CSS에서 애니메이션 정의
/* CSS */
.fade-in {
opacity: 0;
animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}Copy어찌보면 이 부분은 교통정리를 해줬다라는게 더 크게 다가오는게 아닐까 싶다.
이외에도 Ajax 표준 API(
fetch)를 정리하고 클래스를 직접적으로 조작할 수 있는 classList의 추가 등의 여러가지 제이쿼리에서 제공했던 기술이 자바스크립트에 들어온 상황이 되어버렸다.이러다보니 크로스브라우징도 어느정도 잡히게 되고 자바스크립트 자체의 문제가 많이 해결되자 굳이 외부 라이브러리인 jquery는 쓸필요가 없는 느낌이 되어비린 것이다.
뭐 결국 지금와서는 jQuery를 프로젝트에서 아예 배제하면 웹사이트 속도도 빨라지고 나름 표준 스크립트 개발이 되기때문에 안쓰는게 좋긴하다.
심지어 요즘은 AI가 코드를 작성해주는데 있어 다른 라이브러리에 종속적인 코드를 만들기보다 순수 자바스크립트로 만드는게 코드관리입장에서도 훨씬 좋기때문에...
여러가지 의미로 자바스크립트도 다음단계로 넘어갔다라는 느낌이 강하다.
한술더떠서 요즘은 그위에 리액트니 뭐니 여러가지 앱 프레임워크가 돌아가는 수준이니...
제이쿼리는 이제 보내줘야하는 과거의 산물이 아닐까 싶다.
#JavaScript
0
개의 댓글