티스토리 뷰
1. jQuery의 설명
제이쿼리(jQuery)는 웹 개발에서 다양하고 복잡한 작업을 단순화할 수 있는 빠르고 간결한 다기능 자바스크립트 라이브러리입니다. 제이쿼리를 사용한다면 웹 페이지를 자바스크립트만 사용하였을 때보다 더 동적이고 사용자와 상호작용할 수 있게 할 수 있습니다. 심지어 jQuery 로고의 그림에 기재되어 있는 "write less, do more"라는 슬로건을 가지고 있습니다. 그렇기 때문에 입문자와 전문가 모두 편리하게 간단하게 사용할 수 있는 가벼운 오픈 소스 라이브러리입니다. 제이쿼리는 2006년에 자바스크립트를 작성하는 것에 어려움이 있었던 존 레식(John Resig)에 의하여 라이브러리로 작성되었습니다. 우리가 방문하는 웹 사이트의 대부분이 제이쿼리를 사용하고 있다는 것이 과언이 아닐 정도로 정말 많은 사람들이 사용하고 있으며, 그 이유 중 하나는 제이쿼리는 MIT 라이센스 하에 무료로 배포되기 때문입니다. 제이쿼리를 웹 페이지에서 사용하려면 2가지 방법이 있습니다. 첫 번째는 직접 제이쿼리 공식 사이트에서 다운로드한 제이쿼리 js 파일을 자바스크립트 파일을 포함시키는 방법과 동일하게 HTML 문서의 <head> 부분에 포함시키면 됩니다. 두 번째는 다운로드하지 않고 공개 서버로부터 네트워크를 통하여 웹 페이지를 실행시킬 때마다 다운로드할 수 있도록 CDN(Content Delivery Network)를 사용하는 방법이 있습니다. 보통 Google, Microsoft 등이 CDN을 제공하고 있으며 제이쿼리를 사용하기 위한 코드는 앞서 언급했던 제이쿼리 홈페이지에서 CDN으로 사용할 수 있도록 제공해 주는 코드를 복사하여 적용시키면 됩니다. 단점으로는 다른 공개 서버를 사용하는 것이기 때문에 속도가 느리다고 할 수 있습니다.
2. jQuery의 특징
제이쿼리의 주요 목적은 자바스크립트를 간단하고 빠르게 사용하면서 다양한 기능을 제공하는 것입니다. 주요 특징과 기능을 살펴보도록 하겠습니다. 제이쿼리는 DOM을 쉽게 조작하고 제어할 수 있는 다양한 메서드와 함수를 제공할 수 있습니다. 예를 들어 HTML 요소를 선택한 후에 해당 요소의 속성을 변경하고 요소를 생성하거나 삭제까지 할 수 있습니다. 다음으로 제이쿼리는 이벤트를 간편하게 쉽게 처리할 수 있는 기능을 제공합니다. 자바스크립트에서는 if 문을 사용하여 현재 요소의 상태를 체크하는 로직을 작성해야 했다면 제이쿼리에서는 바로 요소의 클릭 상태일 때 어떤 동작을 시킬 것인지 바로 정의할 수 있습니다. 그렇기 때문에 제이쿼리를 사용하면 HTML 요소를 부드럽게 움직이도록 하게 하거나 나타나거나 사라지게 끔 애니메이션 효과를 쉽게 추가할 수 있습니다. 그리고 jQuery의 꽃이라고 할 수 있는 가장 큰 특징은 AJAX를 지원한다는 것입니다. AJAX(Asynchronous JavaScript and XML)은 동적인 웹 페이지를 만들기 위해 웹 페이지 전체를 로딩하지 않고도 웹 페이지의 일부분만 서버에서 데이터를 통신하여 변경할 수 있는 기법 중 하나입니다. 제이쿼리는 이러한 AJAX의 요청을 더욱 단순화하고, 데이터 통신하여 웹 페이지의 데이터를 쉽게 업데이트하도록 해줍니다. 마지막으로 제이쿼리는 다양한 플러그인을 지원하여 기능을 더 확장할 수 있습니다. 예를 들어 캘린더 기능, 이미지 갤러리 등의 플러그인을 사용하여 웹 애플리케이션의 기능을 한층 더 성장시킬 수 있게 확장할 수 있습니다.
3. jQuery의 문법 살펴보기
제이쿼리 문장들을 살펴보면 $ 기호를 많이 찾아볼 수 있을 것입니다. 저도 처음에는 $가 무엇을 의미하는지 정말 궁금해 했습니다. $ 기호는 정말 단순하게도 제이쿼리(jQuery)라는 의미입니다. 보통 제이쿼리의 문법은 $(...) 안에 HTML 요소의 선택자를 넣어서 해당 요소에 대해 다양한 이벤트 처리 및 속성 변경을 할 수 있는 구조입니다. 몇 가지 예를 들어보면, $("p").show() 라는 문장은 '모든 <p> 요소를 찾아서 웹 페이지 화면에 표시해 준다'라는 문장입니다. 제이쿼리에서도 마찬가지로 HTML 요소를 선택할 때 선택자를 표현하는 방식이 다양합니다. 방금 예시로 든 문장처럼 모든 요소를 찾는 선택자와 선택자 앞에 점 (.)을 사용하여 클래스 선택자를 사용하는 방법 그와 반대로 단 하나의 요소만 선택할 때는 파운드 (#)를 사용할 수 있는 방법이 있습니다. 그 외의 여러 가지 선택자가 있지만 기본적으로 앞서 말씀드린 3가지가 대부분 많이 사용합니다. 이를 참고한 문장 예시를 살펴보도록 하겠습니다.
$(document).ready(function(){
$("p").hide();
$(".menu").slideup();
$("#check").show();
});위의 제이쿼리 예시를 살펴보면 $document.ready()라는 새로운 구조가 있습니다. 이 구조는 제이쿼리를 사용할 때 반드시 필수입니다. 그 이유는 HTML 문서가 완전히 로드되기 전에 제이쿼리 코드가 실행되는 것을 방지하기 위함입니다. 자바스크립트는 한 라인씩 읽는 인터프리트 언어이기 때문에 항상 문서가 전체적으로 읽고 완전하게 준비가 되었을 때 제이쿼리 작업을 시작해야 합니다. 만약 HTML 문서가 로드되기 전에 제이쿼리 메서드가 실행이 된다면 아직 생성되지 않은 HTML의 요소를 발견하지 못하여 속성 변경 및 이벤트 처리가 불가해집니다. 더 자세한 기능과 메서드들은 앞으로 포스팅으로 자세하게 알려드리도록 하겠습니다.
이번 포스팅에서는 현재 웹 사이트들의 대다수가 사용하고 있고 간결하고 쉽다는 jQuery의 특징들에 대해 알아보게 되었습니다. 제이쿼리와 자바스크립트의 문법 간의 차이가 살짝 있지만 그래도 자바스크립트 기반으로 만들어진 오픈 라이브러리이기 때문에 입문자가 직접 모르는 내용을 찾아가면서 학습하기에도 자료들이 워낙 다양하게 많이 존재하고 있어 도움이 될 수 있을 것입니다.