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