Successfully reported this slideshow.
Your SlideShare is downloading. ×

예제를 통해 쉽게_살펴보는_뷰제이에스

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 68 Ad

예제를 통해 쉽게_살펴보는_뷰제이에스

Download to read offline

Vue.js의 기본 골격과 사용법. 그리고 Vue를 이용하한 프로젝트 예제 코드, 그리고 도입 시 주의 사항에 대해 발표합니다.

Vue.js의 기본 골격과 사용법. 그리고 Vue를 이용하한 프로젝트 예제 코드, 그리고 도입 시 주의 사항에 대해 발표합니다.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to 예제를 통해 쉽게_살펴보는_뷰제이에스 (20)

Advertisement

Recently uploaded (20)

예제를 통해 쉽게_살펴보는_뷰제이에스

  1. 1. 1 중앙일보 JunSeok.Jung 예제를 통해 쉽게 살펴보는 Vue.js
  2. 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. 3. INDEX 3 1. 도입 배경 2. 기본 개념 3. 실전 코드 4. 유용한 레퍼런스 5. 도입 시 주의사항 6. 마무리 오늘 할 이야기
  4. 4. 4 도입 배경
  5. 5. 5 Mobile Web 도입 배경
  6. 6. 6 Dynamic Web (로딩 없이 자연스럽게 움직이는) 도입 배경
  7. 7. 7 jQuery? (우리 회사의 기본 기술) 도입 배경
  8. 8. 8 도입 배경
  9. 9. 9 로직처리 多 스파게티 多 스트레스 多 도입 배경
  10. 10. 10 Append를 이용한 Html Drawing은 한계가 있다. 도입 배경
  11. 11. 11 요즘은 Front-End Framework도 많던데.. 도입 배경
  12. 12. 12 Angular React Vue 도입 배경
  13. 13. 13 Vue?? (들어본 적 없음) 도입 배경
  14. 14. 14 2017년 1월 Vue.js에 대한 리서치 많은 사용자가 있어서 검증 된 Angular와 React를 대체할 수 있을까? 도입 배경
  15. 15. 15 〃Vue.js는 더 유연하고, 관점이 적은 솔루션이다.〃 〃당신이 원하는 방법으로 설계할 수 있도록 한다.〃 도입 배경
  16. 16. 16 〃완벽한 SPA보다는, 개별 페이지 안에서 가벼운 기능으로 사용 할 수 있다.〃 도입 배경
  17. 17. 17 다른 프레임워크와의 비교 (Vue의 장점) 원본 : https://vuejs.org/v2/guide/comparison.html 번역 : https://kr.vuejs.org/v2/guide/comparison.html 도입 배경
  18. 18. 18 도입 배경
  19. 19. 19 오늘 발표에서는 Life Cycle 과 기본 문법만 살펴 봅니다. 도입 배경
  20. 20. 20 기본 개념
  21. 21. 21 우리 프로젝트에 필요 한 것 1. 렌더링 전 후의 스크립트 처리 기본 개념
  22. 22. 22 1. 렌더링 전 후의 스크립트 처리 기본 개념
  23. 23. 23 기본 개념 LIFE CYCLE
  24. 24. 24 기본 개념 DATA와 EVENT 세팅 전, DOM 접근 전 DATA와 EVENT 세팅 완료, DOM 접근 전 DOM 접근 전 DOM 접근 완료 DOM 변경 있기 전 DOM 변경 완료 Vue 인스턴스가 제거 되기 전 Vue 인스턴스 제가 된 후
  25. 25. 25 기본 개념 DATA와 EVENT 세팅 전, DOM 접근 전 DATA와 EVENT 세팅 완료, DOM 접근 전 DOM 접근 전 DOM 접근 완료 DOM 변경 있기 전 DOM 변경 완료 Vue 인스턴스가 제거 되기 전 Vue 인스턴스 제가 된 후
  26. 26. 26 실전 코드
  27. 27. 27 우리 프로젝트에 필요 한 것 1. 렌더링 전 후의 스크립트 처리(Life Cycle) 2. JSON API 처리 및 레이어 그리기 3. 상황 별 레이어의 움직임 처리 실전 코드
  28. 28. 28 2. JSON API 처리 및 레이어 그리기 실전 코드
  29. 29. 29 Ajax를 이용하여 Data를 가져온다. 실전 코드
  30. 30. 30
  31. 31. 31 Vue Instance 생성 DOM 영역 지정 DATA 세팅
  32. 32. 32
  33. 33. 33 Data 접근 및 초기화 DOM 초기 데이터를 위한 함수 호출
  34. 34. 34
  35. 35. 35 함수 작성
  36. 36. 36
  37. 37. 37
  38. 38. 38 el: “#app” data : { input : { movieNm : “” } } methods : { fn_search: function() { } }
  39. 39. 39
  40. 40. 40 movie.list 에 item 카운팅 반복문
  41. 41. 41 3. 상황 별 레이어의 움직임 처리 실전 코드
  42. 42. 42 레이어의 숨김/노출 여부는 V-show 와 v-if / v-else 를 이용한다.
  43. 43. 43 상황 별 CSS 클래스 및 Style 적용은 v-bind:class와 v-bind:style을 이용한다.
  44. 44. 44 Vue.js 프로젝트 결과물 http://www.nachomovie.com (Vue.js로 만들어진 라이브러리 및 콤포넌트) 실전 코드
  45. 45. 45 실전 코드
  46. 46. 46 실전 코드 Front-End의 모든 기능이 Vue를 이용하여 구성되어 있다.
  47. 47. 47 유용한 레퍼런스
  48. 48. 48 내가 Vue를 도입한 진짜 이유 유용한 레퍼런스
  49. 49. 49 레퍼런스가 정말 다양하고 친절하다. 유용한 레퍼런스
  50. 50. 50 친절한 한글 문서 https://kr.vuejs.org/ (Vue.js 가이드) https://ko.nuxtjs.org/ (Nuxt.js 가이드) 유용한 레퍼런스
  51. 51. 51 친절한 라이브러리 https://github.com/vuejs/awesome-vue (Vue.js로 만들어진 라이브러리 및 콤포넌트) 유용한 레퍼런스
  52. 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. 53 도입 시 주의사항
  54. 54. 54 this 도입 시 주의사항
  55. 55. 55
  56. 56. 56 Bootstrap Theme (AdminLTE, MatrixAdmin 등등…) 도입 시 주의사항
  57. 57. 57 템플릿 내 Script와 충돌 도입 시 주의사항
  58. 58. 58 도입 시 주의사항
  59. 59. 59 도입 시 주의사항 v-model 자체로 바인딩이 안 된다. jQuery를 사용하여 uniform.update 해야 상태가 변한다…
  60. 60. 60 해결책 script file 제거 script file customizing 도입 시 주의사항
  61. 61. 61 해결책 Vue.js로 Wrapping 된 Bootstrap을 사용 하는 것이 좋다. (https://bootstrap-vue.js.org/) 도입 시 주의사항
  62. 62. 62 해결책 최근에는 Vue.js용 Bootstrap Theme도 생겨나고 있다. (https://templateflip.com/vuejs-admin-templates/) 도입 시 주의사항
  63. 63. 63 마무리
  64. 64. 64 Vue.js를 하면서 느낀 점 마무리
  65. 65. 65 API처리 용이 (Axios라는 것도 있어요) 마무리
  66. 66. 66 Angular나 React경험이 있다면 더 쉽게 접근할 수 있을 듯… 마무리
  67. 67. 67 발전하고 있다는 것이 느껴짐… (사용자도 많아지고, 그만큼 라이브러리도 다양해졌다.) 마무리
  68. 68. 68 Thank You !! 〃 잔잔한 바다에서는 좋은 뱃사공이 만들어지지 않는다. - 영국 속담 - 〃

×