제이쿼리 3 공개: 17가지 강력한 새 기능 및 활용법

제이쿼리(jQuery)가 웹을 강타한 지 10년이 넘었지만, 여전히 건재한 데는 이유가 있습니다. 2015년 7월, 제이쿼리는 버전 3.0의 첫 알파를 발표했습니다. 오랜만의 메이저 업데이트로, 거의 2년간 작업해왔습니다. 새 버전은 하위 호환성을 염두에 두고 더 슬림하고 빠른 제이쿼리를 약속합니다.

현재 버전 3.1.1은 많은 버그를 수정하고, 새 메서드를 추가하며, 일부 함수를 제거하고, 몇몇 함수 동작을 변경했습니다. 새로 추가된 기능들과 사용법을 살펴보겠습니다.

17. Hide와 Show 메서드

반응형 디자인과의 호환성 향상을 위해 제이쿼리 3은 많은 요소 숨김에 대해 향상되었습니다. 54개 샘플 테스트에서 새 버전이 이전 버전보다 2% 빠릅니다.

또한 .hide(), .show(), .toggle() 메서드는 계산된 스타일 대신 인라인 스타일에 초점을 맞춥니다. 이렇게 하면 CSS 규칙이 윈도우 리사이즈나 기기 재방향 같은 이벤트 시 동적으로 변경될 때마다 가능하면 스타일시트의 display 값을 더 잘 존중합니다.

<script> $( "#showr" ).click(function() { $( "div" ).first().show( "fast", function showNext() { $( this ).next( "div" ).show( "fast", showNext ); }); }); $( "#hidr" ).click(function() { $( "div" ).hide( 1000 ); }); </script> 

참고 읽기: 웹사이트에 모던한 룩을 주는 놀라운 CSS3 효과 28가지

16. WrapAll()과 Unwrap() 함수

제이쿼리 2에서 .wrapAll() 메서드는 함수가 전달되면 .wrap()처럼 동작했습니다. 이제 변경되었습니다. .wrapAll(function)은 함수를 한 번만 호출하며, 함수 호출의 문자열 결과를 사용해 전체 컬렉션을 감쌉니다.

