시릇
68
2021-11-19 14:35:08
21
892

바닐라 Javascript VS jquery


A : jquery는 되도록 쓰면 안된다. javascript 를 써야한다.

B : jquery가 뭐가 문제냐? 쉽고 사용하기 간편하지 않느냐?


A 타입의 많은 사람들은 말합니다.

대형 웹 서비스 프로젝트에는 어울리지 않는다. javascript 도 제대로 모르면서 jquery 만 고집해서 쓰는건 나쁜 버릇이다. 앞으로 사장될 라이브러리이다. 느리다.


B 타입의 사람들이 반박합니다.

대형 웹 서비스에서도 사용되는 것을 봐왔다. 그리고 느려봤자 얼마나 느려지는가? 아무리 트래픽이 많은 사이트라 하더라도 jquery를 사용한다고 해서 눈에 띄게 느린 것을 본 적이 없다. javascript는 기초 지식만 알고 있으면 된다. 앞으로 사장될 라이브러리라고 하면서 파생 라이브러리가 이렇게 많은데 (ui, dialog, datepicker 등) 어떻게 사장되냐


아직 3년차 밖에 되지 않은 초복 개발자지만, 저런 논쟁은 수도 없이 봐왔습니다. ㅋㅋ

특히나 전 사수가 B 타입의 jquery 옹호자 였는데 저런 식으로 반박을 많이 하더라고요.


여러분들의 생각은 어떤가요? 오키 분들의 의견이 궁금합니다.


