jquery로 당신이 할 수 있는 것

jQuery는 javascript 라이브러리다. 프론트단의 자바스크립트 개발을 위한 여러가지 기능을 추상화해서 제공함으로써 불과 몇 년전에 개발자가 바닥부터 했어야 할 코딩의 양과 시간을 혁신적으로  줄여주고 jQuery를 활용하는 것 만으로도 개발단계에서 크로스브라우징 문제를 해결할 수 있게끔 해준다.  

그럼 jQuery로 할 수 있는 것은 무엇일까? 몇가지 생각해보면 다음과 같이 정리할 수 있겠다. 

1. 문서에 있는 여러 요소(element)에 손쉽게 접근할 수 있다. 

원어 그대로 앨리먼트라고 표현했는데 이것은 다름 아닌 문서객체모델에서의 각 개체를 말한다. 다시말해 브라우저가 HTML 문서를 인식할 때 얘기하는 DOM(Document Object Model)에서의 바로 그 element를 말하는데 예전에 jQuery를 사용하지 않았을 때에는 이러한 DOM에서 내가 필요로 하는 개체나 문서의 일부분에 접근하기가 매우 번거롭고 귀찮은(=노가다) 작업이었다. 

jQuery는 선택자(selector)라는 개념을 제공하는데 이 선택자를 통해 내가 원하는 문서의 부분부분을 정확하게 접근하여 원하는 방식으로 다룰 수 있게 해준다. 

$('div.article').find('li');

이 한줄의 코드를 통해 article이라는 이름의 class 속성을 가진 div 태그내의 li 태그에 접근할 수 있다. 

2. 웹페이지의 모양을 변경할 수 있다. 

CSS는 웹페이지의 문서를 렌더링하여 브라우저를 통해 사용자에게 보여줄 때 강력한 기능을 제공하는데  모든 웹브라우저가 동일한 표준을 지원하지는 않기 때문에 개발자는 jQuery를 통해 그러한 갭을 메울 수 있다. 즉, jQuery가 제공하는 기능을 통해 모든 브라우저에 걸쳐 지원되는 동일한 표준코드로 브라우저간의 차이를 해결할 수 있게 해준다. 

$('ul > li:last').addClass('active')

위의 코드를 통해 리스트 형식의 문서구조에서 가장 마지막 아이템(li) 개체에 active라는 CSS 스타일을 바로 적용할 수 있다. active 클래스에 정의된 내용에 따라 이 아이템의 스타일이 변경된다. 

3. 문서의 내용을 동적으로 변경할 수 있다.

브라우저를 통해 이미 렌더링된 문서의 내용을 동적으로 변경할 수 있다. 가령 사용자가 어떤 액션을 하거나 하는 등의 이벤트가 발생했을 때 어떤 텍스트의 내용을 변경한다던가 이미지를 바꾼다던가 또는 리스트의 정렬 순서를 변경하는 것과 같은 결과를 줄 수 있다. 물론 jQuery를 사용하지 않고도 이러한 작업을 할 수 있지만 개발하고자 하는 웹사이트가 거의 모든 브라우저를 지원해야 하는 니즈를 가지고 있다면 jQuery없이 그러한 코딩을 한다는 것에 재앙에 가까울 것이다. 

$('#container').append('<a href="more.html">more</a>');

위의 코드는 HTML 문서에서 container라는 id를 가진 div 영역의 마지막에 more라는 a 태그를 추가하여 사용자가 클릭하게 되면 more.html 문서를 보여주는 아주 일반적인 코드라 할 수 있다. 

4. 사용자의 액션에 따른 인터랙션을 원활히 처리할 수 있다.

더 이상 HTML문서의 a 태그나 submit 버튼에 이벤트 핸들러 함수를 코딩하지 않아도 된다. 

$('button.show-details').click(function() {
   $('div.details').show();
});

위 코드는 사용자가 show-details라는 class 속성을 가진 버튼을 클릭하면 details라는 class 속성을 가진 div 영역의 내용을 보여주게끔 한다. 위와 같이 단지 몇 줄의 코딩만으로 사용자의 클릭에 따른 여러가지 이벤트를 정말 수월하게 핸들링할 수 있다. 게다가 서로 다른 브라우저간의 차이를 염려하지 않아도 된다.   

5. 애니메이션과 같은 동적 변화를 쉽게 처리할 수 있다.

클릭과 같은 사용자의 반응에 즉각적인 피드백을 주기 위해 많은 시각적 효과를 주어야 했다. 가령 클릭하면 어떤 섹션의 내용이 서서히 나타난다던가 또는 이미지가 슬라이딩 되는 것과 같은 효과를 주곤 하는데 jQuery 는 단 몇줄의 코드만으로도 이러한 시각적 효과를 훨씬 쉽게 구현할 수 있는 라이브러리를 제공한다. 

$("button").click(function(){
  $("p").fadeIn();
});

위와 같이 버튼을 클릭할 경우 p 태그의 내용을 서서히 보여주는 효과를 줄 수 있다.  

6. 브라우저 리프레쉬없이 서버로부터 정보를 가져올 수 있다.

새로운 내용을 가져오려면 기본적으로 서버를 재연결하여야 하는데 그러려면 브라우저는 문서를 새로 로딩해야 했다. 가령 게시판의 글을 읽고 댓글을 달면 브라우저가 깜빡거리며 다시 새로운 댓글을 가져와 보여주는 것처럼... 사용자 중심의 UI/UX가 중요해진 요즘은 Ajax (Asynchronous JavaScript and XML)라는 코드패턴을 통해 이러한 브라우저 리프레쉬 없이도 새로 갱신된 데이터를 가져와 현재의 문서에 바로 반영하여 보여주는 것이 일반적인 추세다. 

하지만 Ajax는 브라우저에 따라 구현해야 하는 코드가 많이 다른데 jQuery가 제공하는 Ajax 라이브러리를 사용하면 이러한 브라우저간 차이로 인한 기술적 문제에 더 이상 신경쓰지 않아도 되므로 개발자가 서버쪽의 기능구현에만 집중할 수 있게 해준다. 

7. 자바스크립트로 처리하던 업무를 단순화시켜준다.

자바스크립트로 배열을 처리하거나 할 때 기존의 자바스크립트 언어로 처리하던 복잡한 코드가 더 이상 필요하지 않을만큼 같은 업무를 jQuery를 통해 매우 간단하고 단순하게 구현, 처리할 수 있다. 

$.each([ 52, 97 ], function( index, value ) {
  alert( index + ": " + value );
});

for loop 코드없이도 이렇가 간단히 2개의 원소를 배열의 내용을 출력할 수 있다.  

결론적으로 최대한 모든 브라우저에서 동일한 모양과 액션을 보여주고자 한다면 가장 효과적이면서 효율적인 선택은 jQuery가 되겠다.