00:00:00드디어 jQuery 4가 출시되었습니다. 걱정 마세요, 과거로 시간 여행을 한 게 아니라
00:00:042016년 이후 처음으로 진행된 메이저 업데이트일 뿐이니까요. 2년의 베타 기간을 거쳐
00:00:09jQuery가 처음 등장한 지 20년 만에 나온 버전입니다.
00:00:12아마 놀라실 수도 있겠지만, jQuery는 여전히 꽤 중요합니다. 전 세계 웹사이트의 88%가
00:00:17여전히 사용 중인데, 아마 워드프레스 덕분이겠죠. 하지만 살펴보면 꽤 유명한 기업들도
00:00:21여전히 사용하고 있습니다. “망가지지 않았다면 고칠 필요 없다”는 말처럼요.
00:00:25다만 이번 업데이트는 몇 가지 문제를 일으킬 수도 있습니다. 제작진이 수년간 미뤄왔던
00:00:29모든 하위 호환성 중단 변경 사항들을 이번에 다 적용했거든요. 오래된 코드 정리,
00:00:32지원 중단된 API 및 문서화되지 않은 함수 제거, 그리고 수많은 버그 수정이 포함되었습니다.
00:00:38그럼 바로 본론으로 들어가서 주요 변경 사항을 살펴보고, 20년 동안 jQuery가
00:00:42얼마나 발전했는지 알아보겠습니다.
00:00:49첫 번째 큰 변화는 인터넷 익스플로러 10 이하 버전에 작별을 고했다는 점입니다.
00:00:53이에 대한 지원이 이제 중단되었습니다. 혹시 인터넷 익스플로러 11로 보고 계셔도
00:00:58너무 당황하진 마세요. 해당 버전은 jQuery 5까지는 지원될 테니 구독 버튼을 누를 시간은
00:01:02충분합니다. 이와 함께 엣지 레거시, 최근 3개 이전의 iOS 버전,
00:01:07최근 2개 이전의 파이어폭스 버전, 그리고 안드로이드 기본 브라우저 지원도 중단되었습니다.
00:01:12정말 현대화되고 있다는 게 느껴지시죠? 다음 세 가지 변화도 그에 관한 내용입니다.
00:01:17두 번째 변화는 jQuery 소스 코드를 AMD에서 ES 모듈로 마이그레이션했다는 점입니다.
00:01:22이제 별다른 트릭 없이도 Vite, Webpack 같은 최신 빌드 시스템과 잘 연동될 것입니다.
00:01:27그러니 다음 프로젝트에서 재미 삼아, 혹은 예전 추억을 되살려
00:01:31한번 설치해 보시는 건 어떨까요?
00:01:33추억 이야기가 나와서 말인데, 이번 업데이트는 자바스크립트가 그동안
00:01:36얼마나 발전했는지 보여줍니다. 세 번째 변화로, 수많은 jQuery 함수들이 삭제되었습니다.
00:01:41자바스크립트가 그 기능들을 따라잡았기 때문이죠. isArray, parseJSON, trim, now,
00:01:46isNumeric, isFunction 등 아주 많습니다. 이제 별도의 라이브러리 없이도
00:01:51자바스크립트 자체만으로 이 모든 것을 할 수 있습니다. 애초에 이런 기능들을 위해
00:01:56별도 라이브러리가 필요했다는 게 지금 보면 신기하지만, 언어란 그렇게
00:02:00진화해 나가는 법이니까요.
00:02:01진화에 대해 더 이야기하자면, 브라우저도 마찬가지입니다. 현대화 업데이트의 마지막인
00:02:06네 번째 변화는 드디어 포커스 순서 문제를 해결했다는 점입니다. 잘 모르셨겠지만,
00:02:11수년간 브라우저마다 focus와 blur 이벤트 순서가 제각각이었습니다. 그래서 jQuery는
00:02:15일관성을 위해 자체적인 규칙을 사용해 왔죠. 하지만 이제 오래된 브라우저들을 제외하고,
00:02:20IE를 뺀 모든 지원 브라우저의 이벤트 순서가 동일해졌습니다. 덕분에 jQuery는
00:02:24더 이상 네이티브 동작을 덮어쓰지 않게 되었습니다.
00:02:29제작진이 jQuery를 현대적으로 만드는 데 집중했다는 게 보입니다. 과거에 유용했던 기능 대부분이
00:02:34결국 자바스크립트에 기본으로 추가되었으니까요. 하지만 여전히 jQuery에서
00:02:38현대화할 수 있는 것들이 있습니다. IE 11을 쓰지 않는다면 Promise로 대체 가능한 Deferred나
00:02:42콜백, 혹은 CSS로 훨씬 쉽게 구현할 수 있는
00:02:47애니메이션 같은 것들 말이죠. 한 단계 더 나아가고 싶다면,
00:02:52이런 부가 모듈들을 제거한 '슬림 빌드'를 사용해 보세요. 용량이 19.5KB에 불과합니다.
00:02:55필요한 사람들을 위해 전체 패키지는 유지하면서, 요즘엔 필요 없는 기능들을 뺀
00:03:01슬림 빌드를 제공하는 방식은 아주 영리한
00:03:04접근 방식이라고 생각합니다.
00:03:08주요 변경 사항은 여기까지지만, 당연히 수많은 버그 수정과 미세한 조정도 있었습니다.
00:03:12일부는 수년 전으로 거슬러 올라가는데, 제가 찾은 가장 오래된 건 2014년의 것입니다.
00:03:17JSON을 자동으로 JSONP로 변환하던 문제인데 이제 해결되었죠. 또한 2015년의 이슈인,
00:03:22저도 겪어본 기억이 있는 문제도 해결되었습니다. 바로 jQuery CSS 세터가
00:03:28단위가 없는 숫자 뒤에 자동으로 'px'를 붙이던 문제죠. 이 또한 수정되었습니다.
00:03:33직접 확인해 보시면 오타 수정 같은 자잘한 것들까지 포함해
00:03:37훨씬 더 많은 수정 사항이 있습니다. 이 영상에서 다 다루기엔 양이 너무 많네요.
00:03:42개인적으로 저는 웹 개발 역사의 멋진 한 페이지를 장식한 jQuery가
00:03:46어떻게 발전해 왔는지 살펴보고 싶었습니다. 여전히 활발히 사용되고 관리되는 도구에
00:03:51“역사”라는 표현은 조금 결례일지도 모르겠네요. 물론 오늘날 React 같은 최신 프레임워크
00:03:56대신 굳이 jQuery를 쓰라고 권하진 않겠지만, 웹이 여러 기술 계층 위에 세워졌다는 점을
00:04:01상기시켜 줍니다. 때로는 지루하고 단순하며 오래된 도구들이 웹을 지탱하고 있기도 하니까요.
00:04:06특히 아무도 감히 건드리지 못하는 중요한 레거시 앱들이 그렇습니다. 여기까지 봐주신 분들께
00:04:10궁금하네요. jQuery를 써보셨나요, 아니면 지금도 쓰고 계신가요? 댓글로 알려주시고
00:04:15구독도 잊지 마세요. 그럼 언제나 그렇듯,
00:04:19다음 영상에서 뵙겠습니다.