[Book] 실전 jQuery 쿡북..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

실전 jQuery 쿡북 - jQuery 코어 커뮤니티 지음 김경균.최지훈 옮김 김태영 감수 비제이퍼블릭

Amazon에서도 꽤 많이 팔린걸로 알고 있는 제이쿼리 쿡북입니다. 사실 jQuery의 인기의 비해서 국내에는 책이 그다지 많지 않은데 괜찮은 책들도 있기는 하지만 버전이 1.3 이하버전을 기반으로만 되어 있어 아쉬움이 있었는데 작년에 이 책이 나왔습니다. 사실 예판할때 바로 지르긴 했는데 계속 미루고 못보고 있다가. 이책도 원서는 1.3 기반인데 번역서가 1.4로 증보하였는데 jQuery는 이미 1.5.2대로 들어섰고 1.6얘기도 나오고 있는 관계로 더 늦으면 아예 이책도 안보겠다 싶어서 집어들었습니다.

쿡북이라는 이름대로 이 책은 레시피소개 방식으로 쓰인 책입니다. 모든 챕터의 구성이 많이 필요할 만한 상황을 주고 그부분은 jQuery로 어떻게 작성하는지에 대해서 보여준 다음 코드에 대한 설명이 이어붙습니다. 이런 레시피 방식이기 때문에 나중에 필요한 기능이 생겼을때 참고해 보기에 좋은 편이고 각 상황에 대한 구성도 많이 쓰일만한 패턴을 위주로 잘 설명하고 있다는 느낌입니다. 그리고 원 저자가 jQuery의 코어개발자들이 작성한 것이기 때문에 기본적으로 소스에 대한 신뢰도 할 수 있습니다.

저도 jQuery를 상당히 좋아하고 jQeury같은 프레임웍자체를 안쓰는걸 좀 답답해 하는 편이기는 하지만 한편으로는 jQuery덕분에 개발자들이 JavaScript를 너무 쉽게 생각하고 크로스브라우징 같은 이슈를 고려조차 하지 않는 것에 대해 불만을 가지고 있는 사람중 하나인데 이 책은 당연히 jQuery책이니 jQuery를 설명하고 있기는 하지만 초반에 이 책은 JavaScript책은 아니니 JavaScript에 대한 공부는 미리 따로 하기를 권하는 점이나 전체적으로 jQuery의 좋은 사용법을 강조하기는 하지만 순수 JavaScript의 사용의 고려를 강조하는 것은 상당히 좋게 느껴집니다. jQuery는 jQuery일 뿐이니까요 ㅎ

현재 jQuery버전이 1.5.2이기는 하지만 이 번역서가 나올 당시 1.4.x가 릴리즈되었기 때문에 첫장에 taeyo님의 jQuery 1.4의 새로운 기능에 대해서 설명하고 있기 때문에 1.4이상버전을 쓰는 사람에게도 유용하리라 생각이 됩니다. 1.5.x에서는 ajax리팩토링이 주요 이슈이기에 사용하는 개발자 입장에서는 성능이 이점이 있을 뿐 공부하는데는 이정도로도 충분하다고 생각됩니다. .sub()의 추가가 있기는 한데 이런 부분은 따로 찾아서 보면 되기 때문에 한참 동안은 이책을 참고해서 jQuery를 공부하기에 문제가 없다고 생각합니다.

저한테는 상당히 좋은 느낌의 책이고 초심자가 보기에도 괜찮다고 생각은 하지만 레시피방식이기 때문에 정확히 초심자가 어떻게 느낄지는 잘 모르겠습니다. 기본적인 DOM이나 CSS 셀렉터같은 지식은 가지고 있고 어느정도는 jQuery를 쓰고 있었기 때문에 다양한 jQuery의 사용법과 코드작성법, 컨벤션등에 대해서 자세히 가이드하고 있는 부분은 아주 유용하게 느껴지고 jQuery의 특징인(머 다른 JavaScript라이브러리도 그렇지만요) 체인방식이나 셀렉터를 활용하는 부분에 대해서 친절하게 잘 설명해주고 있다는 느낌입니다. 아주 간단한 DOM 핸들링부터 다루고 있기 때문에 초심자가 jQuery를 익히기에도 무리는 없겠지만 좀더 제대로 익히고 싶다면 DOM등의 기본적인 JavaScript지식은 따로 공부해 두는 것이 더 좋다고 생각됩니다.

후반부에는 jQuery 플러그인들에서도 많이 다루고 있습니다. jQeury를 쓰다보면 플러그인 도배가 되는 느낌이 없잖아 있어서 꼭 좋다고 해야할지는 잘 모르겠지만 jQuery코어팀이 추천하는 유용한 플러그인들을 참고할 필요는 있다고 생각되고 jQuery UI에 대해서도 2-3장을 할애해서 설명해 주고 있습니다.(jQuery UI에 대해서는 CSS를 커스터마이징하는 부분이나 자신만의 디자인을 적용하는 부분에 대해서도 많이 나와있어서 읽을때는 좀 지루하긴 한데 나중에 참고할때는 유용할 듯 합니다. ㅎ)

