jQuery Migrate Plugin - Warning Messages

jQuery Migrate Plugin - Warning Messages의 번역

과거의 jQuery 코드를 마이그레이션할 때 개발자가 호환성 문제를 파악하고 문제를 해결할 수 있도록 개발(비압축)버전을 사용하여 콘솔 경고 메세지를 출력하는 환경을 마련해야한다. 메세지는 각각의 고유한 메세지를 콘솔에 한번만 나타낸다.

대부분의 경우 이 메세지는 단순히 경고를 출력하며, jQuery Migrate를 사용하는 동안 제대로 작동하겠지만, 이 플러그인을 사용하지 않아도 되도록 코드를 변경하는 것을 추천한다.

production(생산-압축) 버전의 경우는 이 경고를 생성하지 않을뿐, 여전히 호환성 문제들을 내포하고 있다.

이 플러그인에 의해 생성된 모든 경고는 식별하기 쉽게 `jQMIGRATE`의 단어로 시작하며, 경고 메세지, 원인 및 지침은 아래와 같다.

JQMIGRATE: Logging is active

이것은 경고가 아니지만 첫번째 로드때 표시하여 적절한때 콘솔 로그 메세지가 보여질것이라는 것을 알린다. 플러그인의 축소된 버전을 사용중이거나 플러그인이 로드되기 전에 jQuery.migrateMute가 true로 설정되어있는 경우, 이 메세지 또는 경고를 표시하지 않는다.

JQMIGRATE: jQuery.attrFn is deprecated

원인

jQuery 1.8 이전에는 문서화되지 않은 jQuery.attrFn 객체는 $(html, props) 메소드에 의해 속성들의 목록이 지원되었다. 이것은 더이상 jQuery 1.8에서 필요로 하지 않지만, 일부 개발자들은 소스를 판독하여 발견한 후 사용하기 시작했다. 그들의 코드는 여전히 jQuery.attrFn이 있을 것으로 예상하고 그 값을 할당하려고 시도하지만 오류를 발생시킨다.

해결책

적어도 jQuery UI 버전(1.8.21 혹은 그 이후)과 jQuery Mobile(1.2.1 혹은 그 이후)버전을 사용하지는 확인하라. jQuery.attrFn 을 더이상 사용하지 마라. 문자열 attrFn 를 사용하고 있는 제 3자 플러그인을 사용하고 있다면 플러그인 저자에게 사용을 보고하자.

JQMIGRATE: $(html) HTML strings must start with '<' character

원인

jQuery 1.9에서 $() 에 전달된 HTML 문자열은 태그로 시작해야 한다. 즉 문자열의 첫번째 문자는 < 여야 한다. 공백을 포함한 어떠한 선행 문자가 위치할 수 없다.

이것은 URL, AJAX 또는 다른 소스로부터 얻게되는 HTML에 존재할 수 있는 스크립트를 실행하는 실수의 가능성을 줄이기 위해 수행된다. $("<div />") 혹은 $("<p>hello</p>") 처럼 간단한 문자의 HTMM처럼 공백 또는 텍스트가 먼저등장하지 않게하자.

해결책

임의의 HTML을, 특히 외부소스에서 구문분석 $.parseHTML() 메소드를 사용하라. 스크립트를 실행하지 않고 파싱된 HTML을 가지고 jQuery 객체를 얻으려면 $($.parseHTML("string")) 을 사용하라.

HTML에서 스크립트를 실행하려면, $($.parseHTML("string", document, true)) 를 사용하라. 우리는 이 검사를 우회하는 문자열에 $.trim() 을 사용하지 않는 것이 좋다.

JQMIGRATE: $(html) text after last tag is ignored

원인

$() 에 전달된 HTML 문자열은 시작과 끝은 태그여야한다. 마지막 태그 다음의 모든 문자는 무시된다. jQuery 1.9로 업그레이드 하고 $.parseHTML() 을 사용하는 경우, 선행 또는 후행하는 문자는 무시되지 않으며, 텍스트 노드는 반환 된 데이터의 일부가 될 것이다.

해결책

보통 이러한 경고는 존재하지 말아야 할 곳에 문자가 존재하는 HTML 문자열의 오류에 기인한다. 컬렉션(collection)의 일부가 아니라면, $.parseHTML()에 문자열을 전달하기 전에 선행 또는 후행하는 문자를 제거하라.

다른 대안으로 세트에서 오직 요소(element)만 남기고 모든 최상위 텍스트 노드를 제거하기 위해서 $($.parseHTML(html)).filter("*")를 사용할 수도 있다.

JQMIGRATE: Can't change the 'type' of an input or button in IE 6/7/8

원인

