[출처 tutsplus] jQuery란 무엇인가?

code.tutsplus.com/ko/tutorials/what-is-jquery--cms-26232

jQuery란 무엇인가?

개발자가 되는 것의 좋은 점 중 하나는 특정 언어나 기술들을 잘 다루게 되고 나면 그것들을 다른 개발 영역에도 적용하기가 쉽다는 것입니다.

저희는 최대한 많은 독자들에게 다가갈 수 있도록 특정 언어, 플랫폼 또는 애플리케이션에 대해 궁금한 초보자를 대상으로 하는 콘텐츠를 게시하려고 합니다.

그리고 이 글에서는 jQuery에만 초점을 맞출 것입니다. 특히 jQuery가 제공하는 모든 것들과 그것이 우리를 어떻게 도울 수 있는지에 대해 대략적으로 살펴볼 것입니다. 그리고 최초의 라이브러리로부터 결실을 맺은 몇 가지 프로젝트를 검토할 것입니다.

jQuery의 모든 것

2006년 존 레식(John Resig)이 최초로 출시한 jQuery는 클라이언트 측 솔루션 제작을 손쉽게 만들어주는 크로스 플랫폼 자바크스크립트 라이브러리로 출발했습니다.

jQuery가 출시됐을 당시 그것이 특히 유용했던 이유는 기존 자바스크립트 구현체가 인터넷 익스플로러, 파이어폭스, 결국엔 구글 크롬에 이르기까지(2008년까지는 출시되지 않았던) 호환되지 않는 부분이 있었기 때문입니다.

위키피디아의 jQuery 정의는 다음과 같습니다.

jQuery는 클라이언트 측 HTML 스크립팅을 간소화하기 위해 고안된 크로스 플랫폼 자바스크립트 라이브러리다. jQuery는 오늘날 가장 인기 있는 자바스크립트 라이브러리입니다. 웹 상에서 가장 트래픽이 많은 상위 천만 개의 사이트 중 65%에서 사용 중입니다. jQuery는 MIT 라이선스로 배포되는 무료 오픈소스 소프트웨어입니다.

게다가 jQuery 웹사이트에서는 jQuery를 다음과 같이 표현합니다.

jQuery는 빠르고, 작고, 기능이 풍부한 자바스크립트 라이브러리입니다. jQuery는 여러 브라우저에서 동작하는 사용하기 쉬운 API를 통해 HTML 문서 탐색과 조작, 이벤트 처리, 애니메이션, Ajax 등을 훨씬 더 간단하게 만들어줍니다. 다양성과 확장성을 겸비한 jQuery는 수백만 명이 자바스크립트 코드를 작성하는 방식을 바꿨습니다.

그러나 이것이 개발자인 우리에게는 무엇을 의미할까요? 아마도 모든 라이브러리가 제공하는 것을 이해하는 가장 좋은 방법은 그것이 제공하는 바를 조사하는 것일 것입니다.

1. HTML 문서 탐색

브라우저가 웹 페이지를 렌더링할 때 웹 페이지는 DOM(문서 객체 모델)이라는 시각적 표현이 됩니다. 이 모델은 개념적으로 루트와 리프가 있는 특정 노드로 구성된 트리 자료구조로 모델링될 수 있습니다.

예를 들어, Web Step Book에서 제공하는 다음 그림을 봅시다.

jQuery를 이용하면 DOM의 내용을 쉽게 탐색함으로써 검색할 노드나 요소, 값에 접근하거나 찾을 수 있습니다.

즉, 고유 ID를 가진 div 요소의 텍스트를 찾고 있다면 다음과 같이 손쉽게 할 수 있습니다.

 

/**
 * This code looks for a div with the ID of "my unique element"
 * and then removes it from view.
 */
$( 'div#my-unique-element' ).hide();

 

span 요소를 모두 순회하는 경우에도 다음과 같이 처리할 수 습니다.

 

/**
 * This is the basic way to setup a loop in jQuery. It will
 * take all of the span elements on the page and then
 * allow you to iterate through them.
 */
$( 'span' ).each(function() {
    // Process the span element here
});

 

 

