이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌1 - jQuery - 2년 전 등록

jQuery(제이쿼리)

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간부터 제이쿼리(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 같이 없어진 함수는 제외하고요.

다음 시간부터 본격적으로 제이쿼리를 다뤄볼 겁니다. 선택자부터 시작하겠습니다. 자바스크립트 중급 강좌까지는 보고 오셔야 합니다.

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

1개의 댓글이 있습니다.
일 년 전
2016-12-25 잘봤습니다