IE6,7,8에서 input 또는 button 요소의 type 속성의 변경을 시도한다면 에러를 발생시킨다. jQuery 1.9 이전에는 jQuery가 이런 행동에 대해 모든 브라우저에서 에러를 발생 시켰다. jQuery 1.9 이후에는 type 설정을 허락하지만 오래된 IE에서는 여전히 오류를 발생시킨다.

해결책

구형 IE와의 호환성을 유지하려면 input 요소의 type 속성을 변경하지 마라. 대신에 코드에 새로운 요소를 생성하고 이전 것을 교체하는 방식으로 우회하라.

JQMIGRATE: jQuery is not compatible with Quirks Mode

원인

브라우저가 Quirks Mode로 실행중일때, HTML 문서는 <!doctype ...> 을 가지고 있지 않게 되므로, 첫줄은 빈 라인처럼 되거나, 파일의 문서타입이 무효화 된다. 이 모드는 브라우저가 1990년대의 (HTML3) 동작으로 구동되게하는 원인이 된다.

IE에서는 또한, 과거의 브라우저보다 더 나은 성능을 보이는 많은 고성능 API를 무효화시킨다. jQuery는 quirks mode에서 호환성 및 테스트를 하지 않았다.

해결책

정확한 DOCTYPE(문서타입)을 선언하고 표준모드로 작동되게 하라. HTML5의 간단한 <!doctype>을 추천하다. jQuery Migrate 플러그인은 quirks mode의 문제를 수정하지 않는다.

JQMIGRATE: jQuery.boxModel is deprecated

JQMIGRATE: jQuery.support.boxModel is deprecated

원인

이 두가지 사라진 속성은 표준 모드인 페이지는 true, Quirks mode인 페이지는 false로 나타냈다. Quirks mode는 결코 jQuery에서 지원되지 않으며, 그래서 이속성은 제거되었다.

해결책

jQuery에서 Quirks mode를 사용하지마라, 결코 지원하지 않을것이다.

JQMIGRATE: jQuery.parseJSON requires a valid JSON string

원인

jQuery 1.9.0 이전에는 $.parseJSON() 메소드는 일부 잘못된 JSON 문자열을 오류를 발생시키지 않고 결과로 null 을 반환했다. JSON.parse() 메소드 또한 마찬가지였다. 두 메소드는 1.9.0에서 빈 문자열의 값이 정렬되면서 `$.parseJSON()`의 유효한 것으로 간주하지 않는다.

해결책

"" 혹은 false 를 같은 값으로 고려하여 null 로 처리하려는 경우 $.parseJSON() 을 호출하기 전에 확인해라. 빈 문자열을 거짓으로 취급할때 다른 오류알림 없이 null로 반환되었다면 이 코드는 대부분의 경우 충분하다.

var json = $.parseJSON(jsonString || "null");

자신의 코드가 $.parseJSON() 을 직접적으로 호출하지 않는다면, 아마도 null 혹은 {}와 같은 유효한 JSON 응답이 아닌 콘텐츠 본문에 빈 문자열을 반환하는 서버로부터 JSON 값을 검색하기 위해 AJAX를 사용할 것이다.

서버 응답으로 부터 유효하지 않은 JSON을 해결할 수 없는 경우, 텍스트로 응답을 검색할 수 있다.

$.ajax({
    url: "...",
    dataType: "text",
    success: function( text ) {
        var json = text? $.parseJSON(text) : null;
        ...
    }
});

JQMIGRATE: jQuery.browser is deprecated

원인

jQuery.sub() 메소드는 jQuery 오브젝트에 대한 변경에서 자신을 분리하는 플러그인에 대한 불완전한 방법을 제공했다. 단점으로인해, 1.8 버전에사 사용 금지되고 1.9에서 제거되었다.

해결책

jQuery 마이그레이션 플러그인을 사용하거나 플러그인 소스들과 애플리케이션에서 jQuery.sub() 을 추출하여 jQuery.sub() 에 의존하는 코드를 재작성한다.

JQMIGRATE: 'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'

원인

jQuery 1.9까지는 이벤트 핸드러를 연결할때 "hover"는 "mouseenter mouseleave"의 별칭으로 허용되었다. 이런 특별한 예외적인 경우는 실질적인 이득을 제공하지 않고, 트기거 이벤트로서 이름 "hover"의 사용을 막았다.

주의: 이것은 더 이상 사용되지 않는 .hover() 메소드와 관련이 없다.

해결책

"hover" 대신에 "mouseenter mouseleave"로 대체하고 on(), bind(), delegate() 혹은 live() 이벤트 핸들러를 사용한다.

JQMIGRATE: jQuery.fn.error() is deprecated

