2018/01/25/before-jquery.html

[jeonghwan-kim]

jQuery 보다 먼저 알았으면 좋았을 것들

http://jeonghwan-kim.github.io/2018/01/25/before-jquery.html

[jeonghwan-kim]

여전히 열심히 정리하시네요 :) 좋은 내용 잘 봤습니다~
틀린 내용이 아니라 현실적인 면에서 몇 가지 개선안이 보이네요
Array.from 같은 경우는 IE에서 No support. 즉 쓸 수 없는 부분이라 저는 보통 유사배열을 처리할때 [].forEach.call(document.querySelectorAll('div'), (ele)=>{ console.log(ele); }) 같은 방식 혹은 Array.prototype.forEach.call.. 같은 방식으로 처리하는 방식이 조금 더 범용적인 것 같아요
그리고 forEach도 IE 9 이후부터 사용 가능해서 그냥 for문을 쓰는 경우가 많은 것 같습니다 :)

Disqus에서 작성한 댓글입니다. 2018-01-25 01:29:42 Young-Beom Rhee(youngbeomrhee)

[jeonghwan-kim]

IE가 있었네요. 바벨 환경이 아니라면 영범님 말씀대로 처리해야겠습니다. 👏👏👏

_Disqus에서 작성한 댓글입니다. 2018-01-25 02:08:42 김정환(jeong_hwankim)

[jeonghwan-kim]

우연히 글을 읽다가 오탈자 하나 제보합니다.
'Array.form() 함수를 이용해서 유사배열을 배열로 변환해야한다.'
에서 Array.from()인 것 같습니다.

Disqus에서 작성한 댓글입니다. 2018-01-30 01:17:00 Jimseung(lannex)

[jeonghwan-kim]

프론트엔드 공부하는데 있어 많은...김정환님의 글 많이 참고가 되고 있어요.
이번 글은 제가 처음에 웹개발 공부하던 때가 떠오르더라구요..
근데 ES6 기반으로 작성한 경우 babel을 이용하여 컴파일 하게 된다면 IE 호환성 문제는 해결이 가능한 부분인건가요??
(좀 초보적인 질문인 듯하지만...그렇다고 알고는 있는데...글로만 조사하면서 본 부분이라..)

Disqus에서 작성한 댓글입니다. 2018-02-06 08:21:49 gloria(pureainu)

[jeonghwan-kim]

오타 신고 감사합니다

_Disqus에서 작성한 댓글입니다. 2018-02-07 08:46:45 김정환(jeong_hwankim)

[jeonghwan-kim]

babel로는 es6로 구현한 자바스크립트 이슈를 해결할 수 있구요.
DOM 스크립트 이슈는 여전히 남아있죠. IE 브라우져에서만 지원하지 않는 표준 스펙들이 문제인데요.. 이런건 폴리필로 해결할 수 있습니다. 저는 MDN 많이 참고하고 있어요

_Disqus에서 작성한 댓글입니다. 2018-02-07 08:48:30 김정환(jeong_hwankim)

[jeonghwan-kim]

답변감사합니다!!!

Disqus에서 작성한 댓글입니다. 2018-02-07 02:09:16 gloria(pureainu)

[jeonghwan-kim]

공감되는 글이네요.
잘 읽었습니다 :)

Disqus에서 작성한 댓글입니다. 2018-03-13 08:25:44 개발자스럽다(gaerae)

[jeonghwan-kim]

감사합니다^^

_Disqus에서 작성한 댓글입니다. 2018-03-13 10:09:36 김정환(jeong_hwankim)

[jeonghwan-kim]

좋은글입니다. JQuery가 로드맵에서 빠졌군요. 하긴 요즘 라이브러리가 넘쳐나는데 어느 하나만을 표준으로 특정한다는게 말이안되지요..만서도 한국에선 몇년간은 필수 로드맵에 들어가야할듯요. 대부분의 기업에서 안쓴곳이 없을꺼라 ㅎ

Disqus에서 작성한 댓글입니다. 2018-03-14 08:56:21 Lucas Kwak(lucaskwak)

[jeonghwan-kim]

