jQuery 4 공식 릴리즈

 (blog.jquery.com)
14P by GN⁺ | ★ favorite | 댓글 3개
  • 약 10년 만의 메이저 버전 업데이트로, jQuery 4.0.0이 정식 공개됨
  • IE 10 이하 및 구형 브라우저 지원 중단, 코드 경량화와 현대적 표준 준수 강화, 대부분의 사용자는 코드 변경 없이 업그레이드 가능
  • ES 모듈 기반 구조 전환으로 Rollup 빌드 도입, 최신 개발 환경과 호환성 확보
  • Trusted Types 및 CSP 지원 추가로 보안 정책과의 충돌 최소화
  • Deprecated API 제거 및 slim 빌드 축소로 성능 향상과 유지보수성 개선

jQuery 4.0.0 주요 개요

  • jQuery 4.0.0은 약 10년 만의 대규모 메이저 릴리스로, 오랜 개발 주기와 여러 프리릴리스를 거쳐 완성됨
    • 대부분의 사용자는 코드 변경 없이 업그레이드 가능
    • 이전 버전에서 누적된 레거시 코드와 비공개 파라미터 제거
  • 업그레이드 가이드와 jQuery Migrate 플러그인이 함께 제공되어 이전 버전에서의 전환을 지원
  • 배포는 공식 CDN 및 npm을 통해 가능하며, 타 CDN은 순차적으로 업데이트 예정

브라우저 지원 변경

  • IE 10 이하 지원 중단, IE 11은 jQuery 5.0에서 단계적으로 제거 예정
  • Edge Legacy, iOS 구버전(최근 3버전 이전), Firefox 구버전(최근 2버전 이전), Android Browser 지원 중단
  • 구형 브라우저를 지원해야 하는 경우 jQuery 3.x 유지 권장

Trusted Types 및 CSP 호환성

  • TrustedHTML 객체를 안전하게 처리하도록 Trusted Types 지원 추가
  • 대부분의 비동기 스크립트 요청을 `` 태그 기반으로 전환, CSP 오류 방지
    • "headers" 옵션 사용 시에는 여전히 XHR 사용 가능하나, scriptAttrs 사용 권장

ES 모듈 전환

  • jQuery 소스가 AMD에서 ES 모듈로 완전 이전
    • 기존 RequireJS 대신 Rollup을 빌드 도구로 채택
    • ES 모듈 기반으로 테스트를 별도 수행
  • ``을 통한 현대 브라우저 및 빌드 툴 호환성 확보

Deprecated API 제거

  • 오랫동안 비권장 상태였던 API 완전 제거
    • 제거된 함수: jQuery.isArray, jQuery.parseJSON, jQuery.trim, jQuery.type, jQuery.now, jQuery.isNumeric, jQuery.isFunction, jQuery.isWindow, jQuery.camelCase, jQuery.nodeName, jQuery.cssNumber, jQuery.cssProps, jQuery.fx.interval
    • 대체: Array.isArray(), JSON.parse(), String.prototype.trim(), Date.now() 등 네이티브 메서드 사용
  • IE 관련 코드 제거와 함께 gzip 기준 약 3KB 크기 감소

내부 전용 메서드 제거

  • jQuery 프로토타입에서 내부용으로만 사용되던 push, sort, splice 메서드 삭제
    • $elems.push(elem) 대신 [].push.call($elems, elem) 형태로 대체 가능

포커스 이벤트 순서 변경

  • W3C 명세에 따른 포커스/블러 이벤트 순서로 통일
    • 새 순서: blur → focusout → focus → focusin
    • 이전 jQuery 순서와 달라 호환성 주의 필요
    • IE를 제외한 모든 브라우저가 동일한 순서로 동작

Slim 빌드 개선

  • Deferreds 및 Callbacks 제거로 파일 크기 약 19.5KB(gzip)로 축소
    • 대부분의 브라우저가 네이티브 Promise 지원하므로 대체 가능
    • IE11 지원 필요 시 메인 빌드 또는 Promise 폴리필 사용 권장
  • Slim 빌드는 Ajax 및 애니메이션 관련 모듈을 제외해 약 8KB 더 작음

