Vuejs를이용한서비스구축

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?)
* 집필 중…
* 소통 중…

INDEX
3
1. 머리말
2. 발단( vue.js 도입 )
3. 전개( prototype 작성 )
4. 위기( admin page 개발 )
5. 절정( user page 개발 )
6. 결말
오늘 할 이야기

5
새로운 서비스
새로운 기술
머릿말

6
머릿말
영화서비스
Ruby On Rails + Vue.js

7
머릿말
오늘은 영화서비스 개발을 하면서 도입한
Vue.js에 대한 이야기만 합니다.

9
너 나하고 일 하나 같이 하자
발단
이미지 출처 : http://soulwindow.ivyro.net/zbxe/Album/11853

10
발단
언론사에서 시도하는 첫 버티컬 서비스
(http://www.nachomovie.com)

11
발단
똑같은 개발은 싫어!
C# => Ruby
jQuery => Vue.js

12
발단
새로운 기술 도입하게 해주세요!
이미지 출처 : http://egloos.zum.com/FilmAgit/v/1081908

14
전개
영화 서비스를 하기 위해선?
- 영화 데이터를 가져오자
- 그런데 어디서?

15
전개
영화 진흥 위원회
(http://www.kobis.or.kr/kobisopenapi/homepg/main/main.do)

16
전개
API 구조는…?
영
화
검
색
영화 검색 결과 리스트 API 영화 상세 정보 API

17
전개
- 그런데 어디서? (영화진흥위원회)
- 그런데 포스터랑 썸네일은?

18
전개
TMDB(The Movie DB)
(https://developers.themoviedb.org/3)

19
전개
API 구조는…?
영
화
검
색
영화 검색 결과 리스트 API

20
전개
- 그런데 어디서? (영화진흥위원회)
- 그런데 포스터랑 썸네일은? (TMDB)
- 개발을 시작 하자!

21
전개
브라더~ 개발 시작하자
이미지 출처 : http://mlbpark.donga.com/mlbpark/b.php?&b=bullpen&id=2360205

23
전개
영화 검색 테스트 (https://github.com/korcosin/Vue)

24
전개

25
전개

26
전개

27
전개
영화 상세 정보 검색 (https://github.com/korcosin/Vue)

28
전개

29
전개

30
전개

31
전개
영화 상세 정보 검색
Form
List
Detail

32
전개
쉽네~ 역시 명품이 좋긴 좋아
이미지 출처 : http://mlbpark.donga.com/mlbpark/b.php?&b=bullpen&id=2360205

34
위기
관리자페이지를 만들자
- 디자인, 퍼블리싱 없습니다.
- 그럼 어떡하지?

35
위기
Matrix Admin
(https://wrappixel.com/demos/free-admin-
templates/matrix-admin/index.html)

36
위기
대충 요런거~ Bootstrap

37
위기
관리자페이지를 만들자
- 디자인, 퍼블리싱 없습니다.
- 그럼 어떡하지? (BootStrap)

38
위기
Bootstrap을 쓰면…
- 레이아웃 잡는 데 좋다.
- Input 태그도 아름다워 진다.
But…

39
위기
Script 충돌(?) – vue.js 문법이 안 먹히는 경우가 많다.

40
위기
실제 코드… ( jQuery와 기막힌 동거 )
사실 해당 태그에 v-model로 지정만 해주면 상태가 변해야 하는데…
uniform.update 해야 상태가 변한다…

41
위기
놀랐어? 미안
형님 거 장난이 심한 거 아니오?
이미지 출처 : http://magazine2.movie.daum.net/movie/7671

42
위기
해결책
- Script 제거 및 Customizing
(그나마 Customizing 해서 어느 정도 vue를 쓸 수 있게 됨)
- Bootstrap CSS는 살려는 드릴께…
- 이때 사실 실망도 많이 하고 멘탈이 흔들렸습니다…

44
절정
사용자페이지를 만들자.
- 삽질을 많이 했다.
- 시간이 촉박하다. ( 오픈이 코 앞이다. )
- 아… 그냥 구식으로 갈까?

45
절정
퇴사하기 딱 좋은 날씨 구만
이미지 출처 : http://fun.jjang0u.com/chalkadak/view?db=160&no=152433

46
절정
갈 때 가더라도, Vue.js는 쓰고 가자
이미지 출처 : http://fun.jjang0u.com/chalkadak/view?db=160&no=152433

47
절정
전체적인 구조
Front-End
Vue.js
jQuery
bootstrap
Back-End
Ruby(Rails)
json
database
Puma
API 서버에서 DB Query를 질의하여 json으로 밥상을 차려주면,
프론트 서버에서 Vue.js가 그 것을 떠먹는다.

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

59
결말
오픈 완료. ( 홍보 Time, 딱 3장만 쓸게요^^ )
- http://nachomovie.joins.com
(http://www.nachomovie.com)
(http://www.nachomovie.co.kr)

60
결말
홍보 타임(http://nachomovie.joins.com)

61
결말

62
결말

63
결말
Vue.js를 사용하면서 느낀 점
- 생산성 ↑
- 가독성 ↑
- 한글 문서 매우 잘 되어 있음( 문서 칭찬해~ )
- 커뮤니티 매우 잘 되어 있음( Slack 칭찬해~ )
- 새로운 기술의 습득은 항상 기분 좋다.

64
결말
Vue.js를 사용하면서 힘들었던 점
- 초반 : 아무도 내 코드를 보고 싶어 하지 않는다.(관심X)
(팀에서 vue.js 유일하게 사용한 개발자.)
(하지만 현재는 영혼의 파트너 한 명을 얻었다. 협업 가능하게 되었음)
- 중반 : Bootstrap과의 완벽한 공존을 꿈 꾸었던 것은 거의 불가능.
(충돌 현상만 좀 어떻게 해결 하면 좋을 거 같은데… 특히 select2.js!!!)
- 후반 : 오픈 을 하고 나니까 내 코드가 불만족스럽다.
(물론 체계적으로 잘 구현 해 놓아서 유지보수는 문제 없지만… 조금 더 지식을 쌓다보니
더 좋은 방향성이 자꾸 눈에 보인다.)
- 그리고…
검색 최적화(SEO) 이슈…
Vue 서버사이드 렌더링(SSR)이 가능하지만 시간이 없어서 못했습니다.(sitemap으로
구성)

65
결말
Vue.js에 출마해서 신세계를 개척해나가고 있는 중…

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

Vuejs를이용한서비스구축

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Vuejs를이용한서비스구축

Similar to Vuejs를이용한서비스구축 (20)

Vuejs를이용한서비스구축