맞습니다. 대부분 기존시스템을 개발한다면 피할수 없는것 같아요

_Disqus에서 작성한 댓글입니다. 2018-03-14 09:24:27 김정환(jeong_hwankim)

[jeonghwan-kim]

좋은글 감사드립니다
trigger() 함수를 이용하면 새로 정의한 ‘@click’ 이벤트를 방출하게 된다.
여기서 '방출'이 어떤 의미를 가지고 있는건가요?

Disqus에서 작성한 댓글입니다. 2018-05-16 02:44:25 br-tag(brtag)

[jeonghwan-kim]

emit이란 단어를 방출로 사용한건데요.
이벤트를 뿜어 낸다라고 표현하면 될까요? 상위 돔 엘레맨트에서 이벤트를 전달하는 과정입니다.
stopPropagation의 propagation을 의미하기도 합니다.

_Disqus에서 작성한 댓글입니다. 2018-05-16 07:29:04 김정환(jeong_hwankim)

[jeonghwan-kim]

안녕하세요 출처를 밝히고 글 내용을 개인 블로그에 정리해도 될까요??

_Disqus에서 작성한 댓글입니다. 2018-07-05 10:03:01 Byeongseon Kang(disqusLmDvMc4W6r)

[jeonghwan-kim]

그럼 영광이죠~ 고맙습니다

_Disqus에서 작성한 댓글입니다. 2018-07-05 01:17:51 김정환(jeong_hwankim)

[jeonghwan-kim]

상당히 공감합니다. 저도 애초에 시작을 Jquery로 접했는데 DOM에 대한 이해도 없이 id 값의 div를 이렇게 바꿔야지 저렇게해야지 하다보니 처음 Vue나 React를 접했을때 '이 불편한걸 왜써??'라는 생각밖에 안들더군요

Disqus에서 작성한 댓글입니다. 2018-07-22 12:51:12 MoonJong(moonjong93)

[jeonghwan-kim]

아무래도 기본이 중요한거 같아요. 어떤 프레임웍을 쓰더라도 기초지식이 탄탄해야 유리하니깐요.

_Disqus에서 작성한 댓글입니다. 2018-07-28 04:56:21 김정환(jeong_hwankim)

[jeonghwan-kim]

감사합니다 정말 많은 도움이 되었습니다.

Disqus에서 작성한 댓글입니다. 2018-08-08 09:50:51 alpaca623(alpacakim)

[jeonghwan-kim]

정말 좋은글같습니다
변천사도 볼수있으면서 제이쿼리를 막사용했었지만 어떻게 고도화가되었는지
알게될수있는계기가되었습니다.

Disqus에서 작성한 댓글입니다. 2018-08-08 11:32:53 Kamelie Andrea(kamelieandrea)

[jeonghwan-kim]

고맙습니다

_Disqus에서 작성한 댓글입니다. 2018-08-09 08:02:34 김정환(jeong_hwankim)

[jeonghwan-kim]

고맙습니다.

_Disqus에서 작성한 댓글입니다. 2018-08-09 08:06:38 김정환(jeong_hwankim)

[jeonghwan-kim]

우연히 보게 되었는데 저도 비슷한 길을 밟아서 공감이 됩니다. 좋은 내용 잘 봤습니다 :)

Disqus에서 작성한 댓글입니다. 2018-08-13 11:55:24 Seunghyun Lee(shxlee)

[jeonghwan-kim]

감사합니다

_Disqus에서 작성한 댓글입니다. 2018-08-14 08:37:11 김정환(jeong_hwankim)

[jeonghwan-kim]

정말 좋은 글 잘봤습니다!

_Disqus에서 작성한 댓글입니다. 2018-10-29 11:04:06 HoYoung Park(hoyoungpark)

[jeonghwan-kim]

이 글이 의외로 자주 회자되네요.

_Disqus에서 작성한 댓글입니다. 2018-10-29 08:34:50 김정환(jeong_hwankim)

[jeonghwan-kim]

안녕하세요 자바스크립트 공부중인 주니어 웹 개발자입니다. 출처를 밝히고 개인 블로그에 스크랩해도 될까요?