다음 절에서는 페이지를 조작하기 위해 할 수 있는 추가 작업을 보여주기 위해 이 기능을 조금 더 살펴보겠습니다.

물론 이러한 예제는 간단하지만, 특히 메서드 체인을 도입할 때는 좀 더 복잡해질 수 있습니다. 다음 예제를 봅시다.

 

$excerpt.on( 'keydown', function( evt ) {
 
    if ( ( 17 === evt.keyCode || 91 === evt.keyCode ) || 86 === evt.keyCode ) {
 
    if ( -1 === $.inArray( evt.keyCode, keymap ) ) {
            keymap.push( evt.keyCode );
        }
 
    }
 
    }).on( 'keyup', function() {
 
    if ( user_has_pasted_content( keymap ) ) {
 
        resize_textarea( this );
        keymap = [];
 
    }
 
});

 

지금 당장은 코드의 내용을 알지는 못하지만 도우미 함수 및 메서드 체인을 사용해 특정 상황에서 jQuery가 얼마나 유용할 수 있는지 보여줍니다.

말하자면 jQuery의 위력은 DOM을 쿼리하고(그래서 이름이 jQuery인 것입니다) 잘 문서화된 API를 사용해 조작할 수 있다는 데 있습니다(각 함수를 사용하는 방법에 대한 예제가 가득합니다).

누군가는 다른 모든 것들이 그 기능만으로 이뤄져야 한다고 주장할 수 있습니다. 그럼 말이 나온 김에, 그것이 어떤 형태인지 잠깐 살펴보기로 합시다.

 

Advertisement

2. HTML 문서 조작

실제로 DOM을 조작할 때 jQuery에는 방문자가 보는 것을 변경할 수 있는 수많은 기능이 있습니다.

이러한 함수 가운데 어떤 함수는 페이지가 로드될 때마다 표시되지 않는 요소를 표시(show)하거나 숨길(hide) 수 있게 하는 것과 같이 간단합니다. 또 어떤 함수는 새로운 요소를 생성하고 기존 요소 끝에 덧붙이거나(append) 전체 리스트 앞에 추가(prepend)할 수 있게 해줍니다.

class 속성을 추가하기 위해 모든 span 요소를 순회하려고 한다면 다음과 같이 할 수 있습니다.

 

/**
 * This is the basic way to setup a loop in jQuery. It will
 * take all of the span elements on the page and then
 * add a custom class attribute to them.
 */
$( 'span' ).each(function() {
    $( this ).addClass( 'my-custom-class' );
});

 

이것은 jQuery에서 사용할 수 있는 DOM 조작 기능 중 극히 일부에 불과합니다. API를 살펴보면 Manipulation 섹션에서 좋은 예제와 함께 사용 가능한 옵션의 개수를 볼 수 있습니다.

예제를 더 들자면 다음과 같은 것들을 할 수 있습니다.

• 문서나 창, 특정 요소의 높이나 너비를 파악
• 특정 요소의 값 획득(해당 요소가 값을 제공할 경우)
• 클래스명 토글
• 기타 등등

수많은 개발자에게 jQuery가 매력적인 솔루션인 이유 중 하나는 이 글에서 살펴본 모든 함수와 예제가 브라우저 간 호환이 가능하다는 점입니다.

3. 이벤트 처리

자바스크립트를 처음 접한다면 자바스크립트가 웹 브라우저에 표시되는 페이지와 어떻게 상호작용하는지 이해하기 위한 핵심은 자바스크립트가 다양한 이벤트에 응답한다는 것입니다.

즉, 사용자가 요소를 클릭하거나, 키 입력을 하거나, 마우스를 클릭하면 브라우저는 발생한 이벤트에 해당하는 신호를 발생시킵니다. 이를 통해 사용자와 브라우저의 상호작용을 이용할 수 있습니다.

특히 사용자가 페이지에 대해 어떤 작업을 할 때마다 맞춤 이벤트를 이용해 응답할 수 있습니다. 문제는 모든 브라우저가 동일한 방식으로 이벤트를 구현하지는 않는다는 것입니다(이러한 이유로 명세가 필요하지만 이는 다른 글에서 알아보겠습니다).