저는 Ajax를 다룬 부분이(요즘은 Ajax의 사용빈도를 생각할때) 다른 장에 비해서 좀 빈약하지 않나 생각을 하고 있습니다. 내용이 부실하다거나 그런것은 아니고 유용한 내용이 있고 하지만 좀더 다양한 레시피를 제공해 주었었다면 더 좋았겠다하는 느낌은 있습니다. 그리고 마지막장의 QUnit까지 다뤄주고 있어서 jQuery에 대한 모든 것을 다뤄주고 있다고 생각합니다. 개인적으로는 17장인 대형프로젝트에서 jQuery 사용하기는 굳이 왜 들어간걸까 하는 생각은 좀 있습니다. 앞부분은 HTML5에 대한 얘기인데 HTML5에 대한 설명도 빈약하고 플러그인과 내용을 섞어놔서 이해하기가 좀 어렵게 되어 있으며 다른 플러그인들은 꼭 다루지 않아도 될만한 플러그인이라고 생각이 들었습니다. 일단 장의 이름인 대형프로젝트하고 무슨 상관이 있나 싶기도.. ㅎ

jQuery는 어느정도 익히고 나면 레퍼런스문서가 잘되어 있어서 레퍼런스 문서를 보는게 더 좋다고는 생각하지만 이책과 병행해서 보면 jQuery작성의 수준을 많이 높일 수 있을 듯합니다.

[jQuery].prop() 을 이해하기..

바로 앞에 포스팅에서 .hasClass(), .addClass(), .removeClass() 에 대해서 얘기를 했다.. 그런데 마지막에 약간의 여운을 남겨두었지.. 후후.. 좀 헷갈릴수도 있지만, 이렇게 분할해서 각각에 대한 것을 설명하고, 나 스스로도 이해를 해가야 더 기억에 남는다.. 나중에는 좀 더 좋아지것지..

소스는 동일하다 왜냐면, 앞에 포스팅에서는 10라인까지만 설명을 한것이고, 지금은 11라인을 위주로 설명을 하려고 한다..

jQuery

1 2 3 4 5 6 7 8 9 10 11 12 13

$('#agree_all').click(function() { if($('#agree_all').hasClass('agron')) { $('#agree_all').removeClass('agron'); $('#agree_all').addClass('agr'); } else { $('#agree_all').addClass('agron'); $('#agree_all').removeClass('agr'); } $('.chk_agr_main').prop('checked'), $('#agree_all').hasClass('agron')); });

HTML

1 2 3 4 5 6

<a href="#none" class="btn type2 agr" id="agree_all">모두 동의합니다.</a> <input class="chk_agr chk_agr_main" id="chk_agr1" type="checkbox" /> <input class="chk_agr chk_agr_main" id="chk_agr2" type="checkbox" /> <input class="chk_agr chk_agr_main" id="chk_agr3" type="checkbox" /> <input class="chk_agr chk_agr_main" id="chk_agr4" type="checkbox" />

프로세스는 앞에 포스팅에서 언급한 것처럼 if else 를 통과한 후에 11라인을 실행해서 모두 동의합니다를 클릭하면 모두동의 모두동의 취소를 반복한다고 보면 된다..

그런데 위 jQuery 소스에서 11 라인의 의미를 모르니 다음에 더 복잡한 소스에서 상황을 직면하면, 분명 해메일것이다..

.prop() 는 JavaScript 의 프로퍼티[property]를 취급한다.. 

11 라인은 class 명칭이 chk_agr_main 것들에 대해서 checked 를 하라는 것이다.. 단, $('#agree_all').hasClass('agron') 에 따라서 true 또는 false 로 바꾸라는 것이다.. 바꿔말하면, $('.chk_agr_main').prop('checked'), ture); 또는 $('.chk_agr_main').prop('checked'), false); 인것이다..

조금만 알면, 진짜 간단하게 알 수 있는것이지만, 그래도 나에게는 어렵다라기보다 음.. 머라고 해야되지.. 의미를 좀 알아야 좋은것들..??

항상 개발을 하다보면, 세부적인것들에 대해서 이해를 하기보단 전체적인 흐름 및 그 상황을 자체로 이해하고 넘어갔다.. 그러다보니 다음에 또 그 상황을 만나더라도 상황만 알지 세부사항을 모르니 좀 문제가 생기곤 하더라..

더욱 문제는 다시 똑같은 상황을 만나면, 그 때라도 조금씩 세부적인것을 집고 넘어갔어야 이런일이 안생길텐데 또 똑같이 그냥 상황 자체만 이해하고 넘어가버린다.. 그래서 발전이 없는건가.. ㅠㅜ..