_Disqus에서 작성한 댓글입니다. 2018-11-12 04:45:33 이광규(disqus85fAPegYlY)

[jeonghwan-kim]

네 그럼요. 미리 감사합니다

_Disqus에서 작성한 댓글입니다. 2018-11-12 05:06:22 김정환(jeong_hwankim)

[jeonghwan-kim]

읽기만 해도 공부가 되는 글이라, 실례가 안된다면 개인 블로그에 원문 스크랩해도 괜찮을까요?
출처는 앞뒤로 꼭 밝히겠습니다 ^^

Disqus에서 작성한 댓글입니다. 2018-11-15 12:11:39 eunjin byun(eunjinbyun)

[jeonghwan-kim]

네 공유 감사드려요

_Disqus에서 작성한 댓글입니다. 2018-11-15 09:55:58 김정환(jeong_hwankim)

[jeonghwan-kim]

잘보고갑니다. 스크랩해도괜찮을까요?

Disqus에서 작성한 댓글입니다. 2018-12-11 05:29:18 Hiro333(osu-91a7dc7e1ec47a4129bb6424769e8164)

[jeonghwan-kim]

네 얼마든지요

_Disqus에서 작성한 댓글입니다. 2018-12-11 05:50:30 김정환(jeong_hwankim)

[jeonghwan-kim]

이 글을 보고 더더욱 제이쿼리를 써야겠다는 생각이 듭니다.
$("#test") 라고 쓰면 되는걸 왜 document.getElementById('test')라고 써야하나요? Puer JS를 아는 것은 중요하지만, jquery없이도 작동가능하기 때문에 쓰지말아야 한다는 논리는 이상합니다. 애초에 jquery의 철학은 less write do more이지 않습니까(맞나요 ? ㅎㅎ..). 정환님의 생각이 듣고 싶습니다! 덧붙여서 몇가지 변론만 사족으로 붙여두겠습니다.

1. 파일사이즈: 3.0 기준으로 250kb라고 하네요. 요즘 시대엔 아무 문제 없다고 봅니다.
2. 호환성: 제이쿼리는 구버전 IE에 대한 완벽한 호환성을 보이고 있습니다. 올려주신 링크(You dont~) 에도 언급되어있지만 커뮤니티가 무진장 크니까요. 정환님은 위에서 "돔에서 데이터 얻기" 파트에서 js의 순수 접근이 ie11 이하에서 안될거라고 말씀하셨지만 제이쿼리는 이부분에 대해서 (오만가지 떡칠로) 문제를 처리해두었습니다.

말투가 날이 섰다면 죄송합니다! 최근 제이쿼리에 대해 다시 진지하게 고민하고 있어서 조금 날카로웠을 수 있습니다. 부디 의견 남겨주시면 감사하겠습니다! 꾸벅.

Disqus에서 작성한 댓글입니다. 2019-01-22 01:27:06 문성혁(roeniss)

[jeonghwan-kim]

지나가는 개발자로서 한마디하자면...
jQuery 가 죽어가는 이유는 단순합니다.
가독성이죠. 또 최근에 나와있는 컴파일 툴 덕분에 브라우저간의 호환성은 어느정도 신경 쓰지 않아도 될 정도 입니다. 근데 jQuery의 편리하다면 편리한 $ 구조는 트렌드적이지 못하다는 거죠. jQuery. 가 나쁘다는 의미가 아니라 트렌드적이지 못하다 라는거에 더 의미가 있을 것 같습니다.

_Disqus에서 작성한 댓글입니다. 2019-01-24 03:04:17 박성진(disqusVVdARdtMS1)

[jeonghwan-kim]

저도 제이쿼리를 먼저 접하고 익숙해진 상태에서 최근에 리액트나 뷰, ES6로 공부시작하다가 여기까지 왔습니다...많이 공감되는 글이네요.

Disqus에서 작성한 댓글입니다. 2019-01-24 03:50:38 Changwon Heo(changwonheo)

[jeonghwan-kim]

