쥬니니
285
2022-02-03 14:55:44 작성 2022-02-03 14:59:23 수정됨
37
9736

jQuery에 대한 슬픈 고찰




국비 > 웹 퍼블리셔 > 백엔드 개발자 > 필요하면 뭐든 다 하는 개발자 > 지상 최강의 개발자


이런 루트를 밟아온 사람이라 jQuery 시대 를 알고있습니다.
그런데, jQuery를 까는 글을 보고 너무나 안타까워서 이런 글을 쓰게 되었습니다.


어둠의 시대



jQuery를 까는 사람은 ES6와 SPA가 나타난 이후에 프론트엔드를 시작하셨을겁니다. 응애
jQuery 시대를 살았던 사람은 결단코 jQuery를 깔 수 없으니까요.


Node.JS, ES6와 SPA라이브러리의 등장은 JavaScript 생태계의 천지개벽과 같았습니다.
문법도 거지같고 아름답지 않고 쓰기도 어려웠던 JavaScript였기 때문이거든요.


let, const 도 없었으며, 대부분의 array method도 없었습니다.
지금 쓰는 문법은 다 없었어요. 아무것도 없었어요. 없었다구요.




아, 그런 문법이 있었는데요? 아뇨 없어요.
없었어요? 아니 없어요!


거지같은 JavaScript를 어떻게든 써야만 했습니다.
그래서 JavaScript로 왠만하면 뭘 안하던 그런 시대였습니다.


jQuery 시대




"jQuery는 쓸 줄 아는데 JavaScript는 쓸 줄 모른다."


라는 말이 존재하던 시대였습니다.

그 정도로 jQuery의 등장은 혁명이고 구원자였습니다.

그리피스?!


// JavaScript
document.getElementById('targetId');


// jQuery $('#targetId');


// JavaScript var xhr = new XMLHttpRequest(); xhr.open('https://...'); xhr.send();


