Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vuejs를이용한서비스구축

4,750 views

Published on

프론트엔드 개발을 쉽고 재밌고 깔끔하게 만들어주는 Vue.js를 이용하여 영화서비스를 개발한 사례에 대한 발표입니다.

Published in: Technology

Vuejs를이용한서비스구축

  1. 1. 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?) * 집필 중… * 소통 중…
  2. 2. INDEX 3 1. 머리말 2. 발단( vue.js 도입 ) 3. 전개( prototype 작성 ) 4. 위기( admin page 개발 ) 5. 절정( user page 개발 ) 6. 결말 오늘 할 이야기
  3. 3. 4 머릿말
  4. 4. 5 새로운 서비스 새로운 기술 머릿말
  5. 5. 6 머릿말 영화서비스 Ruby On Rails + Vue.js
  6. 6. 7 머릿말 오늘은 영화서비스 개발을 하면서 도입한 Vue.js에 대한 이야기만 합니다.
  7. 7. 8 발단
  8. 8. 9 너 나하고 일 하나 같이 하자 발단 이미지 출처 : http://soulwindow.ivyro.net/zbxe/Album/11853
  9. 9. 10 발단 언론사에서 시도하는 첫 버티컬 서비스 (http://www.nachomovie.com)
  10. 10. 11 발단 똑같은 개발은 싫어! C# => Ruby jQuery => Vue.js
  11. 11. 12 발단 새로운 기술 도입하게 해주세요! 이미지 출처 : http://egloos.zum.com/FilmAgit/v/1081908
  12. 12. 13 전개
  13. 13. 14 전개 영화 서비스를 하기 위해선? - 영화 데이터를 가져오자 - 그런데 어디서?
  14. 14. 15 전개 영화 진흥 위원회 (http://www.kobis.or.kr/kobisopenapi/homepg/main/main.do)
  15. 15. 16 전개 API 구조는…? 영 화 검 색 영화 검색 결과 리스트 API 영화 상세 정보 API
  16. 16. 17 전개 영화 서비스를 하기 위해선? - 영화 데이터를 가져오자 - 그런데 어디서? (영화진흥위원회) - 그런데 포스터랑 썸네일은?
  17. 17. 18 전개 TMDB(The Movie DB) (https://developers.themoviedb.org/3)
  18. 18. 19 전개 API 구조는…? 영 화 검 색 영화 검색 결과 리스트 API
  19. 19. 20 전개 영화 서비스를 하기 위해선? - 영화 데이터를 가져오자 - 그런데 어디서? (영화진흥위원회) - 그런데 포스터랑 썸네일은? (TMDB) - 개발을 시작 하자!
  20. 20. 21 전개 브라더~ 개발 시작하자 이미지 출처 : http://mlbpark.donga.com/mlbpark/b.php?&b=bullpen&id=2360205
  21. 21. 22 전개 Vue.js의 구조
  22. 22. 23 전개 영화 검색 테스트 (https://github.com/korcosin/Vue)
  23. 23. 24 전개 영화 검색 테스트 (https://github.com/korcosin/Vue)
  24. 24. 25 전개 영화 검색 테스트 (https://github.com/korcosin/Vue)
  25. 25. 26 전개 영화 검색 테스트 (https://github.com/korcosin/Vue)
  26. 26. 27 전개 영화 상세 정보 검색 (https://github.com/korcosin/Vue)
  27. 27. 28 전개 영화 상세 정보 검색 (https://github.com/korcosin/Vue)
  28. 28. 29 전개 영화 상세 정보 검색 (https://github.com/korcosin/Vue)
  29. 29. 30 전개 영화 상세 정보 검색 (https://github.com/korcosin/Vue)
  30. 30. 31 전개 영화 상세 정보 검색 Form List Detail
  31. 31. 32 전개 쉽네~ 역시 명품이 좋긴 좋아 이미지 출처 : http://mlbpark.donga.com/mlbpark/b.php?&b=bullpen&id=2360205
  32. 32. 33 위기
  33. 33. 34 위기 관리자페이지를 만들자 - 디자인, 퍼블리싱 없습니다. - 그럼 어떡하지?
  34. 34. 35 위기 Matrix Admin (https://wrappixel.com/demos/free-admin- templates/matrix-admin/index.html)
  35. 35. 36 위기 대충 요런거~ Bootstrap
  36. 36. 37 위기 관리자페이지를 만들자 - 디자인, 퍼블리싱 없습니다. - 그럼 어떡하지? (BootStrap)
  37. 37. 38 위기 Bootstrap을 쓰면… - 레이아웃 잡는 데 좋다. - Input 태그도 아름다워 진다. But…
  38. 38. 39 위기 Script 충돌(?) – vue.js 문법이 안 먹히는 경우가 많다.
  39. 39. 40 위기 실제 코드… ( jQuery와 기막힌 동거 ) 사실 해당 태그에 v-model로 지정만 해주면 상태가 변해야 하는데… uniform.update 해야 상태가 변한다…
  40. 40. 41 위기 놀랐어? 미안 형님 거 장난이 심한 거 아니오? 이미지 출처 : http://magazine2.movie.daum.net/movie/7671
  41. 41. 42 위기 해결책 - Script 제거 및 Customizing (그나마 Customizing 해서 어느 정도 vue를 쓸 수 있게 됨) - Bootstrap CSS는 살려는 드릴께… - 이때 사실 실망도 많이 하고 멘탈이 흔들렸습니다…
  42. 42. 43 절정
  43. 43. 44 절정 사용자페이지를 만들자. - 삽질을 많이 했다. - 시간이 촉박하다. ( 오픈이 코 앞이다. ) - 아… 그냥 구식으로 갈까?
  44. 44. 45 절정 퇴사하기 딱 좋은 날씨 구만 이미지 출처 : http://fun.jjang0u.com/chalkadak/view?db=160&no=152433
  45. 45. 46 절정 갈 때 가더라도, Vue.js는 쓰고 가자 이미지 출처 : http://fun.jjang0u.com/chalkadak/view?db=160&no=152433
  46. 46. 47 절정 전체적인 구조 Front-End Vue.js jQuery bootstrap Back-End Ruby(Rails) json database Puma API 서버에서 DB Query를 질의하여 json으로 밥상을 차려주면, 프론트 서버에서 Vue.js가 그 것을 떠먹는다.
  47. 47. 48 절정 프론트 Vue.js
  48. 48. 49 절정 프론트 Vue.js
  49. 49. 50 절정 프론트 Vue.js
  50. 50. 51 절정 프론트 Vue.js
  51. 51. 52 절정 프론트 Vue.js
  52. 52. 53 절정 프론트 Vue.js
  53. 53. 54 절정 프론트 Vue.js
  54. 54. 55 절정 프론트 Vue.js
  55. 55. 56 절정 프론트 Vue.js
  56. 56. 57 절정 Front 구성 - 오직, 퍼블리싱 된 파일을 이용해서 구현 (쓸 데 없는 js가 없어서, Vue 연동이 매우 편했다.) - Vue Route는 사용하지 않음. (SNS 공유이슈, meta tag를 읽어가기 위해서… 사실 nuxt.js를 사용하면 해결이 된다고 하는데…) - Vue 90%, jQuery 10% (awesome vue의 존재를 모르고 개발. 스와이퍼와 같은 터치 기능은 jQuery Library를 사용 함. ) Awesome vue 사용합시다.^^ https://github.com/vuejs/awesome-vue
  57. 57. 58 결말
  58. 58. 59 결말 오픈 완료. ( 홍보 Time, 딱 3장만 쓸게요^^ ) - http://nachomovie.joins.com (http://www.nachomovie.com) (http://www.nachomovie.co.kr)
  59. 59. 60 결말 홍보 타임(http://nachomovie.joins.com)
  60. 60. 61 결말 홍보 타임(http://nachomovie.joins.com)
  61. 61. 62 결말 홍보 타임(http://nachomovie.joins.com)
  62. 62. 63 결말 Vue.js를 사용하면서 느낀 점 - 생산성 ↑ - 가독성 ↑ - 한글 문서 매우 잘 되어 있음( 문서 칭찬해~ ) - 커뮤니티 매우 잘 되어 있음( Slack 칭찬해~ ) - 새로운 기술의 습득은 항상 기분 좋다.
  63. 63. 64 결말 Vue.js를 사용하면서 힘들었던 점 - 초반 : 아무도 내 코드를 보고 싶어 하지 않는다.(관심X) (팀에서 vue.js 유일하게 사용한 개발자.) (하지만 현재는 영혼의 파트너 한 명을 얻었다. 협업 가능하게 되었음) - 중반 : Bootstrap과의 완벽한 공존을 꿈 꾸었던 것은 거의 불가능. (충돌 현상만 좀 어떻게 해결 하면 좋을 거 같은데… 특히 select2.js!!!) - 후반 : 오픈 을 하고 나니까 내 코드가 불만족스럽다. (물론 체계적으로 잘 구현 해 놓아서 유지보수는 문제 없지만… 조금 더 지식을 쌓다보니 더 좋은 방향성이 자꾸 눈에 보인다.) - 그리고… 검색 최적화(SEO) 이슈… Vue 서버사이드 렌더링(SSR)이 가능하지만 시간이 없어서 못했습니다.(sitemap으로 구성)
  64. 64. 65 결말 Vue.js에 출마해서 신세계를 개척해나가고 있는 중…
  65. 65. 66 Thank You !! 〃 잔잔한 바다에서는 좋은 뱃사공이 만들어지지 않는다. - 영국 속담 - 〃

×