원인

$().error() 메소드는 요소에 "error" 이벤트를 연결하는데 사용되었지만, $.error() 메소드와의 혼란을 줄이기위해 1.9에서 제거되었다. 또한, window.onerror 표준 이벤트 핸들러 규칙을 따르지 않기 때문에 작동하지 않는 $(window).error() 을 사용하고 싶은 유혹을 억제하는 역할을 한다.

해결책

$().on("error",fn) 에서 $().error(fn) 로 변경한다.

JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated

원인

toggle() 메소드에 대한 두개의 완전히 다른 의미가 있다. toggle() 의 사용은 요소를 보여주거나 숨기는 것에 영향을 받지 않는다. 전문적인(specialized) 클릭 핸들러로 toggle() 의 사용은 1.8에서 사용금지 되었고, 1.9에서 제거되었다.

해결책

jQuery 마이그레이트 플러그인을 사용하거나 플러그인 소스들과 애플리케이션에서 $().toggle() 를 추출하여 $().toggle() 에 의존하는 코드를 재작성한다.

JQMIGRATE: jQuery.fn.live() is deprecated; jQuery.fn.die() is deprecated

원인

live() 와 die() 메소드는 성능 및 유용성에 단점이 있어 1.7에서 사용금지 되어 더 이상 지원되지 않는다.

해결책

live() 를 on() 또는 delegate() 를 사용하는 것으로 재작성한다. 이에 대한 지침은 live() API documentation 설명서에 나와 있다.

JQMIGRATE: AJAX events should be attached to document

원인

jQuery 1.9에서 전역(global) Ajax 이벤트들(ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, ajaxSuccess)은 document 요소에서만 발생된다.

해결책

문서에 Ajax 이벤트를 수신하는 프로그램을 변경한다. 예를 들어, 코드가 현재 아래와 같을 경우 :

$("#status").ajaxStart(function(){ $(this).text("Ajax started"); });

이렇게 변경 :

$(document).ajaxStart(function(){ $("#status").text("Ajax started"); });

JQMIGRATE: Global events are undocumented and deprecated

원인

jQuery 1.9는 전역적인(globally) 트리거 이벤트를 지원하지 않는다. 유일하게 문서화된 전역적 이벤트는 Ajax 이벤트였고, 지금은 document 에서만 발생한다. jQuery 외부 코드는 전역 이벤트를 발생할 수 있는 문서화된 인터페이스를 제공하지 않는다.

해결책

전역 이벤트의 사용을 피하는 방식으로 프로그램을 변경한다. jQuery 마이그레이트 플러그인은 이 문제에 대하여 경고하고 있지만 문서화되지 않았기 때문에 이전 동작을 복원하지 않는다.

JQMIGRATE: jQuery.event.handle is undocumented and deprecated

원인

jQuery.event.handle 은 문서화된적이 없었고 jQuery 1.7에서 사용금지 되었으며 1.9에서 제거되었다.

해결책

trigger와 같은 문서화된 jQuery APIs를 사용하라.

JQMIGRATE: jQuery.fn.attr('value') no longer gets properties

원인

jQuery 1.9 이전에는 $().attr("value") 는 value attribue 대신에 value property를 취득했다(이는 일반적으로 HTML 태그에서 읽은 값을 반영). 이 선택자는 value attribute를 참조하는 일치하지 않는 행동을 일으키는 원인이 되었다.

해결책

폼 컨트롤에는 $().val() 를 사용하고 다른 요소는 $().prop("value") 를 사용하여 현재 값을 얻고 명시적으로 셀렉트박스와 option 요소에서 [value=...] 의 사용을 제한한다.

JQMIGRATE: jQuery.fn.attr('value', val) no longer sets properties

원인

jQuery 1.9 이전에는 $().attr( "value", val ) 는 value attribute 대신에 value property를 설정했다. 이 선택자는 value attribute를 참조하는 일치하지 않는 행동을 일으키는 원인이 되었다.

해결책

폼 컨트롤에는 $().val(val) 를 사용하고 다른 요소는 $().prop("value", val) 로 현재 값을 설정한다.

JQMIGRATE: jQuery.fn.attr('selected') may use property instead of attribute

원인

jQuery 1.9 이전에는 $().attr("checked") 등은 때때로 브라우저와 HTML 사양 속성(현재 상태)가 attribue(초기값/기본 상태)와 다를 수 있다는 것에도 불구하고 비 XML 요소와 상호작용하는할때 attribute 대신에 checked, selected property로 사용되었다. $().prop 제공하지 않았던 이전 버전들에서 존재했었다.

해결책