음 공감하기 어렵군요.. simple and compatible... 왜 편리한데 트렌디하지않죠? 적절하지않은 근거라고 봅니다.

Disqus에서 작성한 댓글입니다. 2019-01-25 06:47:08 문성혁(roeniss)

[jeonghwan-kim]

출처 밝히고 개인 블로그에 정리하고 싶은데 그래도 될까요??

_Disqus에서 작성한 댓글입니다. 2019-02-01 10:07:13 Hyemi Yu(disqus4kS9WZrmIi)

[jeonghwan-kim]

그럼요. 고맙습니다.

_Disqus에서 작성한 댓글입니다. 2019-02-06 06:24:36 김정환(jeong_hwankim)

[jeonghwan-kim]

공감해 주시는 분들이 많아 정리한 보람이 있네요.

_Disqus에서 작성한 댓글입니다. 2019-02-06 06:25:22 김정환(jeong_hwankim)

[jeonghwan-kim]

인프런에서 강의 보다가 왔습니다.
잘 읽다 갑니다!

Disqus에서 작성한 댓글입니다. 2019-02-18 09:56:35 YouJeong Lee(youjeonglee)

[jeonghwan-kim]

jquery의 문제점이 무거워서 그런거아닌가여?? 그리고 따른 가볍고 좋은 라이브러리 나오니까 이제 밀리는거고

_Disqus에서 작성한 댓글입니다. 2019-03-04 09:14:05 ....(disqusG8kJX4FrHH)

[jeonghwan-kim]

전혀 무겁지 않습니다.

Disqus에서 작성한 댓글입니다. 2019-03-04 11:29:45 문성혁(roeniss)

[jeonghwan-kim]

좋은글 너무나도 잘 봤습니다. 몇 글자 오타가 있어서 댓글 남겨요.
"Array.form() 함수를 이용해서 유사배열을 배열로 변환해야한다. 이후에 Array.protototype.foreEach() 함수를 이용해 li 엘리먼트를 순회할 수 있다."
Array.form -> from , foreEach -> forEach 코드에는 오타가 없는데 설명에서 오타가 있었네요

Disqus에서 작성한 댓글입니다. 2019-04-18 02:59:31 Woolim(shorcutfrench)

[jeonghwan-kim]

좋은글 감사합니다.
제이쿼리가 무거워서 목마름이 있었는데 돔API를 익히면 극복이 가능한거로군요.
기존의 것들을 수정해 가야할텐데 고민이네요.

Disqus에서 작성한 댓글입니다. 2019-05-17 05:59:15 Stella Park(stellapark)

[jeonghwan-kim]

안녕하세요 이제 막 제이쿼리 공부시작하는 학생인데요
$(''). 이렇게 쓴거랑 그냥 $. 이거랑 뭐가 다른건가요? $.ready 이렇게 쓰신것도 있고 어떤건 $('a').click()이렇게 쓰신것도 있고 그래서요ㅠㅠ답변주시면 감사하겠습니다.

_Disqus에서 작성한 댓글입니다. 2019-05-24 08:00:40 Kim Hyun Jung(disqusjl5xb2l0gu)

[jeonghwan-kim]

인프런에서 강의 보고 왔습니다.
좋은 글 잘보고 갑니다~!

Disqus에서 작성한 댓글입니다. 2019-08-10 09:15:35 ugaemi(ugaemi)

[jeonghwan-kim]

안녕하세요! 저의 소견을 말씀드리자면,
jQuery 가 순수 자바스크립트에 비해서 무겁기 때문이 아닐까 생각됩니다.
소위 요즘 트렌드라 하면 Application 형태의 웹으로 페이지 리로드 없이 element 를 동적으로 바꾸는 방식의 웹앱 형태가 트렌드가 아닐까 생각됩니다.
이렇게 동적 웹을 구현하기 위해 최근에는 FrontEnd Framework (리액트, 앵귤러 등) 를 사용하는 것이 대세가 되었죠. 그게아니라 서버사이드 (MVC패턴) 웹 구조에서는 jquery 를 사용해 DOM에 접근하는 방식을 취하고있는데, 이 jQuery 방식으로 요즘의 동적 웹앱을 구현하기에는 무겁다는 것이 문제라고 생각됩니다. 수 년 전의 웹사이트에서의 동적 형태보다 지금의 웹앱에서 사용되는 동적 형태가 더 빈번하게 발생하고 복잡하기 때문입니다.

