jQuery 1.12.x to jQuery 3.x Upgrade 주요 변경 사항

1. 주요 변경 사항

1.1 Ajax 관련 변경

1) success, error, complete 콜백 제거

• 이전에는 $.ajax()에서 success, error, complete를 사용했으나, 최신 버전에서는 Promise 방식을 선호합니다.
• 수정 전:
  $.ajax({

    url: '/example',

    success: function (data) {

      console.log(data)

    },

    error: function () {

      console.error('Error occurred')

    }

  })
• 수정 후:
  $.ajax('/example')

    .done(function (data) {

      console.log(data)

    })

    .fail(function () {

      console.error('Error occurred')

    })

2) JSONP 자동 비활성화

• JSONP 요청은 보안상 자동으로 비활성화됩니다. JSONP를 사용해야 한다면 jsonp: true 옵션을 명시적으로 설정해야 합니다.

3) jqXHR.abort() 동작 변경

• abort() 호출 시 더 이상 error 콜백이 호출되지 않습니다. 대신 fail에서 처리해야 합니다.

---

1.2 Event 관련 변경

1) .bind(), .unbind(), .delegate(), .live() 제거

• 더 이상 사용되지 않으며 .on() 및 .off()로 대체해야 합니다.
• 수정 전:
  $('#button').bind('click', function () {

    alert('Clicked')

  })
• 수정 후:
  $('#button').on('click', function () {

    alert('Clicked')

  })

2) 이벤트 핸들러의 event.originalEvent 변경

• originalEvent에서 일부 속성이 더 이상 복제되지 않습니다. 필요한 경우 직접 참조해야 합니다.

---

1.3 CSS 및 DOM 조작 변경

1) .toggleClass() 개선

• 두 번째 인자로 true 또는 false를 전달하면 명시적으로 클래스를 추가하거나 제거할 수 있습니다.
• 수정 전:
  $('#element').toggleClass('active', condition ? 1 : 0)
• 수정 후:
  $('#element').toggleClass('active', condition)

2) .removeAttr() 속성 제거 동작 변경

• boolean 속성(checked, disabled 등)을 removeAttr()로 제거하는 대신 .prop()을 사용하는 것이 권장됩니다.
• 수정 전:
  $('#checkbox').removeAttr('checked')
• 수정 후:
  $('#checkbox').prop('checked', false)

3) :hidden, :visible 성능 개선

• 요소 가시성 확인 시 이전보다 더 엄격한 기준이 적용됩니다.

---

1.4 Deferred 객체 변경

• jQuery 3.x에서는 Deferred 객체가 ES6 Promise와 호환됩니다.
  • then()의 실행 순서가 변경되어, 항상 비동기로 실행됩니다.
• 수정 전:
  var deferred = $.Deferred()

  deferred.resolve('Success')

  deferred.done(function (result) {

    console.log(result) // "Success"

  })
• 수정 후:
  var deferred = $.Deferred()

  deferred.resolve('Success')

  deferred.done(function (result) {

    console.log(result) // "Success" (동작은 동일)

  })

---

1.5 Removed APIs

• $.browser: 제거됨. 브라우저 감지는 feature detection 방식을 사용하세요.
  if (navigator.userAgent.indexOf('Chrome') > -1) {

    console.log('Chrome browser')

  }
• $.isArray: 제거됨. 대신 Array.isArray()를 사용하세요.
  if (Array.isArray(myVar)) {

    console.log('This is an array')

  }

---

1.6. Removed Features 및 Deprecated Items

1) .andSelf() 제거

• .andSelf()는 제거되었으며, 대신 .addBack()를 사용해야 합니다.
• 수정 전:
  $('#element').find('.child').andSelf()
• 수정 후:
  $('#element').find('.child').addBack()

2) .load(), .unload(), .error() 이벤트 제거

• 이 이벤트 메서드들은 더 이상 사용되지 않습니다. 대신 .on()을 사용해야 합니다.
• 수정 전:
  $('img').error(function () {

    console.log('Image load failed')

  })
• 수정 후:
  $('img').on('error', function () {

    console.log('Image load failed')

  })

---

1.7. jQuery Methods의 동작 변경

1) .data() 동작 변경

• jQuery 3.x부터 data-* 속성 값을 저장하는 방식이 변경되었습니다.
  • 숫자, boolean 등은 자동으로 변환됩니다.
  • 만약 문자열로 저장하려면 명시적으로 처리해야 합니다.
• 수정 전:
  $('#element').data('value', '123')

  console.log($('#element').data('value')) // 123 (문자열)
• 수정 후:
  $('#element').data('value', '123')

  console.log(String($('#element').data('value'))) // '123'

2) :eq() 동작 변경

• 1.x에서는 음수 인덱스(:eq(-1))가 지원되었으나, 3.x에서는 동작이 엄격해졌습니다. 음수 인덱스는 제대로 작동하지 않을 수 있으니 slice()를 사용하는 것이 좋습니다.
• 수정 전:
  $('li:eq(-1)').addClass('last')
• 수정 후:
  $('li').slice(-1).addClass('last')

 

1.8 기타 변경 사항

1) jQuery.offset() 변경

• 요소가 문서에 포함되지 않은 경우 offset()이 undefined를 반환합니다.

2) jQuery.isFunction() 제거

• typeof와 instanceof로 대체해야 합니다.
  if (typeof myVar === 'function') {

    console.log('This is a function')

  }

3) $(document).ready() 간소화

• 최신 버전에서는 문서가 로드될 때 jQuery를 바로 실행할 수 있습니다.
• 수정 전:
  $(document).ready(function () {

    console.log('Document ready')

  })
• 수정 후:
  $(function () {

    console.log('Document ready')

  })