jQuery( "div" ).wrapAll(function( /* 인덱스 인수 없음, 함수가 한 번만 실행되므로 */ ) { // context는 첫 번째 발견 요소와 동일 return "<h4></h4>"; });

제이쿼리 3에서 unwrap() 메서드에 선택적 셀렉터 매개변수가 생겼습니다. 새 메서드 시그니처는:

unwrap([selector])

부모 요소 내에서 일치하는 셀렉터 표현식을 포함한 문자열을 전달할 수 있습니다. 일치하면 일치하는 자식 요소들이 언랩되고, 그렇지 않으면 언랩되지 않습니다.

15. 스크롤바 너비/높이 고려

제이쿼리 2에서 $(window).width() 호출은 브라우저가 콘텐츠가 요소 크기를 초과할 때 추가한 스크롤바를 제외한 '콘텐츠 너비'를 반환했습니다. CSS 미디어 쿼리와 동등한 측정을 제공하기 위해 $(window).outerWidth()와 $(window).outerHeight()가 이제 스크롤바 너비와 높이를 포함한 너비와 높이를 반환합니다. 이는 DOM 속성 window.innerWidth와 동일합니다.

14. data() 동작 변경

제이쿼리 3에서 data() 메서드 동작이 데이터셋 API 사양에 맞춰 약간 변경되었습니다. 이제 모든 속성 키를 카멜 케이스로 변환합니다.

var $elem = $('#container'); $elem.data({ 'custom-property': 'Hello World' }); console.log($elem.data());

구버전 사용 시 콘솔 결과:

{custom-property: "Hello World"}

제이쿼리 3에서는:

{customProperty: "Hello World"}

보시다시피 속성 이름이 대시 없이 카멜케이스이며, 구버전에서는 소문자 유지와 대시 유지였습니다.

13. 클래스 연산 SVG 지원

제이쿼리는 여전히 SVG를 완전히 지원하지 않지만, .hasClass()나 .addClass() 같은 CSS 클래스 이름을 조작하는 메서드로 SVG 문서를 타겟팅할 수 있습니다. 제이쿼리로 SVG에서 클래스를 변경(추가, 토글, 제거)하거나 찾은 뒤 CSS로 스타일링할 수 있습니다.

12. Visible과 Hidden 필터

제이쿼리 3은 :visible과 :hidden 필터의 의미를 수정했습니다. 너비와 높이가 0인 레이아웃 박스를 포함해 어떤 레이아웃 박스라도 있으면 :visible로 간주합니다. 예를 들어 br 요소와 콘텐츠 없는 인라인 요소가 :visible 필터로 선택됩니다.

다음 HTML 페이지가 있다면:

<section></section> <div></div> <br />

다음을 실행하면:

console.log($('body :visible').length);

제이쿼리 1과 2에서는 0이 나오지만, 이 버전에선 3이 나옵니다.

11. 너비와 높이 반올림 제거

제이쿼리는 이제 브라우저가 지원할 때 .width()와 .height() 값을 정수 대신 부동소수점으로 반환합니다. 웹페이지 설계 시 서브픽셀 정밀도를 원하는 사용자에겐 희소식입니다.

예를 들어, 너비 100px 컨테이너 요소 안에 3개 요소가 각각 1/3(33.3333333%) 너비를 가진다면:

<div class="container"> <div>The car is </div> <div>black</div> <div>Audi</div> </div>

자식 요소 너비를 얻으려 시도하면:

$('.container div').width();

33.3333333이라는 더 정확한 값을 얻습니다.

10. 추가 보안 계층

교차 사이트 스크립팅(XSS) 공격에 대비한 추가 보안 계층이 통합되었습니다. 개발자가 $.ajax()와 $.get() 메서드 옵션에 dataType:"script"를 지정하도록 요구합니다. 원격 사이트가 비스크립트 콘텐츠를 전달하지만 악성 스크립트를 제공하기로 결정하는 공격 가능성을 방지합니다. jQuery.getScript()는 명시적으로 dataType:"script"를 설정하므로 이 변경에 영향받지 않습니다.

$.ajax({ accepts: { mynewcustomtype: 'application/abc-some-custom-type' }, // `mynewcustomtype` 역직렬화 방법 converters: { 'text mynewcustomtype': function(result) { // do things return newresult; } }, // 서버에서 `mynewcustomtype` 반환 기대 dataType: 'mynewcustomtype' });

9. 잘못된 해시 마크

제이쿼리 3은 셀렉터 문자열이 해시 마크만으로 구성된 경우(예: jQuery("#") 및 .find("#")) 구문 오류를 던집니다. 구버전에선 $("#")이 빈 컬렉션 반환, .find("#")가 오류 발생.

8. 문자열 이스케이프 새 메서드

새 jQuery.escapeSelector() 메서드로 CSS 셀렉터에서 특수 의미를 가진 문자열이나 문자를 이스케이프할 수 있습니다. ID나 클래스 이름에 CSS에서 특수 의미가 있는 문자(세미콜론, 점 등)가 있는 경우 유용합니다.

예를 들어 페이지 요소 ID가 "abc.xyz"라면 $("#abc.xyz")로 선택할 수 없습니다. 셀렉터가 ID 'abc'이면서 클래스 'xyz'를 가진 요소로 파싱되기 때문입니다. 하지만 새 메서드 $("#" + $.escapeSelector("abc.xyz"))로 선택 가능합니다.

7. jQuery.when() 인수

제이쿼리 3에서 $.when()에 then() 메서드가 있는 입력 인수를 추가하면 Promise 호환 "thenable"로 해석됩니다. 블루버드(Bluebird) 프로미스와 ES6 프로미스 등 더 넓은 범위 입력이 가능해 더 정교한 비동기 콜백 작성이 가능합니다.

$.when($.ajax("test.apx")).then(function(data,textStatus,jqHXR) { alert (jqHXR.status); //alerts 200 }); 

다중 인수 jQuery.when 호출은 Promise.all처럼 동작해 이행 값들을 이행 배열로 집계하거나, 최초 거부 값으로 대안적으로 거부합니다. 단일 및 영 인수 호출은 Promise.resolve처럼 동작해 thenable과 동일하게 해석되는 Deferred를 반환하거나, 비프로미스 입력으로 이행합니다.

또한 jQuery.when() 메서드는 더 이상 입력 Deferred의 진행 알림을 출력 Deferred로 전달하지 않습니다.

6. URL 해시 보존

jQuery.ajax() 메서드가 이제 전체 URL을 전송(스크립트, xhr, jsonp, 커스텀 전송)합니다. URL에 해시가 있으면 더 이상 제거하지 않습니다. 다만 상대편 서버가 URL 해시를 처리 못 하면 요청 전 수동으로 제거해야 합니다.

5. 디퍼드(Deferred) 객체, JS 프로미스와 호환

디퍼드는 콜백 큐 생성을 가능하게 하는 체인 가능한 객체입니다. 제이쿼리 3은 디퍼드 객체를 새로운 Promises/A+ 표준과 호환되게 만들었습니다. .then() 메서드에 핵심 변경이 있습니다. .then() 콜백 내에서 던져진 예외는 이제 포착돼 거부 값으로 변환됩니다. 거부 핸들러에서 반환된 비-thenable 값은 이행 값이 됩니다.

구식 디퍼드 메서드:

$.ajax("/stat") .done(function(data) { whoops(); // 콘솔 표시: "whoops is not a function" // 더 이상 실행 안 됨 }) .fail(function(arg) { // 잡히지 않아 실행 안 됨 });

새 표준 Promises/A+ 동작

$.ajax("/stat") .then(function(data) { whoops(); // 콘솔 표시 "jQuery.Deferred exception: whoops is not a function" // 더 이상 실행 안 됨 }) .catch(function(arg) { // arg는 Error 객체 - "whoops is not a function" });

4. 애니메이션 새 API

제이쿼리 3은 애니메이션 실행을 위해 requestAnimationFrame() API를 사용합니다. 이 새 API는 애니메이션을 더 부드럽고 빠르게 실행하며 CPU 시간을 덜 소모합니다. 지원하는 브라우저에서만 사용되며, 인터넷 익스플로러 9 같은 구형 브라우저에선 기존 API를 폴백으로 사용합니다.

참고 읽기: 디자이너를 위한 CSS3 및 HTML5 애니메이션 도구 24가지

3. 제이쿼리 3, 엄격 모드(Strict Mode) 실행

제이쿼리 3을 지원하는 대부분의 브라우저가 엄격 모드를 사용하며, 새 버전은 이 지침을 염두에 두고 구축되었습니다. 제이쿼리 3이 엄격 모드로 작성됐지만, 여러분 코드가 엄격 모드로 실행될 필요는 없어 기존 코드를 현재 버전으로 마이그레이션할 때 다시 쓸 필요 없습니다. 단, 예외가 하나 있습니다. 일부 ASP.net 버전이 엄격 모드 때문에 호환되지 않습니다.

ASP.net 4.0이 doPostBack() 메서드에서 arguments.caller.callee를 사용해 콜 스택 추적을 시도한다면, 제이쿼리 2.x 이하 버전을 계속 사용하는 게 좋습니다. 요즘 브라우저는 error.stack으로 스택 트레이스를 지원하므로 arguments.caller.callee를 검사할 필요 없습니다.

2. Get과 Post 메서드 새 시그니처

제이쿼리는 $.ajax()와 정렬하기 위해 $.get()과 $.post() 유틸리티 함수의 새 시그니처를 도입했습니다. 새 시그니처는 설정 매개변수입니다.

$.get([settings]) $.post([settings])

설정 객체는 많은 속성을 가질 수 있습니다. $.ajax()에 제공할 수 있는 같은 객체입니다. $.get()과 $.post()에 객체를 전달할 때 $.ajax()와 유일한 차이는 method 속성이 항상 무시된다는 점입니다. $.get()과 $.post()는 Ajax 요청을 수행할 프리셋 HTTP 메서드(GET, POST)를 가지기 때문입니다.

다음 코드 고려:

$.get({ url: 'https://www.rankred.com', method: 'POST' // 속성 무시 });

method 속성에도 불구하고 POST 요청이 아닌 GET 요청이 전송됩니다.

1. For…of 루프

제이쿼리 3은 ECMAScript 6 사양에 도입된 for…of 루프를 지원합니다. Map, Set, Array 등 반복 가능한 객체를 순회할 수 있습니다. 이 루프 사용 시 얻는 값은 제이쿼리 컬렉션의 DOM 요소로, 한 번에 하나씩입니다.

참고 읽기: 웹사이트를 더 좋게 만드는 모던 제이쿼리 플러그인 26가지

for…of 루프는 이전 $.each() 구문을 대체해 제이쿼리 컬렉션 요소를 순회하기 쉽게 만듭니다. 페이지 각 입력 요소에 이름을 할당한다고 가정해봅시다.

제이쿼리 2 코드는…

var $inputs = $('input'); for(var j = 0; j < $inputs.length; j++) { $inputs[j].id = 'input - ' + j; }

제이쿼리 3 코드는…

var $inputs = $('input'); var j = 0; for(var input of $inputs) { input.id = 'input - ' + j++; }