다행히 jQuery는 모든 이벤트에 대해 일관된 이름을 정의함으로써 이를 훨씬 쉽게 처리할 수 있습니다. 즉, 우리가 응답하려고 하는 이벤트에 대해 동일한 이름을 사용할 수 있고 이러한 이름은 모든 주요 브라우저에서 통할 것입니다.

4. 애니메이션

jQuery가 처음 나왔을 때 플래시는 여전히 인기가 있었고 웹 전반에 걸친 일반적인 애니메이션은 완전히 죽지 않았습니다.

그러나 jQuery의 맥락에서 애니메이션에 관해 이야기할 때는 구식 기술에서 본 것과 같은 유형의 효과나 동작에 대해 이야기하는 것이 아닙니다. 대신 화면에 무엇인가가 발생했다는 피드백을 사용자에게 주는 효과에 대해 이야기하는 것입니다. 또한 덜 침습적이고 올바르게 사용할 경우(무엇이든 남용될 수는 있겠지만) 페이지나 애플리케이션에 멋진 스타일을 더할 수 있습니다.

이 페이지에서 전체 이펙트 API를 볼 수는 있지만 jQuery의 효과는 요소의 페이드 인 및 페이드 아웃 처리나 요소를 뷰로 통합하는 간단한 것부터 어떤 요소에 적용하기 위해 등록된 효과 대기열을 조작하는 것과 같은 복잡한 것까지 다양할 수 있습니다.

물론 후자의 경우에는 이펙트 API에 대한 경험이 약간 있다고 가정하지만 라이브러리와 문서에 충분한 시간만 투자한다면 자연스럽게 따라오는 것입니다.

5. Ajax

Ajax에 익숙하지 않은 분을 위해 설명하자면 Ajax는 웹 페이지가 전체 페이지를 새로고침하지 않고도 서버를 호출하고, 응답을 처리하고, 페이지의 일부를 업데이트할 수 있는 근본적인 방법입니다. 이 기술은 꽤 오랫동안 사용돼 왔지만 여전히 멋진 기능을 제공하고 적절하고 효과적으로 사용할 경우 웹 페이지나 웹 애플리케이션 맥락에서 뛰어난 기능을 제공할 수 있습니다.

Ajax에 대한 지원은 5년이나 10년 전만큼 나쁘지는 않지만 브라우저 전반에 걸쳐 API를 구현하는 정도는 아주 약간 다를 수 있습니다. 즉, 마이크로소프트에서 제공하는 브라우저, 구글에서 제공하는 브라우저, 애플에서 제공하는 브라우저, 크롬에서 제공하는 브라우저 등에 맞춰 Ajax 코드를 작성하는 작업을 개발자가 떠맡아야 한다는 뜻입니다.

하지만 jQuery만 있으면 그렇게 하지 않아도 됩니다. jQuery에서 Ajax를 지원하는 덕분에 브라우저 간 불일치를 겪지 않고도 Ajax를 다양한 방식으로 활용할 수 있습니다. 실제로 GET 및 POST 요청을 처리하는 것은 쉽지만 $.ajax 메서드를 사용해 훨씬 더 고급 호출을 수행할 수 있습니다.

애플리케이션의 핵심부에서 API를 쓸 수 있게 하거나 API를 원하는 대로 쓸 수 있게 만들어 두는 데 익숙해지면 API(또는 그와 비슷한 것을 이용해)를 이용하지 않고 작업하는 것을 상상하기가 어렵습니다.

확장성

많은 서버 측 프레임워크와 라이브러리에서 제공하는 기능 중 하나는 핵심 코드 기반에 대한 확장 기능을 만드는 것입니다. 현대적인 클라이언트 측 라이브러리와 프레임워크에서는 이것이 가능하며 이는 jQuery도 마찬가지입니다.

예를 들어, 각 프로젝트마다 동일한 기능을 만드는 일을 한다고 해봅시다. 또는 판매하는 제품이 있고 jQuery와 통합해야 하는 약간의 사용자 정의 코드가 있지만 프로젝트에 따라 다른 매개변수가 필요할 수도 있습니다.

그럼 어떻게 해야 할까요?

