2017.12.06에 진행된 W3C HTML5 2017 컨퍼런스에서 발표한 자료입니다. 발표자는 중앙일보의 정준석님입니다.

1. 1
중앙일보
JunSeok.Jung
예제를 통해 쉽게 살펴보는 Vue.js

2. 2
정준석 (Dexter)
(현) 중앙일보
(전) LG전자 R&D연구소
(전) WISEnut
(전) 에듀윌
Email
- korcosin@gmail.com
Facebook
- https://www.facebook.com/junseok.jung.1
GitHub
- https://github.com/korcosin
SlideShare
- https://www.slideshare.net/junseokjung1
* Web Developer
* Polyglot Programmer 를 꿈꾸는…
(C#,Java,Ruby,…And?)
* 집필 중…
* 소통 중…

3. INDEX
3
1. 도입 배경
2. 기본 개념
3. 실전 코드
4. 유용한 레퍼런스
5. 도입 시 주의사항
6. 마무리
오늘 할 이야기

4. 4
도입 배경

5. 5
Mobile Web
도입 배경

6. 6
Dynamic Web
(로딩 없이 자연스럽게 움직이는)
도입 배경

7. 7
jQuery?
(우리 회사의 기본 기술)
도입 배경

8. 8
도입 배경

9. 9
로직처리 多
스파게티 多
스트레스 多
도입 배경

10. 10
Append를 이용한
Html Drawing은 한계가 있다.
도입 배경

11. 11
요즘은
Front-End Framework도 많던데..
도입 배경

12. 12
Angular
React
Vue
도입 배경

13. 13
Vue?? (들어본 적 없음)
도입 배경

14. 14
2017년 1월 Vue.js에 대한 리서치
많은 사용자가 있어서 검증 된
Angular와 React를 대체할 수 있을까?
도입 배경

15. 15
〃Vue.js는 더 유연하고, 관점이 적은 솔루션이다.〃
〃당신이 원하는 방법으로 설계할 수 있도록 한다.〃
도입 배경

16. 16
〃완벽한 SPA보다는,
개별 페이지 안에서 가벼운 기능으로 사용 할 수 있다.〃
도입 배경

17. 17
다른 프레임워크와의 비교 (Vue의 장점)
원본 : https://vuejs.org/v2/guide/comparison.html
번역 : https://kr.vuejs.org/v2/guide/comparison.html
도입 배경

18. 18
오늘 발표에서는
Life Cycle 과 기본 문법만 살펴 봅니다.
도입 배경

19. 19
기본 개념

20. 20
우리 프로젝트에 필요 한 것
1. 렌더링 전 후의 스크립트 처리
기본 개념

21. 21
1. 렌더링 전 후의 스크립트 처리
기본 개념

22. 22
기본 개념
LIFE CYCLE

23. 23
기본 개념
DATA와 EVENT 세팅 전, DOM 접근 전
DATA와 EVENT 세팅 완료, DOM 접근 전
DOM 접근 전
DOM 접근 완료
DOM 변경 있기 전
DOM 변경 완료
Vue 인스턴스가 제거 되기 전
Vue 인스턴스 제가 된 후

24. 24
기본 개념
DATA와 EVENT 세팅 전, DOM 접근 전
DATA와 EVENT 세팅 완료, DOM 접근 전
DOM 접근 전
DOM 접근 완료
DOM 변경 있기 전
DOM 변경 완료
Vue 인스턴스가 제거 되기 전
Vue 인스턴스 제가 된 후

25. 25
실전 코드

26. 26
우리 프로젝트에 필요 한 것
1. 렌더링 전 후의 스크립트 처리(Life Cycle)
2. JSON API 처리 및 레이어 그리기
3. 상황 별 레이어의 움직임 처리
실전 코드

27. 27
2. JSON API 처리 및 레이어 그리기
실전 코드

28. 28
Ajax를 이용하여 Data를 가져온다.
실전 코드

29. 29

30. 30
Vue Instance 생성
DOM 영역 지정
DATA 세팅

31. 31

32. 32
Data 접근 및 초기화
DOM 초기 데이터를 위한 함수 호출

33. 33

34. 34
함수 작성

35. 35

36. 36

37. 37
el: “#app”
data : {
input : {
movieNm : “”
}
}
methods : {
fn_search: function() {
}
}

38. 38

39. 39
movie.list 에 item 카운팅 반복문

40. 40
3. 상황 별 레이어의 움직임 처리
실전 코드

41. 41
레이어의 숨김/노출 여부는
V-show 와 v-if / v-else 를 이용한다.

42. 42
상황 별 CSS 클래스 및 Style 적용은
v-bind:class와 v-bind:style을 이용한다.

43. 43
Vue.js 프로젝트 결과물
http://www.nachomovie.com
(Vue.js로 만들어진 라이브러리 및 콤포넌트)
실전 코드

44. 44
실전 코드

45. 45
실전 코드
Front-End의 모든 기능이 Vue를 이용하여 구성되어 있다.

46. 46
유용한 레퍼런스

47. 47
내가 Vue를 도입한 진짜 이유
유용한 레퍼런스

48. 48
레퍼런스가 정말 다양하고 친절하다.
유용한 레퍼런스

49. 49
친절한 한글 문서
https://kr.vuejs.org/
(Vue.js 가이드)
https://ko.nuxtjs.org/
(Nuxt.js 가이드)
유용한 레퍼런스

50. 50
친절한 라이브러리
https://github.com/vuejs/awesome-vue
(Vue.js로 만들어진 라이브러리 및 콤포넌트)
유용한 레퍼런스

51. 51
친절한 커뮤니티
https://vuejs-korea.signup.team/
(Vue.js 슬랙)
https://vuejs-kr.github.io/
(Vue.js 블로그)
https://www.facebook.com/groups/vuejs.korea/
(Vue.js 한국어 사용자 페이스북)
유용한 레퍼런스

52. 52
도입 시 주의사항

53. 53
Bootstrap Theme
(AdminLTE, MatrixAdmin 등등…)
도입 시 주의사항

54. 54
템플릿 내 Script와 충돌
도입 시 주의사항

55. 55
도입 시 주의사항

56. 56
도입 시 주의사항
v-model 자체로 바인딩이 안 된다.
jQuery를 사용하여 uniform.update 해야 상태가 변한다…

57. 57
해결책
script file 제거
script file customizing
도입 시 주의사항

58. 58
해결책
Vue.js로 Wrapping 된 Bootstrap을 사용 하는 것이 좋다.
(https://bootstrap-vue.js.org/)
도입 시 주의사항

59. 59
해결책
최근에는 Vue.js용 Bootstrap Theme도 생겨나고 있다.
(https://templateflip.com/vuejs-admin-templates/)
도입 시 주의사항

60. 60
마무리

61. 61
Vue.js를 하면서 느낀 점
마무리

62. 62
API처리 용이
(Axios라는 것도 있어요)
마무리

63. 63
Angular나 React경험이 있다면
더 쉽게 접근할 수 있을 듯…
마무리

64. 64
발전하고 있다는 것이 느껴짐…
(사용자도 많아지고, 그만큼 라이브러리도 다양해졌다.)
마무리

65. 65
Thank You !!
〃
잔잔한 바다에서는
좋은 뱃사공이 만들어지지 않는다.
- 영국 속담 -
〃