Boolean 속성은 일반적으로 $().attr 에 전달되어서는 안된다; 기본 HTML 속성을 업데이트 하지 않을 경우 $().prop 로 교체한다.

JQMIGRATE: deferred.pipe() is deprecated

원인

jQuery.Deferred 객체의 pipe() 메소드는 1.8에서 사용금지되었고, then() 메소드가 동일한 기능을 수행하도록 변경되었다.

해결책

대부분의 경우에, pipe() 에서 then() 으로 모든 항목을 변경하는 것으로 충분하다. Ensure that you aren't relying on context/state propagation (e.g., using this) or synchronous callback invocation, which were dropped from .then() for Promises/A+ interoperability as of jQuery 3.0.

JQMIGRATE: deferred.isResolved() is deprecated

JQMIGRATE: deferred.isRejected() is deprecated

원인

jQuery 1.7에서 jQuery.Deferred 객체의 isResolved() 와 isRejected 메소드는 사용금지 되었다. 1.8에서 둘다 제거되었고 더이상 이후 버전들에서 사용할 수 없다.

해결책

Deferred 객체의 상태를 확인하려면, deferred.state() 를 호출하고 "resolved" 혹은 "rejected" 문자열 값을 확인한다.

JQMIGRATE: jQuery.clean() is deprecated

원인

jQuery.buildFragment() 와 jQuery.clean() 은 문서화되지 않은 내부적인 메소드이다. jQuery.buildFragment() 의 서명(signature)은 jQuery 1.8과 1.9에서 변경되었고, jQuery.clean() 은 1.9에서 제거되었다. 그러나 몇몇 플러그인 혹은 그것들을 사용하는 다른 코드가 있음에 유의해야한다.

해결책

이것들을 사용하거나 다른 문서화되지 않은 방법으로 작성된 코드를 재작성한다. 예를 들어, jQuery.parseHTML() 메소드는 jQuery 1.8에 소개되었고 문서 조각에 첨부하여 DOM 요소의 배열에 HTML을 변환할 수 있다.

JQMIGRATE: Use of jQuery.fn.data('events') is deprecated

원인

1.9 이전 버전에서 data("events") 는 다른 코드가 이름 "event" 가진 데이터 요소를 정의하지 않았더라면 요소의 jQuery의 문서화되지 않은 내부적인 데이터 구조를 취득하곤 했다. 이 특별한 경우는 1.9에서 제거되었다.

해결책

내부 데이터 구조를 취득할 공용 인터페이스가 없으며, 문서화되지 않은체로 남아있다. 오직 유용한 애플리케이션에서 디버깅 할 수 있다. 데이터는 jQuery._data("events") 통해 사용할 수 있지만 문서화된 인터페이스가 아니다.

JQMIGRATE: HTML string cannot start with a '#' character

원인

일부 페이지는 페이지에 인코딩된 ID 값이 될것으로 생각하고 $(location.hash) 와 유사한 코드를 사용한다. 그러나 공격자가 #<script>...</script> 와 유사한 문자열을 사용해 사용자 데이터를 훔피는 코드를 실행하는 크로스-사이트 스크립팅(XSS)을 만들 수 있다. 마이그레이트 플러그인은 이와 같은 형식의 문자열을 사용할 수 없다.

해결책

절대적으로 선행 텍스트가 필요한 HTML을 생성하는 경우, $.parseHTML 사용하고 $() 에 결과를 전달한다.

JQMIGRATE: jQuery.fn.andSelf() replaced by jQuery.fn.addBack()

원인

andSelf() 메소드는 결과의 이전 설정을 다시 추가하는 목적을 반영하기 위해 jQuery 1.9에서 addBack() 으로 이름이 변경되었다.

해결책

andSelf() 을 사용한 것을 addBack() 으로 대체한다.

JQMIGRATE: jQuery.fn.size() is deprecated; use the .length property

원인

size() 메소드는 현재 jQuery 객체에서 요소의 갯수를 반환하지만 같은 기능을 제공하는 더 효율적인 length 속성을 복제한다. jQuery 1.9에서 length 속성은 이 값을 취득할 수 있는 좋은 방법이다.

해결책

size() 를 사용하는 것을 length 로 대체한다.

JQMIGRATE: jQuery.swap() is undocumented and deprecated

원인

jQuery.swap() 메소드는 일시적으로 CSS 속성 세트를 교환한다. jQuery 공용 API의 일부로 문서화되지 않았고 사용할 수 없지만 그것은 강제 배치로 인한 성능 문제가 발생할 수 있다.

해결책

jQuery.swap() 을 호출하지 않도록 코드를 재작업하거나 명시적으로 설정하고 변경해야하는 속성을 복원할 수 있다.