![[Javascript,jQuery] 제이쿼리, 라이브러리는 라이브러리일 뿐](/images/posts/jquery.jpg)
TCP 스쿨은 제이쿼리에 대해 이렇게 말합니다.
제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다.
제이쿼리는 자바스크립트의 사용을 아주 편리하게 해주지만 말 그대로 라이브러리이기 때문에 자바스크립트를 잘 알수록 제이쿼리를 잘 활용할 수 있습니다.
하지만 속도가 느리다는 단점이 있기 때문에 언제나 의존해서 사용할 수는 없습니다. 그렇기에 제이쿼리는 굳이 배우지 않아도 된다는 의견도 있습니다. 그와는 다르게 학원에서는 시간이 부족하다 보니 자바스크립트의 아주 기초만 배우고 바로 제이쿼리 수업으로 넘어왔습니다. (제이쿼리 = 저투자 고효율?)
이것이 언젠가 저의 발목을 잡을 것 같아서 혼자서라도 바닐라 자바스크립트(라이브러리를 사용하지 않은 순수한 자바스크립트)를 공부하기로 했고 현재 만들고 있는 포트폴리오 사이트는 가능한 한 제이쿼리를 사용하지 않으려고 합니다.
바뀐 순서로(JS 기초 - jQuery - JS 순으로) 공부를 하다 보니 느끼는 것이 있었습니다.
1. 제이쿼리는 확실히 편리합니다.
DOM에 접근하는 것이 CSS에서 사용하는 것과 거의 동일합니다.
$('.class'); // 제이쿼리에서 모든 클래스에 접근
const everyClass = document.querySelectorAll('.class');
for(var i=0; i<everyClass.length; i++) {
everyClass(i);
}; // 자바스크립트에서 모든 클래스에 접근
특히 모든 Class에 접근하는 것이 정말 용이합니다. 순수한 자바스크립트를 사용할 경우 for문을 사용하여 접근해야 해서 코드가 길어집니다.
마우스 이벤트 Hover의 경우, 제이쿼리는 hover() 메소드만 사용하면 되지만 자바스크립트는 onmouseover, onmouseout 두 가지 이벤트를 사용해야 합니다.
2. 공부의 순서가 중요하다.
자바스크립트의 코드를 제대로 숙지하지 못한 채로 제이쿼리르 공부하다 보니 어떤 코드가 제이쿼리의 코드인지 헷갈리네요. 그나마 다행인 것은 제이쿼리 라이브러리를 사용하면서 순수 자바스크립트의 코드도 사용 가능하다는 것입니다.
3. 라이브러리는 라이브러리로 사용해야 한다.
당연하지만 자바스크립트와 제이쿼리의 논리의 흐름은 동일합니다. 다만 제이쿼리는 이 흐름을 축약 시킨 것입니다. 그래서 자바스크립트를 잘 알면 제이쿼리를 쉽게 사용할 수 있지만 제이쿼리를 잘 다루더라도 자바스크립트는 잘 사용하지 못할 수 있습니다.
제이쿼리로는 손쉽게 구현하던 것들을 바닐라 자바스크립트로만 구현하려 하니 쉽지 않습니다. 제이쿼리가 축약해준 소스들을 이해해야 제이쿼리와 동일하게 구현이 가능합니다.
마침
제이쿼리는 생각없이 사용하기 너무 좋은 라이브러리인 것 같다. 하지만 그렇게만 사용하기에는 섭섭하다. 소스 분석을 통해(분석된 자료를 통해) 원리를 이해하고 사용한다면 바닐라 자바스크립트에서도 충분히 라이브러리의 장점을 갖춘 코드를 사용할 수 있지 않을까?
아, 생각보다 자바스크립트 라이브러리 종류가 많던데 실제 사용해보지는 않더라도 어떤 특징이 있는지 정도는 공부해봐야겠다.