안녕하세요. 이번 시간부터 제이쿼리(jQuery) 강좌를 하겠습니다! 자바스크립트하면 제이쿼리부터 떠올리는 분들이 많습니다. 저도 자바스크립트를 제이쿼리부터 배웠습니다. (절대로 이렇게 하면 안 됩니다... 자바스크립트를 먼저 배운 후 제이쿼리를 하셔야 합니다. 혹시 자바스크립트를 건너뛰고 제이쿼리를 하려고 하는 분들은 돌아가주세요.)
제이쿼리는 전체 웹사이트의 70% 이상이 사용하고 있는 라이브러리입니다. 다시 한 번 강조하자면 라이브러리이지 자바스크립트와 별개의 언어가 아닙니다. 지식in 활동을 하면서 많은 분이 제이쿼리를 자바스크립트로 바꿔달라고 하시는데, 도대체 어떻게 이미 자바스크립트인 것을 자바스크립트로 바꾸라는 건지 잘 모르겠습니다. ㅎㅎ
어쨌든 제이쿼리는 2016년 8월 현재 3버전까지 나왔습니다. 하지만 많은 분들은 계속 1버전을 쓰고 계시죠. 일단 1버전은 저주받은 IE8,9를 지원합니다. 그래서 한국에서 인기가 많습니다. 사실 3버전도 지원하지만 아직 덜 알려진 것 같네요.
제이쿼리의 단점은 일단 무겁습니다. 제이쿼리 없이 순수 자바스크립트만 사용한 코드보다는 속도가 10에서 100배정도 느립니다. 어차피 그래봤자 ms 차이라서 느낌이 안 나긴 하지만요. 그리고 모듈화가 안 되어있어 저처럼 React나 Angular을 사용하시는 분은 제이쿼리를 사용하는 게 좀 겁나긴 합니다. (저도 이 블로그를 만들 때 사용하지 않았습니다)
제이쿼리의 장점은 코드가 보기 좋습니다. 이게 제일 큰 장점이죠. 웹디자이너분들처럼 디자인을 위한 제이쿼리를 쓰시는 분들에게는 더할 나위 없죠. document.getElementById('zero')하는 것보다 $('#zero')하는 게 훨씬 좋잖아요? 그리고 저주받은 IE와 기타 브라우저에 대한 지원이 좋습니다. 하나의 코드로 여러 브라우저에서 다 호환되는 것이 진짜 큰 장점입니다. 플러그인을 지원해서 원하는 기능을 추가할 수도 있습니다. 플러그인이 어떻게 동작하는 지 알고싶으시다면 제이쿼리 분석 강좌에서 다뤄놨습니다. 애니메이션과 AJAX도 간단하게 할 수 있어서 좋죠. 이렇게 단점보다 장점이 큽니다. 그래서 제일 인기있는 라이브러리가 되지 않았을까요?
일단 제이쿼리를 다운로드받아야 하는데 크게 세 가지 방법이 있습니다. 제이쿼리 홈페이지에 가서 파일로 다운받아서 홈페이지 안에 넣는 방법, cdn을 사용하는 방법, bower이나 npm같은 패키지 매니저를 사용하는 방법이 있습니다. 그 중에 제일 간단하고 속도도 괜찮은 cdn을 사용하는 방법을 보겠습니다.
<script src="//code.jquery.com/jquery-latest.min.js"></script>이 코드를 html에서 다른 자바스크립트보다 위에 넣어주면 됩니다. jquery1.11.1이 설치됩니다.
이 강좌에서는 최대한 지속적으로(1버전부터 3버전까지 호환되는) 사용할 수 있는 함수만 알려드리겠습니다. bind 같이 없어진 함수는 제외하고요.
다음 시간부터 본격적으로 제이쿼리를 다뤄볼 겁니다. 선택자부터 시작하겠습니다. 자바스크립트 중급 강좌까지는 보고 오셔야 합니다.
익명