퍼블리셔의 시각으로 쉽게 배우는 JQuery

1. 한 시간 만에 배우는 Jquery
퍼블리셔의 시각으로 쉽게 배우자!
하드코딩하는사람들 빼로

2. Jquery란?

4. 많은 퍼블리셔가 힘들어해요…
UI개발이 너무 어려워서…
대충 요런 기분?

5. UI개발이 어려운 이유
개발자가 아닌 사람에게 개발을 하라 한다…
책을 봐도 당최 모르겠어…

6. 하지만 희망은 있다!
우리에겐 빼로Jquery가 있으니까

7. 발표의 대상
CSS는 익숙하지만, Jquery가 어려운 사람
퍼블리셔의 시각이 형성된 사람
2~3년차!

8. 퍼블리셔의 시각이란?
CSS적 사고
Selector Style

9. CSS적 사고의 핵심
선택한 대상을 변화시킨다
Selector
Style

10. UI개발의 핵심과 Jquery
선택한 대상이
특정 상황일 때 변화시킨다
Event
$(Selector)
.css()
.addClass()
.removeClass()

11. 무슨 일이 발생하는가?
사용자 이벤트
• Click
• Mousedown
• Mouseup
• Keydown
• Keyup
• Keypress
• Focus
• ……
브라우저 이벤트
• Load
• Unload
• Resize
• Scroll
• ……

12. 하지만…
이런 사전적인 내용이
중요한 것이 아니다!

13. 결론
Jquery를 잘 하려면
CSS적 사고에 익숙해야 한다!

14. 감사합니다

15. 그럼 이제 시작해볼까요!?

16. 목차
기초 : CSS적 사고하기
1. Class 기반 사고하기
2. Selector 기반 사고하기
심화 : 기초에 기술 더하기
1. DOM 조작하기
2. 모듈화의 첫 걸음

17. 1. 기초 : Class 기반 사고하기

18. Class기반 사고란?
이벤트 처리를 할 때 대상에
Class를 추가하거나 없애는 것으로
모든 효과를 처리할 수 있도록 CSS를 설계하는 사고방법

19. Class기반 사고를 해야 하는 이유
대부분의 UI개발은 사용자의 의도에 따른 화면의 변화를 의미
화면의 변화는 80%이상 CSS로 처리가 가능
대규모 화면일수록 작업의 효율과 모듈화를 위해
수준 높은 CSS설계가 필수

20. Style관련 Jquery 기능
.CSS()
.addClass()
.removeClass()
Style=“” 형태로 적용됨
.css(‘background’, ‘#fff’);
.css({
background : ‘#fff’,
marginTop: ’10px’
});
Class=“” 형태로 적용됨
두 가지 방법으로 적용 가능!

21. 이벤트에 따른 Class 추가
$(‘#button’).click(function() {
$(this).addClass(‘active’);
});
기본
$(‘#button’).click(function() {
if($(this).hasClass(‘active’)) {
$(this).removeClass(‘active’);
} else {
$(this).addClass(‘active’);
}
});
토글
예제보기2예제보기1

22. 다른 대상에 영향주기
$('#button').click(function() {
if($('body').hasClass('dark')) {
$('body').removeClass('dark');
} else {
$('body').addClass('dark');
}
});
토글
실제사례예제보기

23. 2. 기초 : 셀렉터 기반 사고하기

24. Selector기반 사고란?
이벤트에 따른 Class&상태 변화가 있을 때
그에 대한 조건을 일일이 확인하지 않고
Selector에서 선처리 할 수 있도록 설계하는 사고방법

25. Class를 이용한 UI예제
$('#list>li').click(function() {
if($(this).hasClass('select')) {
$(this).removeClass('select');
} else {
$(this).addClass('select');
}
});
li태그 선택
예제보기
$('#delete').click(function() {
$('#list>li.select').remove();
});
li태그 선택

26. Form요소를 이용한 UI예제
$('#delete').click(function() {
$('#list input:checked').closest('li').remove();
});
li태그 선택
예제보기
parent()는 리뉴얼 하면서 DOM이 끊길 수 있고
parents()는 복수로 적용될 수 있기 때문에
반드시 closest()를 사용