다운로드 및 배포

기여자 및 20주년 기념

  • 다수의 오픈소스 기여자가 패치, 버그 리포트, 테스트에 참여
  • jQuery 20주년을 맞아 Dallas에서 팀 재회, 창립자 John Resig도 Zoom으로 참여

주요 코드 변경 요약 (Changelog)

  • Ajax: 바이너리 데이터 처리 개선, CSP 오류 방지, JSONP 오류 처리 강화
  • CSS: `` 요소 크기 계산 수정, CSS 변수 공백 처리 개선, opacity 훅 제거
  • Core: AMD → ES 모듈 전환, DOMParser 사용, 구형 브라우저 대응 코드 삭제
  • Event: focus/blur 이벤트 네이티브 처리, event.which shim 제거
  • Selector: Sizzle 통합, :has 및 :even/:odd 개선, uniqueSort 체이닝 추가
  • Docs: HTTPS 링크 업데이트, README 및 CONTRIBUTING 문서 정비
  • Release: 빌드 및 배포 프로세스 자동화, release-it 기반으로 이전

요약

  • jQuery 4.0.0은 현대 웹 표준과 보안 정책에 맞춘 구조적 개편 버전
  • 레거시 코드 제거, ES 모듈화, 보안 강화, 경량화를 통해 장기 유지보수 기반 강화
  • jQuery 생태계의 20주년을 기념하는 상징적 릴리스로 평가됨
GeekNews Weekly에 포함된 글입니다. 에디터 코멘트 보기

함께 보면 좋은 글 β

tsboard   [-]

감동적인 20주년입니다. 이제는 쓸 일이 거의 없어지긴 했습니다만, 여전히 현장에서 유용한 도구로 계속 사랑받으면 좋겠습니다.

답변달기
shakespeares   [-]

엄청 질기네요.. ㅎㅎ