아래는 Vanila JS (jquery를 사용하지 않고 순수 자바스크립트를 사용하는 것을 vanilla JS 라함) 공식 사이트에 있는 내용입니다

Speed Comparison
Here are a few examples of just how fast Vanilla JS really is:

Retrieve DOM element by ID
Codeops / sec
Vanilla JSdocument.getElementById('test-table');
12,137,211

Dojodojo.byId('test-table');
5,443,343

Prototype JS$('test-table')
2,940,734

Ext JSdelete Ext.elCache['test-table']; Ext.get('test-table');
997,562

jQuery$jq('#test-table');
350,557

YUIYAHOO.util.Dom.get('test-table');
326,534

MooToolsdocument.id('test-table');
78,802

위와 같이 바닐라 JS - 순수 자바스크립트로 DOM에 접근하는 방식이 jquery 보다 아니 그 어떤 방법보다도 빠르다고 말하고 있습니다.

감사합니다.

_Disqus에서 작성한 댓글입니다. 2019-11-08 05:41:49 딱딱뚝(disqusUKvGO51F0i)

[jeonghwan-kim]

$('선택자')는 요소를 선택하는 것을 의미합니다. $.메소드는 제이쿼리의 메소드를 사용하는 것을 의미하구요

Disqus에서 작성한 댓글입니다. 2019-12-11 02:34:58 TERADA DANTE(syunterada)

[jeonghwan-kim]

좋은 글입니다. 출처를 밝히고 스크랩 해도 될까요?

Disqus에서 작성한 댓글입니다. 2019-12-11 02:38:58 TERADA DANTE(syunterada)

[jeonghwan-kim]

애초에 jquery 도 자바스크립트를 wrapper 한 것입니다.
지금 님이 $("#test") 라고 쓰시는 것도 내부적으로 보면 document.getElementById 에서 파생된 거라고 생각하심 됩니다. 저같은 경우에도 javascript 를 wrapper 해서 $hD("#test") 이렇게 만들어 씁니다. 애초부터 wrapper 한 것이 front framework 이라고 생각하심 될듯 합니다.
간단하게 제이쿼리로 쓸것을 무엇하러 getElementById 를 배워야 하냐고 생각하실수 있습니다
많은 분들이 그렇게 생각하고 계시고 jquery 만 이용해서도 충분히 개발을 할수 있다고 생각들 합니다. 공감합니다. 할수 있습니다. 그렇게 많은 개발자분들이 일하고 계시구요.
하지만 일을 좀더 많이 하고 무언가 문제가 발생했을때 jquery 로만 해결할려는 생각을 가진 개발자와 보다 근본적으로 DOM 개념을 가진 개발자와는 사고의 깊이에서 차이가 나게 됩니다.
jquery 가 무겁다라고 표현하는 것은 간단히 말씀드리자면 이렇습니다.
퍼포먼스를 좋게 하기 위해서는 웹화면에 다운받는 양을 줄여야 합니다.
jquery의 경우를 생각해보자면 범용 wrapper script 입니다.
이 애기는 무슨 뜻인가 하면 내가 당장 쓰지 않아도 되는 많은 함수가 내부적으로 사용되고 있다는 것입니다. 내가 당장 필요한것은 jquery의 1/10 인데 나머지는 필요없는데 범용 script 이기 때문에 취사선택이 불가능 하다는 것입니다.
jquery 와 javascript의 관계가 C 와 C++ 의 관계가 아니라는 거죠.

_Disqus에서 작성한 댓글입니다. 2019-12-28 09:31:57 이상준(disqus6d5a0Vn3wD)

[jeonghwan-kim]

자세한 답변 감사합니다. 드디어 궁금증이 풀렸습니다.

Disqus에서 작성한 댓글입니다. 2019-12-29 04:35:39 문성혁(roeniss)