다행히도 jQuery는 플러그인을 지원합니다. 즉, 개발자는 다른 사람들이 작성한 플러그인(어떤 플러그인은 jQuery 웹 사이트에서 구할 수 있고 또 어떤 플러그인은 깃허브에서 구할 수 있음)을 활용할 수 있을뿐더러 직접 플러그인을 개발할 수도 있습니다.

그런 다음 이 코드를 프로젝트에서 재사용하거나 다른 사람들이 기여하고, 오류를 수정하고, 기능 등을 제공할 수 있도록 깃허브 같은 사이트에서 내려받을 수 있게 만들 수 있습니다.

기타 jQuery 프로젝트

처음부터 jQuery는 여러 플랫폼에서 호환 가능한 방식으로 간단하고 강력한 작업을 수행할 수 있는 기능을 제공하는 자바스크립트 라이브러리 그 이상으로 발전했습니다.

핵심 라이브러리 외에도 jQuery는 이 글을 마무리하기 전에 주목할 만한 가치가 있는 두 가지 프로젝트로 이어졌습니다. 각 프로젝트의 세부 사항을 살펴보지는 않겠지만 향후 작업에 필요한 것이 무엇인지를 알 수 있기 때문에 각 프로젝트의 전반적인 개요를 살펴볼 것입니다.

jQuery UI

jQuery UI 홈페이지에는 다음과 같이 설명돼 있습니다.

jQuery UI는 jQuery 자바스크립트 라이브러리를 기반으로 만들어진 사용자 인터페이스 상호작용, 효과, 위젯 및 테마가 선별된 세트입니다. 상호작용이 풍부한 웹 애플리케이션을 구축하고 있거나 날짜 선택 도구를 폼 컨트롤에 추가해야 하는 경우 jQuery UI가 안성맞춤입니다.

이 라이브러리는 jQuery가 출시된 이후 약 1년 후인 2007년에 처음 출시됐습니다. jQuery UI는 웹 사이트 전체에서 사용할 수 있는 위젯을 만들 수 있도록 라이브러리의 플랫폼 간 호환성을 활용한다는 점에서 jQuery의 보완 라이브러리로서 작동합니다.

대다수의 위젯에는 일반적으로 사용되는 기능들이 포함돼 있습니다. 예를 들면,

• 날짜 선택 도구
• 대화상자
• 진행 표시줄
• 풍선 도움말
• 자동 완성
• 기타 등등

또한 효과, 유틸리티, 상호작용과 같은 고급 기능들도 있습니다. 지금까지 다룬 모든 것(그리고 아직까지 다루지 않은 것)에는 우리가 최대한 상호작용할 수 있게 해주는 다양한 콜백, 속성, 함수가 포함됩니다.

앞에서 언급한 모든 기능은 웹 사이트의 룩앤필에 맞는 다양한 테마를 제공합니다. 마지막으로, 여기서 설명하고 사이트에 포함된 모든 기능들은 잘 문서화돼 있습니다.

jQuery 모바일

jQuery Mobile 홈페이지에는 다음과 같이 설명돼 있습니다.

jQuery Mobile은 모든 스마트폰, 태블릿, 데스크톱 장치에서 접근할 수있는 반응형 웹 사이트 및 앱을 만들기 위해 고안된 HTML5 기반 사용자 인터페이스 시스템입니다.

이 라이브러리는 2010년에 출시됨으로써 라이브러리 제품군에 가장 최근에 도입됐습니다(2014년에 마지막 안정 버전이 릴리스됨).

jQuery Mobile은 jQuery UI와 매우 비슷하게 잘 문서화된 API와 사용자 정의 테마를 제공함으로써 프로젝트가 목표로 하는 다양한 장치에 이상적입니다.

앞의 두 라이브러리는 jQuery 및 jQuery에서 제공하는 위젯을 비교적 손쉽게 작성할 수 있는 일련의 크로스 플랫폼 기능을 제공하지만 jQuery Mobile에는 당면한 프로젝트의 특성에 맞는 사용자 인터페이스를 디자인할 수 있도록 CSS 프레임워크가 포함돼 있습니다.

프레임워크에는 다음과 같은 것들이 포함돼 있습니다.