답변달기
GN⁺   [-]
Hacker News 의견들

  • 관련 글로, 레거시 코드베이스에서 최신 프레임워크를 쓸 수 없을 때 jQuery를 반응형으로 사용하는 방법을 잘 정리한 글이 있음
    Reactive jQuery for Spaghetti-fied Legacy Codebases

    • 예전에는 이런 용도로 BackboneJS를 많이 썼음. 지금도 여전히 유지보수되고 있음
      jQuery를 레거시 이유로 써야 한다면, Backbone이 현대 프레임워크로 넘어가기 전의 좋은 중간 단계가 될 수 있음
      BackboneJS 공식 사이트, GitHub 태그 목록
    • 이 글을 보니 예전의 jQuery 스파게티 코드 시절이 떠오름
      사실 과도하게 설계된 React 코드가 잘 정리된 jQuery 코드보다 나쁠 때도 있었음
      React가 품질 기준을 높인 건 맞지만, 때로는 익숙한 도구를 적절히 쓰는 게 더 효율적임
    • 나도 이 접근법을 써봤는데, 2010년대식 jQuery 난장판보다 훨씬 나았음
      특히 Userscript처럼 문제 범위가 작고 빌드 스텝이 귀찮을 때 잘 맞음
      사실 jQuery 없이도 querySelector, addEventListener, innerHTML만으로 충분히 구현 가능함
    • 마지막으로 만든 큰 jQuery 앱도 이런 반응형 패턴을 썼음
      Joomla CMS 안에서 커스텀 검색 프론트엔드를 억지로 끼워 넣어야 했는데, 꽤 잘 작동했음
    • 정말 좋은 패턴임. 여기에 signals를 추가하면 업데이트 함수가 자동으로 호출됨
      우리가 Reactive Mastro에서 하는 방식이 바로 이것임

  • 여전히 내가 가장 좋아하는 라이브러리 중 하나가 jQuery임
    내 커리어를 만들어준 도구라서 늘 애정이 큼

    • 요즘 애들은 새 프레임워크만 쫓지만, jQuery와 .NET Framework 덕분에 나는 늘 일거리가 있었음
    • 15년째 jQuery를 써오고 있음. 여전히 내 기본 선택지임
    • 누군가 jQuery에 Virtual DOM을 붙이면 좋겠음
      jQuery + jQuery UI + 플러그인 + AI 조합이면 엄청난 잠재력이 있을 것 같음

  • HTMX 얘기가 나올 때마다 “그거 그냥 jQuery로 세 줄이면 되는 거 아닌가?”라는 생각이 듦
    어쨌든 jQuery는 항상 문제를 해결해줬고, 그게 중요함

    • 맞음. HTMX는 원래 jQuery의 .load() 메서드에서 영감을 받은 intercooler.js에서 발전한 것임
      jQuery.load() 문서 참고
      퍼포먼스 작업 중에 발견했는데, 정말 jQuery에 대한 존경심이 큼
    • jQuery의 문제는 명령형 코드라서 여러 상태를 다루기 시작하면 복잡해진다는 점임
    • 요즘은 네이티브 JS를 쓰지만, $() 셀렉터 인터페이스의 우아함은 여전히 최고였음
      성능 차이는 미리 계산으로 보완할 수도 있을 듯함
    • Django를 쓸 때는 HTMX와 vanilla JS 조합으로 대부분의 문제를 해결함
      단순하면서도 SPA 같은 느낌을 줄 수 있음

  • Good ol’ jQuery, 정말 고마운 존재였음

  • jQuery가 여전히 유지되고 업데이트되는 걸 보니 반가움
    하지만 이 말은 React도 2060년까지 살아있을지도 모른다는 뜻이라 약간 슬픔

    • React 덕분에 앱 개발이 훨씬 나아졌음
      예전의 콜백 지옥을 생각하면 지금은 꿈같음
    • 2060년쯤이면 React Native가 v0.93쯤 됐을지도 모르겠음
    • 이미 사실상 두 개의 React가 존재함. 2060년엔 다섯 개쯤 될 듯함

  • 2000~2010년대 SPA 프레임워크가 흔하지 않던 시절, 나도 jQuery로 웹 개발을 배웠음
    그때 만든 것들 중 상당수가 아직도 돌아가고 있을 것 같음
    jQuery 팀에게 감사의 인사를 전함

  • jQuery 4.0 릴리스에 참여한 모든 사람들에게 축하를 보냄
    좀 더 구조적인 접근을 원한다면 JsViews라는 반응형 템플릿 시스템이 있음
    오래되고 안정적이지만, 최신 프레임워크만큼은 주목받지 못했음

    • JsViews는 처음 들어봤지만 흥미로움
      나는 개인적으로 cheerio와 alpine.js 같은 현대식 jQuery 스타일을 좋아함
      cheerio.js.org, alpinejs.dev
    • 나도 jQuery를 당장 쓸 일은 없지만, JsViews 소스는 공부해볼 만함
      다만 사이트 디자인이 너무 구식이라 채택률이 낮은 듯함
      그래도 빠르게 로드되고, 경량성이 인상적임
      jsrender.min.js는 12.82kB밖에 안 됨

  • 믿기 어렵지만 jQuery 4.0은 여전히 IE11을 지원함
    이는 jQuery 5.0에서 드디어 제거될 예정임

    • 4.0 출시를 늦추지 않기 위해 IE11 지원을 남겨둔 듯함
      관련 PR, 이슈 참고
      3.0이 10년 전에 나왔다는 걸 생각하면 꽤 놀라움
    • 하위 호환성을 위해서임. 아직도 IE11을 써야 하는 환경이 존재함
      그런 사용자와 제품을 지원해주는 게 고마움
    • Microsoft는 Windows 10 LTSC와 Windows 11의 Edge IE 모드에서 2032년까지 IE11을 지원할 예정임
    • 세상 모든 사람이 최신 하드웨어와 소프트웨어를 쓸 수 있는 건 아님
      여전히 오래된 시스템을 쓰는 학교 컴퓨터실도 많음

  • jQuery의 업그레이드 도구에 들어간 노력은 정말 감탄스러움

  • jQuery의 체이닝 문법을 여전히 사랑함
    15년 전 프랑스어로 jQuery 튜토리얼을 썼는데, 많은 조회수를 얻었음
    jQuery 확산에 조금이나마 기여했기를 바람

답변달기