0
  • 댓글 21

  • 20170923
    2k
    2021-11-19 14:46:47

    vue, angular도 아니고 바닐라요..? 타임머신타고 10년 전으로 돌아온 줄 알았네요

  • clowns123
    124
    2021-11-19 14:50:25

    개발할 때 선택지가

    바닐라 js vs jquery가 있으면

    1. 나중에 프론트엔드 프레임워크로 마이그레이션 할 생각이 있다  or spa로 변경할 생각이 있다.-> js

    2. 그냥 대충 빨리 만들고 추가될 기능이 별로 없다 -> jquery

    이정도일거 같은데 단순히 웹사이트 찍어낼려면 jquery가 나쁘진 않다고 생각해요


  • MADELITE
    985
    2021-11-19 14:59:23

    전 백엔드라서 잘 모르긴 하는데 바닐라 JS는 프론트엔드 기술면접 할 때나 쓰는 거 아니었나요??

  • fender
    24k
    2021-11-19 15:03:12 작성 2021-11-19 15:16:51 수정됨

    일단 절대적인 것은 없다는 전제로, 제이쿼리가 장기적으로 사장될 가능성이 높은 기술인 건 분명하다고 봅니다.

    가장 큰 이유는 본문에서 언급한 성능보다는 현재 유행하는 개발 흐름과 맞지 않기 때문입니다.

    풀어서 말하면, 요즘 프론트엔드 기술은 대체적으로 어떤 상태값을 바탕으로 화면을 '렌더링'한다는 개념으로 접근하는 경우가 많습니다.

    그리고 그런 접근에서 상태의 변화를 감지해서 화면을 갱신하는 흐름을 무시하고 외부에서 제이쿼리 같은 라이브러리로 DOM을 직접 조작하는 것은 금기시하는 방식입니다.

    또한, 대부분의 주요 프론트엔드 기술은 컴포넌트 기반으로 한 재사용을 지향하고 있기 때문에 컴포넌트의 동작과 렌더링에 필요한 모든 것을 컴포넌트 경계 안에 가두려고 하는 경향이 있습니다.

    반면 제이쿼리는 태생부터 CSS 셀렉터로 임의의 DOM을 잡아서 무언가 조작을 하겠다는 개념이기 때문에 그런 접근과 충돌할 가능성이 높습니다.

    그리고 전통적으로 제이쿼리를 쓰는 이유는 방금 언급한 CSS 셀렉터를 폭넓게 사용해서 DOM 조작을 할 수 있다는 점, 그리고 다양한 플러그인이 있다는 점 두 가지 정도를 들 수 있는데, 첫 번째는 요즘 대부분의 브라우저가 네이티브하게 동일 기능을 지원해서, 그리고 두 번째는 리액트 등 현대적 프론트엔드 기술도 관련 생태계가 충분히 발전했기 때문에 더 이상 큰 장점이라 하기 어렵습니다.

    또한, 이러한 생태계의 변화는 단순히 이젠 다른 기술을 제이쿼리 만큼 편리하게 쓸 수 있다는 것에 그치는 것이 아니라, 앞으로 점점 제이쿼리 관련 플러그인 등은 신규 발표나 업데이트가 드물게 일어난다는 것을 뜻하기도 합니다.

    종합해보면, 단순히 기능이나 성능 비교를 할 것이 아니라 접근 방법이나 생태계의 변화를 고려하면 제이쿼리가 사양 기술임은 부정할 수 없다고 봅니다.

  • jw_891
    1k
    2021-11-19 15:19:46

    Jquery가 js의 모든 것인줄 알고 쓰는 경우만 아니면 선택 문제라고 생각합니다. 

    근데 바닐라랑 jquery랑 비교하면 jquery 쓰는게 그래도 편하지 않나요?

  • fender
    24k
    2021-11-19 15:24:45

    저는 기본적으로 질문이 복잡한 UI 화면 등이 필요없는 경우, 또는 그런 것이 필요하면 바닐라JS에도 이런 저런 현대적 프론트엔드 관련 모듈을 사용하는 것으로 이해했습니다.

    그렇지 않으면, 예컨대 데스크탑 프로그램을 만들어야 하는데 VB6를 써야하냐 아니면 쌩 C++으로 위젯 툴킷부터 직접 만들어 쓸거냐 같이 별 의미없는 비교가 되지 않을까 싶습니다.

  • 아이디
    599
    2021-11-19 15:25:05

    좀 공감가는 얘기네요. 댓글들도 그렇고요.

    저는 개발을 15년부터 시작했는데 15년도에도 jquery는 끝물이라는 얘기가 있었습니다.

    그래서 다른 프로젝트가면 jquery말고 다른거 쓰겠지 그때 공부하지 하고 계속 jquery공부만 하다가 

    현재까지도 프로젝트 투입하면 10중 8~9는 jquery써서 따로 공부를 안하고 있네요.

    앵귤러js가 뜬다고 하더니 어느순간 묻히고 다른 것 또 있었는데 그것도 뜬다고 하더니 묻히고(다른 곳은 모르겠는데 제가 일하는 곳에서는 쓰는곳 못봤습니다.)

    언젠가 진짜 끝물이 될텐데 언제 될지 몰라 불안하긴 해요.

  • Mambo
    6k
    2021-11-19 15:33:42

    제이쿼리는 사용하지 말아야할 만큼 잘못된 라이브러리가 아니지만,

    많은 개발자들이 생각하는 프로그래밍 방식의 변화가 반영된 결과라고 생각합니다.

    React와 Vue에서 생각하는 추상화 중 하나는 코드의 재사용성을 위한 컴포넌트라고 해요.

  • 개발 까마귀
    243
    2021-11-19 15:39:10 작성 2021-11-19 16:05:09 수정됨

    jqeury는 브라우저끼리의 호환성이 안 맞아서 만든겁니다. 팩트는 Jquery 보다 javascript DOM이 더 빠르다는 겁니다. Javascript가 못생긴 시절에는 jquery가 사용하기 편했고 브라우저 신경을 안 쓰고 코딩을 할수있으니 썼지만 요즘은 써야될 메리트는 없다고 생각합니다. 아직 jquery가 비중적으로 높은 사이트는 거의 만들어진지 오래된 사이트들입니다. 요즘 만들어지는 사이트들은 react나 vue로 해서 만들죠 하지만 HTML CSS Javascript로 만 구현 할시에는 라이브러리를 붙이면 거의 90% 확률로 jqeury를 붙여야하기는 하죠 하지만 라이브러리에서 jquery를 사용하지만 실제 코드를 짤 때는 다 javascript로 코드를 많이 짜더군요.

  • BlueFestival
    1k
    2021-11-19 16:17:03

    일단 섞어쓰면 생명주기 관리가 좀 복잡해집니다.

  • 김땔감
    31
    2021-11-19 16:32:38

    제이쿼리는 기본적인 조작은 문서가 잘되어있어서 배우기가 쉬운편이라서 바닐라js랑 같이 어느정도 배워두는게 나을겁니다 제이쿼리를 사용하는 프로젝트를 경험할수도있으니 코드를 읽고 수정할 정도만 배워두면 될듯

  • 장독깨기
    3k
    2021-11-19 18:57:03

    B는 논리가 있죠. 사용하기 쉽고 간편하다. 효율적이란 얘깁니다.

    반면 A는 어떤가요.

    어울리지 않는다. 유행과 맞지 않다. 나쁜 버릇이다. 사장될거다?(돗자리까나요.ㅋ)

    이게 논리로 보이시나요? ㅎㅎ

    마지막에 "느리다" 하나 있습니다.

    엄밀히 따지면 느립니다. 뭐든지 래핑하고  추상화하고 하면 조금이라도 느려지게 돼 있습니다.

    근데, 이거 느려서 못 쓰겠다 하면 다른 프레임웍(리엑트, 뷰 등)이나 라이브러리도 쓰면 안되겠죠. ㅋ

    성능은 수용 가능한 범위이면 오케이란 얘깁니다.

    jquery 느려서 못 쓰겠다가 말이 되나요. 억지로 갖다 붙인 거고,

    혹시나 성능에 영향을 준다 그러면, 그 부분만 자바스크립트로 하면 됩니다. 같이 쓸 수 있잖아요.

    그리고, 서비스 시스템의 성능은 프런트 쪽에 있지 않고 백엔드 쪽에 있는 겁니다.


    jquery 배우는 게 어려운 것도 아니고 jquery든, 리엑트든 뭐든 관심 있으면 공부하면 될 일이고,

    프로젝트 할 때는 제일 효율적이다 생각하는 거 하면 될 일 입니다.

    근데 갑이 제약을 건다. 그럼 어쩌겠습니까. 그거 하면 됩니다. :)


  • fender
    24k
    2021-11-20 03:33:50 작성 2021-11-20 03:34:27 수정됨
    서비스 시스템의 성능은 프런트 쪽에 있지 않고 백엔드 쪽에 있는 겁니다.

    장독깨기 // F12 한 번 눌러보시죠. "Performance" 탭이 왜 달려있다고 생각하시는지... 요즘엔 그걸로도 모자라서 리액트 전용 프로파일러도 씁니다.

    프론트엔드 관련 기술은 1도 관심없고 모르는 분이 왜 그렇게 줄기차게 언급하면서 무지를 자랑하시는지 모르겠습니다.

  • 장독깨기
    3k
    2021-11-20 06:30:10 작성 2021-11-20 06:30:29 수정됨

    fender

    그러니까, 서비스 시스템의 성능이 프런트 쪽에 있다 이걸 주장하고 싶은 건가요? 

    이거 참... 시니어 맞는거죠. 프런트만 쭉 하신건가.  이러기도 힘들텐데..

    그니까, 네이버, 카카오, 유투브,.. 그 많은 동접에 그 성능이 프런트 덕분이다? 

    아이고 할 말이 없습니다. 이건 너무 하잖아요. ㅎㅎㅎ


    주니어분들 프런트만 너무 고집하면 연차 쌓여봤자 이렇게 되는 겁니다.

    어느 정도 익숙해지면 다른 부분도 좀 살펴 보는 게 좋습니다. :)

    -1
  • fender
    24k
    2021-11-20 08:47:59 작성 2021-11-20 09:24:42 수정됨

    장독깨기 // 그러게요... 진짜 너무하네요 ㅎㅎ; "A는 학생이 아니라 B가 학생이다"의 반대가 "A는 학생이고 B는 학생이 아니다"인가요? A, B 둘 다 학생이거나 아닐 수 있는 건 선택지에 없나요?

    중학생도 아는 수준의 논리 문제를 모르시는 건지, 아니면 어떻게든 논쟁에서 이기려고 알면서도 논지를 비트시는 건지 모르겠습니다.

    대뜸 남 경력부터 넘겨 짚으시는 걸 보니, 어디서 그렇게 한 번도 제대로 안 해본  분야가지고 이러니 저러니 무지를 자랑하는 용기가 나왔는지 짐작은 갑니다.

    전 대충 실무 경력 23년 중 절반 넘게 자바 백엔드를 한 것 같습니다. 나머지 절반도 클라우드니 도커니 하는 백엔드 기술이 대부분이고 말입니다.

    저는 백엔드 경험도 님 만큼은 있고 프론트도 공부하는 중인데, 님은 정작 프론트엔드 하고는 담을 쌓아 놓고 저한테 프론트엔드 기술에 대해 가르치려 드는 것인가요?

    그것 만으로도 기가 차는데 제가 프론트만 해서 백엔드를 모른다며 "다른 것도 좀 공부해라"일갈하는 건 대체 뭔 용기인지 모르겠습니다.

    안해 본 건 제발 우기지 말고 모른다고 인정하셨으면 좋겠습니다. 개발자가 뭘 안해봤다는 건 부끄러운 게 아닙니다. 안해 봤지만 별거 아니라고 무시하면 스스로 성장 가능성을 닫는 것이고, 안해 봤지만 해본 사람들하고 논쟁하면서 아는 척을 하면 남보기 민망해지는 것 뿐입니다.

  • Mambo
    6k
    2021-11-20 09:40:47

    웹 서비스의 성능은 프론트엔드에 있지 않다는 부분을 fender님은 지적하고 싶으셨으나 장독깨기님은 다르게 받아들이신 것 같습니다.

    어쩌면 의도하지 않게 해석되는 한국어의 어려움이 문제이지 않을까 생각합니다.

    백엔드 뿐만 아니라 프론트엔드 성능 문제에 대한 분석과 최적화에 대한 정보는 많습니다.

    https://developers.google.com/web/tools/lighthouse

    https://ui.toast.com/fe-guide/ko_PERFORMANCE

    시스템의 성능을 사용자 입장에서 본다면 프론트엔드의 중요성이 더 크지 않을까 생각합니다. 유튜브에서 도입한 스켈레톤 UX도 사용자의 체감을 줄이기위한 하나의 방법이라고 하니까요.

  • 장독깨기
    3k
    2021-11-20 12:12:49

    Mambo

    본 글에서 A 타입의 사람들이 내세우는게

    어울리지 않는다. 유행과 맞지 않다. 나쁜 버릇이다. 사장될거다? 라는 허황된 주장과 

    본인들도 궁색한지 jquery 가 느리다 라는 논리를 내세웠고,

    제 댓글은 말도 안되는 억지다 얘기했습니다.

    실제 서비스 시스템의 성능에 프런트가 전혀 영향이 없진 않을테고 또 나름의 최적화나 기법을 동원 하겠지만,

    백앤드와 비교하는건 어불성설입니다. 이 정도 관점에서 이해해 주셨으면 좋겠습니다. :)


    fender

    시스템 성능에 프런트가 영향이 전혀 없진 않으니 프런트도 학생이다? 파리도 새다 뭐 이건가요?ㅋ

    자바? 백앤드, 클라우드, 도커 백앤드 기술? ㅎㅎ 하이고 역시나 할 말이 없습니다.

    그리고, jquery 가 유행에 뒤떨어지니 결국 사장될거다?

    프로그래머란 분이 시니어나 돼서  뭔 유행이란 단어를 이리 좋아하는지 하는지 도통 모르겠습니다.  

    마지막으로, 넘겨 짚는거 본인 주특기 아니신가 :)

  • fender
    24k
    2021-11-20 12:37:51 작성 2021-11-20 12:46:11 수정됨

    장독깨기 // 논리가 막히면 "할 말이 없다"고 비웃기를 잘하시는데, 정말 할 말이 없으면 말을 줄이는 법을 아셨으면 좋겠습니다.

    프론트엔드 관련해서 제가 기억하는 님의 발언만 이렇습니다:

    "프론트엔드는 HTML, CSS만 알면 별거 없다"
    "프론트엔드는 로직이 필요없다"
    "프론트엔드는 백엔드로 데이터 보내는 역할에 불과하니 복잡할 게 없다"
    "성능은 프론트엔드가 아니라 백엔드에서 결정된다"

    님은 저런 발언들이 얼마나 무식한 소리인지 감도 없으시겠지만, 제발 좀 안 해보고 모르는 분야에 대해선 아는 척 '조언'하는 걸 삼가하는 법도 배우시기 바랍니다.

    스스로 대단한 백엔드 개발자라고 자부하시는 듯 한데, 그럼 본인이 자신있는 백엔드에 대한 조언을 하건 답변을 달던 하면 되지 않나요?

    왜 해보지도 않고, 알 지도 못하고, 관심도 없는 프론트엔드에 대해 그렇게 참견할 일이 많은지 모르겠습니다.

  • 장독깨기
    3k
    2021-11-20 14:27:15

    fender 이 분은 넘겨 짚기도 잘하고, 필요한 말만 발췌 해서 하고 싶은 얘기 하는 것도 잘 하더만,

    남의 말 교묘하게 왜곡하는 것도 잘하시네요. ㅎㅎ

    저도 좀 발췌를 해볼까요. 


    "프론트엔드는 HTML, CSS만 알면 별거 없다"

    => 프런트 어렵다 하니 어려울 게 없다 얘기 한 거죠.

    그것도 si 프로젝트에 적응 못한 어떤 개발자가 자책하며 프런트 전향을 고민하는 글 에서요.

    여기다 대고 프런트 더 어렵다고 주장하는 황당한 댓글들을 보면서 단 댓글이죠.

    프런트 기술이 다양하다 하더라도 결국 아웃 풋은 스타일 입힌 html 일 뿐이고,

    브라우저에서 제공하는 자바스크립트로 동적인 처리를 담당할 뿐 입니다. 

    자바스크립트도 얘기했네요. :)


    "프론트엔드는 로직이 필요없다"

    => 프런트앤드는 ui 쪽이죠. 인아웃 롤이란 겁니다. 인아웃에 뭔 로직이 있나요. 

    필요없다가 아니고요, 로직이란게 없다고요. :)


    "프론트엔드는 백엔드로 데이터 보내는 역할에 불과하니 복잡할 게 없다"

    => IN 역할에 불과한게 아니고요, INOUT 역할 이라고요. :)

    "성능은 프론트엔드가 아니라 백엔드에서 결정된다"

    => 네. 맞는 말입니다. :)

    님은 저런 발언들이 얼마나 무식한 소리인지 감도 없으시겠지만, 제발 좀 안 해보고 모르는 분야에 대해선 아는 척 '조언'하는 걸 삼가하는 법도 배우시기 바랍니다.

    스스로 대단한 백엔드 개발자라고 자부하시는 듯 한데, 그럼 본인이 자신있는 백엔드에 대한 조언을 하건 답변을 달던 하면 되지 않나요?

    => 역시 넘겨짚기 대가 답습니다. 제가 뭘 해왔는지 어케 알까요? ㅎ


    프론트엔드에 대해 그렇게 참견할 일이 많은지 모르겠습니다

    => 

    프로그래머가 프런트, 백앤드 이런 게 중요한 게 아니에요.

    시니어나 돼서 아직 이런 것도 모르고 유행에 민감한 님 같은 분들이 여기 오키에 너무 많이 보여서요.

    얼마나 많은 분들이 적성에 맞는지 어떤지 제대로 공부도 알아보지도 않고,

    html, css,js 이런 인강 듣고 무작정 진입했다가 좌절한 분들이 또 얼마나 많을까요.

    이런 분들 갈데 없어 뻥튀기라도 어떨까 해서 좀 알아 보려면 여기서 또 얼마나 손가락 질을 해댑니까.

    프로그래머로 성장한다는게 쉬운 일이 아니에요.

    시니어나 돼서 뭔 유행에 꽂혀 프런트,프런트만 외치는게... 참 답답합니다.

    전 님 같은 분들에게 얘기하는게 아니에요. 

    이런 글 보는 입문하는 분들, 주니어분들에게 혹 조금이라도 생각하는데 도움이 될까 얘기하는거죠. 


    또 다른 분들에게 눈쌀 찌푸리게 한 거 같습니다. 죄송하고 양해 바랍니다.

    주니어 분들 중 혹 프런트 쪽만 고집하는 분들은 생각을 좀 깊게 해보시길 권해봅니다.

    여러 관점에서 시스템을 바라봐야 연차 쌓여 중심도 되고 리딩도 하고 그렇게 되는 겁니다.


    -1
  • fender
    24k
    2021-11-20 14:33:25 작성 2021-11-20 14:40:46 수정됨
    남의 말 교묘하게 왜곡하는 것도 잘하시네요. ㅎㅎ

    "왜곡"을 하는 게 아니라 이러나 저라나 다 어이가 없을 만큼 무식한 소리라 제 입장에서 차이를 못 느꼈을 뿐입니다. 아래 원하시는 대로 바꿔 드렸습니다:

    "프론트엔드는 HTML, CSS만 알면 별거 없다"
    "프런트 기술이 다양하다 하더라도 결국 아웃 풋은 스타일 입힌 html 일 뿐"
    "프론트엔드는 입출력일 뿐 로직이 없고 어려울 것도 없다"
    "성능은 프론트엔드가 아니라 백엔드에서 결정된다"

    이젠 불만 없지요?

    딱 잘라서 말하건데, 2001년도 아니고 2021년에 저런 소리하는 사람은 프론트엔드 입문자한테 이렇니 저렇니 조언 같은 거 해선 안 됩니다.

    본인이 입문자 수준도 못 되는데 누구한테 무엇을 가르치려 드나요?

  • 장독깨기
    3k
    2021-11-20 14:52:00

    fender

    ㅎㅎㅎ 더 할 말 없으면 끝내시죠. 저도 그만하죠.

    다음에 이런 글 만나면 또 봅시다. :)

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