xhr.onload = function(e) { // ... };


xhr.onerror = function(e) { // ... };


// jQuery $.ajax({ url: 'https://...', success: function(e) { // ... }, failed: function(e) { // ... }, });


이런 기초적인 예제 말고도 jQuery는 굉장히 많은 편의성을 제공했습니다.
jQuery는 개발자들의 생산성을 비약적으로 높여줬습니다.
그리고 프론트엔드에 많은 가능성을 제시했습니다. 빛과 소금


querySelector를 쓰면 되지 않냐? fetch를 쓰면 되지 않냐? 라고 하는 사람이 있겠지만, 앞에서 얘기했듯이 "없었어요."
querySelector 는 IE9부터 지원하는 문법입니다.
fetch 는 IE11 까지도 아예 쓸 수 없습니다.


그 시대에는 IE6 까지 지원하는게 일반적이었습니다.
(jQuery에 영감을 받아 탄생한 querySelector같은 문법들도 있을 정도입니다.)


jQuery는 그 모든걸 처리해주면서도 편리한 문법을 제공했습니다.
거의 모든 라이브러리는 jQuery의존성을 가지고 제작됐고
모든(이라고 할 수 있을 정도로) 개발자는 jQuery를 사용했습니다.


그리고 베헤리트마냥 버전이 안맞으면 다 제물로 바쳐졌...


ES6과 SPA의 등장




내가 알던 그 찐따같던 JavaScript 맞냐? TypeScript는 전설이다... 어?


그런 찐따같던 JavaScript도 Node.JS 가 나타나고, 브라우저에서만 돌아가던 찐따같던 언어가 아닌
수많은 가능성을 지닌 프로그래밍 언어로 재탄생하게 되었습니다.
그 전까진 프로그래밍 언어가 아니라 브라우저 언어였달까


그러면서 ES6가 논의되며 지금 우리가 사용하는 문법들이 탄생하게 되죠.
이 쯔음 Node.JS 시대가 시작되며 프론트엔드 개발자 라는 단어가 본격적으로 쓰이게 됩니다.
(그 전까진 프론트엔드 개발자 많이 쓰이는 단어는 아니었음)



"Github가 jQuery를 덜어냈다더라" 라던가, 그런 말들이 슬슬 들리기 시작했죠.
이제는 jQuery에 의존하지 않아도 충분히 개발이 가능한 시대가 된겁니다.
그 쯔음부터 jQuery를 쓰지 않는게 점점 트랜드가 되어갔습니다.


jQuery의 탄생이 혁명이었던 것 처럼 React같은 SPA의 등장도 혁명적이었습니다.
컴포넌트의 재사용이 그 전까지는 거의 뭐 없다시피 했거든요.


function someComponent(id) {
  return '<div id=' + id + '>'
    + 'some text'
    + '</div>';
}
target.addChild(someComponent('targetId'));
targetId.innerText = 'changed text';


이런 식으로 쓰고싶지도 않고 쓰지도 않았으니까요.


어 느새 부터 jQuery 는 안 멋져




이제는 JavaScript도 좋아졌고, Angular, React, Vue, Svelte 등의 프레임워크들이 나오면서
더 이상 jQuery가 없어도 개발이 충분히 가능해졌습니다.
오히려 버전 안맞아서 터지는 jQuery보다 낫지


옛날엔 "jQuery없이 쌩 JavaScript로 어떻게 하냐?" 라고 했는데
이젠 쌩 JavaScript도 쓸만해졌으니까요.


ES6와 SPA가 나오기 전 까지 암흑같던 JavaScript 생태계를 밝혀준 등불 역할을 잘 해주었습니다.


jQuery가 나쁜게 아닙니다. JavaScript가 발전하고 시대가 바뀐거지.
이젠 jQuery가 미래가 아닐 뿐입니다.


그러니 이 글을 보신 여러분은 앞으로 jQuery를 깎아내리지 않았으면 좋겠습니다.
한 시대를 밝혀준 등불이고, 이젠 그 등불이 없어도 JavaScript 세상이 밝아진 것 뿐이니까요.

48
9
  • 댓글 37

  • fender
    26k
    2022-02-03 15:34:03 작성 2022-02-03 15:34:51 수정됨

    재미있는 글 감사합니다. 사실 jQuery 뿐 아니라 개발과 관련한 대부분의 유명 기술들이 한 때는 '혁명'이었던 무언가에 가깝지 않나 싶습니다.

    자바 동네에서도 스트러츠가 그랬고, 풀스택 J2EE 컨테이너들이 그랬고, 우리나라에선 이상하게 인기가 없었던 JSF도 한 때는 끝내주게 강력하고 편리한 기술이었습니다.

    그러고보니 요즘은 인텔리제이에 밀려서 천대받는 이클립스도 저에겐 본문의 jQuery 같은 존재이던 시절이 있었습니다.

    당시에도 전 리눅스를 사용하다보니 당시 유행하던 Visual J++이나 VisualAge 같은 개발툴은 사용할 수 없었습니다.

    그래서 스윙 기반의 끔찍하게 못생긴 포르테(넷빈즈의 전신)나 상용인 제이빌더 정도밖에 선택지가 없었는데, 어느날 갑자기 마치 네이티브와 흡사한 룩앤필을 갖춘 IDE가 그 것도 무료로 등장했으니 그야말로 본문의 표현대로 '혁명이자 구원'이었죠.

    그러던 저도 이제는 이클립스를 다시 쓰라고 하면 너무 답답할 것 같기도 합니다.

    끊임없이 변화하는 흐름의 한 자락을 잡고 떠내려가지 않겠다고 발버둥 치는 것이 모든 개발자의 숙명인 것 같습니다.

    개중에 남들보다 조금 더 상류로 올라간 개발자는 대우를 받겠지만 언제든 헤엄을 멈추는 순간 남들과 똑같이 떠내려 갈 것입니다.

    그래서 가끔은 개발이 참 허무하다고 생각합니다. 잘 만든 소설이나 노래는 백 년이 지나도 공감을 얻을 수 있지만 프로그램은 아무리 잘만들어도 고작 십 년 안에 리거시가 되고 아무도 손대고 싶지 않는 쓰레기 코드가 되버리니 말입니다.

    21
  • 쥬니니
    285
    2022-02-03 16:34:07

    fender 

    저도 그렇게 생각합니다. 특히나 이클립스는요 ㅎㅎ
    처음 개발을 시작하는 사람들이 IDE에 대해 조언을 구할 때 이클립스에 대해 물어보면
    intellij를 쓰라고 말하며

    "이클립스가 나쁜게 아니라 intellij가 너무 좋은거야"

    라고 말합니다.

  • richard7
    2022-02-03 19:27:29

    재밌게 잘 읽었습니다 ㅎㅎ 

    하지만 jQuery는 안 멋졍.. 😒

  • 드루이드
    250
    2022-02-04 01:41:14

    좋은 글 감사합니다. 한때 Adobe Flex 에 빠져 살던 시절이 떠오르네요 ... 

  • 음메리카노
    68
    2022-02-04 08:52:13

    재밌는 글 잘 읽었습니다

  • HJOW
    6k
    2022-02-04 11:35:11 작성 2022-02-04 11:35:39 수정됨

    jQuery 그냥 유틸성으로 써도 충분히 훌륭한 라이브러리입니다.

    다른 JS프레임워크(React 등) 하고 같이 쓸수도 있고

    또 jQuery 특성상 코드의 양 자체가 줄어듭니다. (querySelector보다 $()가 더 짧죠.)

    무엇보다 IE 아직도 지원하고 유지보수도 아직도 지원하고 있죠.

  • 하루히즘
    1k
    2022-02-04 14:58:42
    내공이 느껴지네요 ㅎㄷㄷ 잘 읽었습니다
  • abtso
    613
    2022-02-04 15:45:35

    한편 LISP에서는:

    "아니 우리는 30~40년 전부터 쓰던 게 왜 이제 와서 화제가 되고 널리 퍼져서 쓰이기 시작하는거야?"


    (물론 LISP은 싫어하는 사람이 많겠습니다만)

  • standAlone
    212
    2022-02-04 16:03:32

    결론은 jQuery는 이제 지양해야하는 게 좋다는 거죠?

  • yeori
    4k
    2022-02-04 16:15:49

    웹표준이란게 없던 시절 미쳐 날뛰는 브라우저마다 따로 코드를 구현하지 않아도 되게 해줬던 라이브러리

     jquery만큼 전세계 웹개발자들 생산성을 높여준 라이브러리가 별로 없을겁니다.


  • hoon Cli
    110
    2022-02-04 17:48:02

    오우 너무 힙한 글이네요 ㅋㅋ 재밌게 잘봤습니다

  • 마라토집착
    7k
    2022-02-04 21:44:05 작성 2022-02-04 21:46:38 수정됨

    이클립스를 만든 win32 native 콜하는 swt와 jface로 

    먼가 만들던 클라이언트/서버 , 비쥬얼베이직  유사하게 자바 (win 32 api) 코딩 하던 시절도 이클립스 초창기에 있었죠

    혹시 swt와 jface 로 win32 프로그램  만드는 si 단기 플젝 해보신분 계시나요?

    이클립스 룩 앤 필이 느껴지는 UI 랴이브러리죠

  • 마라토집착
    7k
    2022-02-04 21:55:43 작성 2022-02-04 22:14:54 수정됨

    Jquery 로는 예전 active x 레벨의 퍼포먼스를 내는 ui grid 기능을 못만들겠더라구요  도저히 불가능요

    웹 브라우져에 

    엑셀 처럼 rows 는 10만개, columns 는 60개정도를 max로 해서 셀단위 (따로 굳이 상세팝업 안열고)  에디팅이 다양하게 되며 (셀 더블클릭시 달력/masked format text/ 콤보박스/ drop down list등)

    .  소팅(natural + 특정업무 단위)  되며 동시에 스크롤시 

    대용량 디비와 연동되어 상하 스크롤시 버벅거림  없는 비동기  loop event 가 잘구현된 javascript 모듈을

    jquery 로 구현이 불가능요

    근데 리액트는 됩니다.  ㅎ 일단 레퍼런스 오픈소스가 있음

    Nhn 에서 만든 toast ui grid 오픈 소스 보고 많이 배우고 그 소스 복붙해서 한국 si 특화된 spread sheet , 그리드 만든적 있네요 

    이것 빼놓고는 si 에서 ui ux 관련 모듈만들때 jquery 로 다 해결됩니다 


  • 마구마구
    1k
    2022-02-04 23:05:13 작성 2022-02-04 23:07:28 수정됨

    여전히 native javascript 보다는 jquery가 편하죠. 본래 목적도 거기에 있었고. 간결하고 편리한 사용. 성능 문제야 굳이 언급할 필요가 있나요? 처음 나왔을때부터 그거 모르는 사람 있었는지 싶고 애초에 그런 목적이 아니에요. 유행이야 지났기는 하지만 특수 목적이 아닌 이상에야 legacy 취급할 필요가... 

    저는  react, vue다 하는데 react,vue랑 jquery랑 비교하는 것도 이해가 안됩니다. 그 함의 함수 몇개 비교되고 대체 되는 게 있어서 그렇게 생각하나... 이키텍처를 할때 목적이 완전히 다릅니다. 둘 다 같이 쓸 쓰도 있구요 깔끔한 게 최고라 생각하는 입장이라 보통은 react나 vue를 쓰면 jquery를 안쓰기는 하는데 여전히 SPA가 아니면 페이지 단위로 인스턴스를 만들지 않고 그냥 편하게 jquery 씁니다. 

    그런데 이상한 난데 없는 조롱이나 혐오 하지 마시고 유행 쫓음이나 제약을 두지 마세요. 

  • cppp
    303
    2022-02-05 11:55:42

    웹은 너무 빨리빨리 바뀌는 것 같습니다ㅠ

    자 그러니 다들 C코드나 칩시다 ㅎ

  • 한량개발자
    1k
    2022-02-05 17:00:51

    벨로그에서도 보이시고 여기서도 보이시니 좋네요!

    자주 등장해주세요!

  • 수평선
    1k
    2022-02-05 20:38:44

    제가 느끼는 jquery효과(?) 라면 

    그냥 getElementById 로 가져와서 로직을 걸면 그당시에는 동작하는데

    유지보수하다가 해당 요소를 삭제하제후 스크립트를 그대로 두면 에러가 나죠.

    근데 $() 로 사용하면 요소가 없으면 그냥 동작안할뿐 에러가 안나요.

    그래서 그냥하는 유지보수에 적절해요. 큰 신경을 안써도 별 에러가 안나요.

  • NOZ
    313
    2022-02-05 21:01:58 작성 2022-02-15 22:59:25 수정됨

    저도 JavaScript는 ES5부터 시작했고, 백엔드가 메인이다보니 부트스트랩을 썼더랬죠.

    BootStrap 5 알파 버전이 나오면서, 당시에 개발자가 블로그에 올렸던 내용이 인상적이었습니다.

    "jQuery 는 지난 10년간 사람(개발자)들에게 JavaScript 의 동작에 전례없는 접근을 보여주었습니다. (중략) 아마도 가장 중요한 것은 JavaScript 그 자체가 변화했다는 것이며, 그것은 그 자체로 jQuery 가 성공했음을 내포하고 있습니다. 저와 같은 사용자들을 위해 그것을 가능하게 해준 jQuery 제공자 및 관리자께 감사드립니다."

    (출처: https://blog.getbootstrap.com/page/7/)

    이처럼 jQuery 의 그 당시 공헌도는 대단했고, 사실 아직 여전히 많이 쓰이는 것 같습니다. 특히 옛날 시스템들 고도화나 차세대 개발 등의 프로젝트를 들어가면 기존에 있던 jQuery 를 그대로 쓰는 경우도 많은 것 같아요.

  • 팬더재즈Bass
    2k
    2022-02-06 09:18:10 작성 2022-02-06 09:18:50 수정됨

    슬픈고찰? 프로젝트에서 재밌게 사용했던 기억이 있는데

    슬픔의 대상이 되다니 안타깝네요


  • 초보IT도전
    97
    2022-02-06 15:56:30

    저 이 글 velog.io에서 읽었었는데 여기서 다시보니 반갑네요!

    재치+유익글은 항상 추천!

  • 박창용
    4
    2022-02-06 18:25:47
    사정때문에 아직 IE 를 버리지 못하는 입장에서는 ㅠ
    jquery가 아직은 필수네요 ㅠ
    ES6는 익스가 앙대 ㅠ
  • leemong77
    1k
    2022-02-07 10:46:35

    사실 저는 JQUERY 이상의 라이브러리는 안나올거라 생각했습니다만.


    가상돔!!   이거보고 혁명을 느꼇습니다.

    그나저나 격세지감이네요~~~  

    VBScript , javascript 처음 배우던 시절이 있었는데

  • leemong77
    1k
    2022-02-07 10:47:14

    그런데 글 한번 정말 정성스럽게 작성하셨네요!

  • curioustore
    1k
    2022-02-07 11:50:06

    블리자드 와우같은 존재죠

  • exoluse1
    309
    2022-02-07 12:11:24

    jQuery를 구시대 유물이라고 까기만 하는 시대가 된거같아 안타깝습니다.

    태초의 목적은 저마다 다른 브라우저의 호환이 안된 까닭이었고 그걸 해결하기 위해 API를 제공하였죠.

    실제로 프로젝트를 진행하다 보면 코드의 가독성과 코드의 총량으르 보면 그렇게 썩 나쁜 편은 아닙니다.

    왜 jQuery를 써야 하며, 쓰지 말아야 할지를 확실하게 잡고 가야 하지 않을까요?

  • 민트초코치킨
    71
    2022-02-07 12:15:30

    밈이몇개에옄ㅋ잘보구갑니당,,

  • devhjj
    800
    2022-02-07 12:17:47

    이젠 jquery를 버리고 react 좀 해봐야하는데 실천이 안되네요 ㅠ

  • Constant
    497
    2022-02-07 12:52:42

    이걸 모르는 분들이 은근히 많아요. 트렌드랍시고 레거시는 쓰레기고 퇴보된 기술이다 라고 인식하는 분들이 많으신데, 기본적으로 소규모 프로젝트에선 압도적으로 JQuery가 프로젝트 유지보수에 있어서 유리합니다. 기술을 기술력으로만 보는게 아니라 트렌드로 보는 사람들은 개발자로서 창피한 줄 알아야 합니다.

  • leemong77
    1k
    2022-02-07 14:06:51

    가상돔 프론트, 리액트 뷰 앵굴러  애내들 떄문에

    jquery 뿐만 아니라 JSP 도  가버림

    나에게 선택권을 주면 JSP 안쓸거임? JSTL 도 이제 바이바이

  • 장독깨기
    5k
    2022-02-07 20:00:52 작성 2022-02-07 21:16:48 수정됨

    ㅎㅎㅎ jquery 가 어쩌다 천덕꾸러기에 조롱의 대상이 됐는지...

    저런 식으로 주장만 하면서 조롱을 할 게 아니라

    똑같은 페이지를 javascript, jquery, react 로 만들어 두고

    비교를 해보는게 좋았을 거 같네요. :)

    아, 그리고 중간에 재사용 얘기하면서 펑션에다 엘리먼트 문장을 만드는데,

    저렇게 안하죠. 엄연히 템플릿이 있습니다. 

  • 니르바나
    2k
    2022-02-08 08:12:52

    세상이 상대적으로 무언가와 의존되어 보여지는 것이니 어쩔 수 없는거죠.

  • IdwtbaSoldier
    376
    2022-02-08 10:17:29

    재밌는 글 잘 봤습니다.


    글솜씨가 정말 부럽네요 ㅎㅎ.

  • Qs
    1k
    2022-02-08 16:50:12

    엄청난 필력이네요

  • k2021
    339
    2022-02-08 19:06:27

    react, vue 도 언젠가 jquery 취급 받는 날이 오겠죠?

    흐르는 건 막을 수 없지만

    보다 나은 미래를 위한거라 생각하며 계속 공부하며

    변하려 노력해야겠습니다. 

    오늘도 모두 홧팅요

  • 큰붕어빵
    64
    2022-02-09 16:24:17
    회사에서 잠깐 쉬면서 봤는데 정말 재밌게 봤습니다. ㅋㅋㅋㅋ
  • 김쿠팡
    400
    2022-02-16 11:47:42

    제가 소싯적에 자바스크립트 좀 하다가 때려친 이유가 있네요.

    "문법도 거지같고 아름답지 않고 쓰기도 어려웠던 JavaScript였기 때문이거든요."

  • 금요일은 새벽 3시에 자자
    38
    2022-04-10 23:42:31

    좋은글 감사합니다. ㅎㅎ


  • 로그인을 하시면 댓글을 등록할 수 있습니다.