무튼!! 그렇기 때문에 아마도 이런 좀 소소한 것들에 대해서 포스팅을 종종하게 될듯한 느낌이다..

[jQuery].hasClass(), .addClass(), .removeClass() 를 접하다..

음.. 업무를 하다가 의미를 몰라서 검색해보고, 찾아봤던 jQuery 를 좀 얘기하려고 한다.. 패턴 자체는 아주 단순한것이지만, 의미를 모르는 것이어서 검색을 했던 것이다..

근무하면서 jQuery 를 사용 해오긴 했지만, 머라고 해야될까 좀 단순한 패턴..?? 항상 하던 패턴..?? 으로만 사용하기도 하고, 개발을 하면서 API 를 찾아본다던지 어떠한 기능이 있는지 사전 공부를 안하니 더욱 모르는 듯 하다.. [그래서 햄처럼 미리 관심을 갖고 공부를 하고, 하는것이 새삼 대단한것이라고 생각을 하게 된다..] 

그리고 만약 애초에 몰랐을 때 몰랐던 부분을 포스팅을 하면서 기록을 하고, 개발을 했었더라면, 지금의 상황과는 많이 틀렸을지도 모르겠다.. 그러니 앞으로 아무리 기초적인것이라도 우선 내가 몰랐다면, 인정하고 정리해서 올리고 넘어가면 된다.. [모르는것이 부끄러운게 아니고, 모르는 것을 아는척하는게 부끄러운 것이라더라..] 정리를 하는 순간 내가 더 집중해서 보고, 몇 차례 더 읽어보고, 업무에서 했던 것이 뼈대가 대기 때문에 더욱 각인이 되고 좋은 듯하다.. 햄의 글을 가져오는 것과는 차원이 틀리다..

오메.. 상황을 얘기하다보니 쓸데없이 너무 길어진 감이 좀 있는듯하다.. 그러면 내가 몰랐던 것을 풀어볼까나..

바로 .hasClass(), .addClass(), .removeClass() 세 가지다..
아래가 해당 소스 부분인데 일부만 가져왔다..

jQuery

1 2 3 4 5 6 7 8 9 10 11 12 13

$('#agree_all').click(function() { if($('#agree_all').hasClass('agron')) { $('#agree_all').removeClass('agron'); $('#agree_all').addClass('agr'); } else { $('#agree_all').addClass('agron'); $('#agree_all').removeClass('agr'); } $('.chk_agr_main').prop('checked'), $('#agree_all').hasClass('agron')); });

이해를 돕기 위해서 HTML 파트도 일부만 가져왔다..

HTML

1 2 3 4 5 6

<a href="#none" class="btn type2 agr" id="agree_all">모두 동의합니다.</a> <input class="chk_agr chk_agr_main" id="chk_agr1" type="checkbox" /> <input class="chk_agr chk_agr_main" id="chk_agr2" type="checkbox" /> <input class="chk_agr chk_agr_main" id="chk_agr3" type="checkbox" /> <input class="chk_agr chk_agr_main" id="chk_agr4" type="checkbox" />

기본적인 패턴을 보자.. HTML 을 보면 눈치가 오는가..?? 모두 동의합니다를 누르면, 아래 4개의 checkbox 가 모두 체크되었다가 풀리고 하는 것이다..
그런데 위 jQuery 소스에서 2, 3, 4 라인에 .hasClass(), .removeClass(), .addClass() 가 보일 것이다.. 1라인에 .click(function() 은 아는 부분이지만, click 이벤트가 발생했을 때 그 안에 부분이 이해가 안갔던 것이다..

2 라인 .hasClass() 를 풀어서 생각하면, 선택한 id="agree_all" 의 class 에 agron 이라는 것이 있느냐 없느냐 하는 것이다.. 즉, 존재 여부에 대한 true/false 의 개념이다.. 고로 $('#agree_all').hasClass('agron') 는 false 다..

3라인 .removeClass() 는 선택한 id="agree_all" 의 class 에 agron 을 삭제하라는 것이다..

4라인 .addClass() 는 3라인과 반대로 선택한 id="agree_all" 의 class 에 agr 을 추가하라는 것이다..

결국 전체적으로 보면, click function 이 발생하면, if else 문에서 true/false 를 확인 한 후에 false 면 if 문으로 true 면 else 로 빠지도록 하는 것이다..

처음에 소스를 봤을 때도 당연히 if else 에 대한 흐름은 파악했지만, 문제는 속성들을 몰랐다.. 그래서 찾아보게 되었고, 몰랐던 것이기에 이렇게 포스팅을 하였다..

아!!! 그리고.. 다음에 11라인을 설명해야 되지만, 이 부분은 별도로 설명을 해야된다는 필요성을 느끼기에 다음 포스팅으로 찾아오겠다..