예제를 통해 쉽게_살펴보는_뷰제이에스
•
10 likes•2,253 views
Vue.js의 기본 골격과 사용법. 그리고 Vue를 이용하한 프로젝트 예제 코드, 그리고 도입 시 주의 사항에 대해 발표합니다.
예제를 통해 쉽게_살펴보는_뷰제이에스
- 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 ݺߣShare - /junseokjung1 * Web Developer * Polyglot Programmer 를 꿈꾸는… (C#,Java,Ruby,…And?) * 집필 중… * 소통 중…
- 3. INDEX 3 1. 도입 배경 2. 기본 개념 3. 실전 코드 4. 유용한 레퍼런스 5. 도입 시 주의사항 6. 마무리 오늘 할 이야기
- 4. 4 도입 배경
- 6. 6 Dynamic Web (로딩 없이 자연스럽게 움직이는) 도입 배경
- 7. 7 jQuery? (우리 회사의 기본 기술) 도입 배경
- 8. 8 도입 배경
- 9. 9 로직처리 多 스파게티 多 스트레스 多 도입 배경
- 10. 10 Append를 이용한 Html Drawing은 한계가 있다. 도입 배경
- 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 도입 배경
- 19. 19 오늘 발표에서는 Life Cycle 과 기본 문법만 살펴 봅니다. 도입 배경
- 20. 20 기본 개념
- 21. 21 우리 프로젝트에 필요 한 것 1. 렌더링 전 후의 스크립트 처리 기본 개념
- 22. 22 1. 렌더링 전 후의 스크립트 처리 기본 개념
- 24. 24 기본 개념 DATA와 EVENT 세팅 전, DOM 접근 전 DATA와 EVENT 세팅 완료, DOM 접근 전 DOM 접근 전 DOM 접근 완료 DOM 변경 있기 전 DOM 변경 완료 Vue 인스턴스가 제거 되기 전 Vue 인스턴스 제가 된 후
- 25. 25 기본 개념 DATA와 EVENT 세팅 전, DOM 접근 전 DATA와 EVENT 세팅 완료, DOM 접근 전 DOM 접근 전 DOM 접근 완료 DOM 변경 있기 전 DOM 변경 완료 Vue 인스턴스가 제거 되기 전 Vue 인스턴스 제가 된 후
- 26. 26 실전 코드
- 27. 27 우리 프로젝트에 필요 한 것 1. 렌더링 전 후의 스크립트 처리(Life Cycle) 2. JSON API 처리 및 레이어 그리기 3. 상황 별 레이어의 움직임 처리 실전 코드
- 28. 28 2. JSON API 처리 및 레이어 그리기 실전 코드
- 29. 29 Ajax를 이용하여 Data를 가져온다. 실전 코드
- 30. 30
- 31. 31 Vue Instance 생성 DOM 영역 지정 DATA 세팅
- 32. 32
- 33. 33 Data 접근 및 초기화 DOM 초기 데이터를 위한 함수 호출
- 34. 34
- 35. 35 함수 작성
- 36. 36
- 37. 37
- 38. 38 el: “#app” data : { input : { movieNm : “” } } methods : { fn_search: function() { } }
- 39. 39
- 40. 40 movie.list 에 item 카운팅 반복문
- 41. 41 3. 상황 별 레이어의 움직임 처리 실전 코드
- 42. 42 레이어의 숨김/노출 여부는 V-show 와 v-if / v-else 를 이용한다.
- 43. 43 상황 별 CSS 클래스 및 Style 적용은 v-bind:class와 v-bind:style을 이용한다.
- 44. 44 Vue.js 프로젝트 결과물 http://www.nachomovie.com (Vue.js로 만들어진 라이브러리 및 콤포넌트) 실전 코드
- 45. 45 실전 코드
- 46. 46 실전 코드 Front-End의 모든 기능이 Vue를 이용하여 구성되어 있다.
- 47. 47 유용한 레퍼런스
- 48. 48 내가 Vue를 도입한 진짜 이유 유용한 레퍼런스
- 49. 49 레퍼런스가 정말 다양하고 친절하다. 유용한 레퍼런스
- 50. 50 친절한 한글 문서 https://kr.vuejs.org/ (Vue.js 가이드) https://ko.nuxtjs.org/ (Nuxt.js 가이드) 유용한 레퍼런스
- 51. 51 친절한 라이브러리 https://github.com/vuejs/awesome-vue (Vue.js로 만들어진 라이브러리 및 콤포넌트) 유용한 레퍼런스
- 52. 52 친절한 커뮤니티 https://vuejs-korea.signup.team/ (Vue.js 슬랙) https://vuejs-kr.github.io/ (Vue.js 블로그) https://www.facebook.com/groups/vuejs.korea/ (Vue.js 한국어 사용자 페이스북) 유용한 레퍼런스
- 53. 53 도입 시 주의사항
- 55. 55
- 56. 56 Bootstrap Theme (AdminLTE, MatrixAdmin 등등…) 도입 시 주의사항
- 57. 57 템플릿 내 Script와 충돌 도입 시 주의사항
- 58. 58 도입 시 주의사항
- 59. 59 도입 시 주의사항 v-model 자체로 바인딩이 안 된다. jQuery를 사용하여 uniform.update 해야 상태가 변한다…
- 60. 60 해결책 script file 제거 script file customizing 도입 시 주의사항
- 61. 61 해결책 Vue.js로 Wrapping 된 Bootstrap을 사용 하는 것이 좋다. (https://bootstrap-vue.js.org/) 도입 시 주의사항
- 62. 62 해결책 최근에는 Vue.js용 Bootstrap Theme도 생겨나고 있다. (https://templateflip.com/vuejs-admin-templates/) 도입 시 주의사항
- 63. 63 마무리
- 64. 64 Vue.js를 하면서 느낀 점 마무리
- 65. 65 API처리 용이 (Axios라는 것도 있어요) 마무리
- 66. 66 Angular나 React경험이 있다면 더 쉽게 접근할 수 있을 듯… 마무리
- 67. 67 발전하고 있다는 것이 느껴짐… (사용자도 많아지고, 그만큼 라이브러리도 다양해졌다.) 마무리
- 68. 68 Thank You !! 〃 잔잔한 바다에서는 좋은 뱃사공이 만들어지지 않는다. - 영국 속담 - 〃