27. 1. 심화 : DOM 조작하기

28. DOM생성 파워레인져!
.before()
.prepend()
.after()
.append()
.html()

29. 한 방에 이해하는 DOM생성
…</div>
<ul id=“list”>
<li>빼로</li>
<li>재선</li>
<li>낙구</li>
<li>수호</li>
</ul>
<div> …
$('#list').before();
$('#list').after();
$('#list').prepend();
$('#list').append();
선택자의 바깥
$('#list').html();
선택자의 내부

30. DOM 생성 예제
$('#add').click(function() {
var content = $('#field').val();
if(!content) {
alert('내용을 입력하세요.');
return false;
}
$('#list').append('<li>'+content+'</li>');
});
input태그를 이용한 필드추가
예제보기

31. 하지만…
새로 생성한 태그는 이벤트가 없다…
어째서…

32. bind의 한계
이벤트를 바인딩 하는 시점에 없는 태그는 적용되지 않는다.
참고로 위의 내용은 파이어폭스 개발자도구

33. live를 사용하면 된다!
$('#list>li').click(function() { …… });
bind
$(document).on('click', '#list>li', function() { …… });
live
한 번만 선언하면 계속 적용된다.
실수로 여러 번 선언했을 경우 여러 번 동작한다.
초기 로딩될 때 한 번만 사용하자.
예제보기

34. 2. 심화 : 모듈화의 첫 걸음

35. 개발의 진화과정
어떻게든 만든다 한 페이지에서 한 번만 작동
어찌어찌 해서
두 번 작동하게 만든다
다른 페이지에서 쓰려니
소스를 통으로 복사한다
공통으로 사용할 수 있게
모듈화를 했다
조금 더 다듬어서
라이브러리나 플러그인으로
배포!!!

36. 모듈화의 첫 걸음
1. ID 이외의 Selector기반으로 작성
2. Selector가 일정 범위를 벗어나지 않음
3. 자주 쓸 경우 자동 바인딩, 가끔 사용할
경우 실행형으로 작성

37. ID 이외의 Selector 기반으로 작성
<div class="dropdown-set">
<button type="button" data-toggle="dropdown">세미나 신청</button>
<ul class="dropdown-menu">
<li><a href="#">빼로</a></li>
<li><a href="#">재선</a></li>
<li><a href="#">낙구</a></li>
<li><a href="#">수호</a></li>
</ul>
</div>

38. Selector가 일정 범위를 벗어나지 않음
$('button[data-toggle="dropdown"]').click(function() {
if($(this).hasClass('active')) {
$(this).closest('.dropdown-set').find('.dropdown-menu').removeClass('active');
} else {
$(this).closest('.dropdown-set').find('.dropdown-menu').addClass('active');
}
});
이벤트가 일어났을 때 이벤트 주체(this)에서
.closest()로 selector의 범위를 한정하고 DOM을 탐색

39. 가끔 사용할 경우 실행형으로 작성
function initDropdown() {
$('button[data-toggle="dropdown"]').click(function() {
if($(this).hasClass('active')) {
$(this).closest('.dropdown-set').find('.dropdown-menu').removeClass('active');
} else {
$(this).closest('.dropdown-set').find('.dropdown-menu').addClass('active');
}
});
}
아래 함수를 공통모듈 js파일에 넣고 필요할 때 호출
예제보기

40. 이제 옵션도 설정하고
다시 잘 다듬어서
제이쿼리 플러그인으로
배포해야지!

41. 하지만 그 내용을 담으면
이번 발표를 듣는 우리는…
대충 요런 기분?

42. 이 발표가 끝났을 때
딱 하나만 기억에 남았으면
좋겠어요…

43. 결국 UI개발은
이벤트가 발생했을 때
CSS나 HTML을 조작하는 것이
전부라는 것을…

44. 그리고 그 작업의 도우미가
바로 Jquery입니다.

45. 감사합니다