jQuery 1.10 vs 1.11 호환성 체크

서비스 jQuery 1.10.2 → 1.11.0 올려도 되나 싶어 체크한 기록. 결론부터: 거의 문제없음. 다만 자체 플러그인 두 개를 손봐야 했다.

먼저 라인 선택 배경. 2.x로 못 가는 이유는 IE8. 회사 고객 중 공공/대기업 쪽에 IE8이 아직 6% 남아있어서 1.x 유지는 강제. 1.11은 bugfix 중심이고 API 브레이킹이 없다고 공식 changelog에 박혀 있다. 2.1은 기능적으로는 1.11과 같지만 IE<9 지원 코드가 제거된 버전. 같은 릴리스 사이클로 번호만 다르게 간다고 보면 됨.

실제 체크한 항목.

• $.ajax의 statusCode 콜백 분기 — 동일
• $.Deferred + .then 체이닝 — 동일. 1.8에 있던 then 리턴값 체이닝 버그는 이미 고쳐진 상태
• 이벤트 delegation .on("click", "a.btn", fn) — OK
• 오래된 $.browser 사용 플러그인(slimScroll 0.4) — 여전히 미동작. 1.9부터 제거된 API라 그대로
• $.live / $.die — 1.9에서 이미 제거. 영향 없음
• .attr("checked") vs .prop("checked") — 폼 체크박스 상태는 반드시 prop. 1.6 이후 고정인데 코드 리뷰하다 아직 attr 쓰는 부분 발견해서 같이 정리

걸린 건 자체 제작한 IE7 호환 플러그인 두 개. 하나가 $.support.boxModel을 참조했는데 이게 1.8에서 이미 deprecated, 1.9부터 빠진 프로퍼티다. 어쩌다 아직 살아있었는지 모르겠는데 1.10에서는 undefined라 기본값 true로 동작하다가 1.11 올리고 minify된 번들에서 조건문 분기가 꼬였다.

// 예전
if (!$.support.boxModel) {
    el.width(el.width() + padLR + borderLR);
}

// 요즘은 document.compatMode로
// Quirks 모드일 때만 IE5 식 box-sizing이 적용됨
if (document.compatMode !== "CSS1Compat") {
    el.width(el.width() + padLR + borderLR);
}

그리고 또 하나. 커스텀 autocomplete에서 keydown 이벤트를 받는데 이벤트 객체의 which 대신 keyCode를 직접 읽던 부분이 있었다. 1.11에서 normalization 타이밍이 아주 살짝 달라져서 특정 IME 조합 상태일 때 한 번씩 keyCode가 0으로 들어오는 경우를 봤다. e.which로 바꾸니 일관성 회복.

minified 용량도 체크. 1.10.2가 92.6KB, 1.11.0이 93.5KB. CDN hit율(jQuery CDN) 올라가니까 자체 호스팅에서 CDN으로 전환하는 것까지 한 번에 해버림.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  // fallback
  window.jQuery || document.write(
    '<script src="/assets/js/jquery-1.11.0.min.js"><\/script>'
  );
</script>

protocol-relative URL(//) 쓰는 이유는 https 페이지에서 mixed content 방지. fallback은 CDN 못 뜨면 로컬 파일. 이거 없으면 한번씩 죽는다.

테스트 돌려 별 이슈 없으면 다음주 화요일 새벽 배포 예정. prod 반영 후 에러 집계 보고 판단.