• CSS 클래스
• 그리드
• 반응형 그리드
• 기본 테마

jQuery Mobile 라이브러리는 다양한 모바일 장치를 위한 웹 개발을 훨씬 더 쉽게 만들어주는 프로젝트에서 기대할 수 있는 것들을 제공합니다. 여기엔 다음과 같은 것이 포함됩니다.

• 일관된 아이콘 세트
• 다양한 기기에서 작동하는 이벤트
• 활성 페이지에 대한 프로퍼티
• 모바일 인터페이스에 알맞은 다양한 위젯

마지막으로, 수많은 브라우저가 시장에 출시됐고 현장에서 사용되고 있습니다. 이전 버전의 인터넷 익스플로러의 사용률이 감소하고 크롬이 더 널리 채택됨에도 불구하고 여러 가지 이유로 오래된 브라우저를 사용하는 특정 사용자가 있습니다.

경우에 따라 이러한 사용자는 회사 인트라넷의 특성으로 인해 구형 브라우저를 사용하기도 합니다. 또 어떤 경우에는 자신의 업무에 할당된 모바일 기기 및/또는 전화기와 관련이 있기도 합니다. 그리고 때로는 더 나은 것으로 업그레이드할 수 없다는 것과 관련돼 있기도 합니다.

그래도 상관 없습니다. jQuery Mobile은 현재 사용 가능한 대부분의 브라우저 및 운영체제를 지원합니다. 대상 플랫폼이 라이브러리에서 지원되는지 확실하지 않은 경우 언제든지 브라우저 지원 페이지를 확인할 수 있습니다.

기타 참고 자료

• jQuery 학습 센터
• Learning jQuery, 4차 개정판
• jQuery in Action, 3차 개정판
• jQuery Succinctly
• 왜 jQuery가 undefined인가요?
• 20가지 유용한 jQuery 슬라이더
• 특출난 jQuery 셀렉터들
• jQuery에서 찾아 바꾸기 플러그인을 만들자

결론

jQuery가 무엇이고(또한 무엇이 아닌지), 자바스크립트와 어떤 관련이 있는지 이해하는 것이 중요합니다. 그럼 jQuery의 작동 방식을 비롯해 jQuery 라이브러리를 사용해 무엇을 할 수 있는지 알 수 있습니다.

앞에서 언급했듯이 어떤 사람들 자바스크립트를 먼저 배우고 jQuery를 배워야 한다고 주장할 수도 있습니다. 또 어떤 사람들은 jQuery를 배우는 것이 자바스크립트를 거꾸로 활용하게 되는 좋은 방법이라고 주장할 수 있습니다.

어떤 경우든 jQuery는 자바스크립트 경제에서 오랫동안 사용된 라이브러리이며, 워드프레스처럼 매우 인기 있는 많은 프로젝트에서 사용되는 라이브러리이므로 jQuery를 배우면 여러모로 도움될 것입니다.

자바스크립트는 웹에서 작동하는 사실상의 업계 표준 언어 중 하나로 자리매김했습니다. 자바스크립트를 배우는 데 학습곡선이 없지는 않으며, 여러분이 배우느라 바쁘게 만들 각종 프레임워크와 라이브러리가 많이 있습니다. 공부하거나 직장에서 사용할 다른 참고 자료를 찾고 있다면 Envato 마켓플레이스에서 이용할 수있는 자료를 확인해 보시기 바랍니다.

이것만으로 충분하지 않다면 여러분이 검토하거나 읽을 만한 문서나 오픈소스 코드도 많습니다. 또한 널리 이용 가능한 플러그인을 비롯해 jQuery 라이브러리의 개발과 관련된 모든 소식들도 접할 수 있는 활발한 블로그도 있습니다.

자바스크립트(특히 워드프레스와 관련된)에 관심 있는 분은 제 블로그나 트위터 @tommcfarlin에서 저를 언제든지 팔로우해주시길 바랍니다. 제 프로필 페이지에서 제가 진행하는 모든 강좌와 튜토리얼도 보실 수 있습니다.

주저하지 마시고 아래 피드에 궁금한 사항이나 의견을 남겨두시면 각각에 대해 답변해 드리겠습니다.