원모먼트 Vue js 적용기

1. 원모먼트 Vue.js 도입기
레거시와의 전쟁

2. 목차
1. 원모먼트 소개
2. Vue.js 소개
3. 레거시와의 전쟁
4. 오픈소스를 만들어보자

3. https://github.com/KimWooHyun
김우현
2016.01 - 현재 ONE MOMENT (Web & Swift Developer)
2015.01 - 2016.01 ATEAM VENTURES (Web Developer)
Tech : Vue.js, Django, Swift
2015 미림여자정보과학고등학교(미림 마이스터고) 졸업

4. 원모먼트란?

5. 온라인 당일 꽃배달 서비스
원모먼트

6. Vue.js

7. - /vjuː/ 로 발음, view 와 발음이 같다.
- 사용자 인터페이스를 만들기 위한 진
보적인 프레임워크
- React 와 Angular와 같이 화두 되고
있는 떠오르는 웹 프레임워크
Vue.js

8. 1. 단일 컴포넌트
template + script + style
= .vue
장점

9. 2. 낮은 러닝커브
하루 만에 문서 정독하고
다음날 바로 실무에 적용
장점

10. 3. 한국어 문서 https://kr.vuejs.org/v2/guide/
장점

11. 4. 친절한 커뮤니티 https://vuejs-korea.signup.team/
장점

12. * Vue는 ECMAScript 5 기능을 사용하기 때문에 IE8 이하 버전을 지원하
지 않습니다. 하지만 모든 ECMAScript 5 호환 브라우저를 지원합니다.
1. 직접 <script>에 추가
- CDN 제공
https://unpkg.com/vue@2.4.2
2. Npm
- npm install vue
3. CLI
- 스캐폴딩하기 위한 공식 CLI 제공
사용하기
* 스캐폴딩(Scaffolding)이란?
- 프로젝트 구조를 미리 템플릿 형태로 정의한 것

13. * CLI
# vue-cli 설치
$ npm install --global vue-cli
# "webpack" 템플릿을 이용해서 새 프로젝트
생성
$ vue init webpack my-project
# 설치 및 실행
$ cd my-project
$ npm install
$ npm run dev
사용하기

14. 사용하기
# vue-cli 설치
$ npm install --global vue-cli

15. 사용하기
# "webpack" 템플릿을 이용해서 새 프로젝트 생성
$ vue init webpack my-project

16. 사용하기
# 설치 및 실행
$ cd my-project
$ npm install
$ npm run dev

17. 사용하기

18. 사용하기

19. >> Hello Vue!
I am Vue
사용하기

20. 레거시

22. 1. 메인 페이지
원모먼트 레거시

23. 2. 결제 오류
정상적인 결제 루틴
원모먼트 결제 루틴
Order Sheets > PG > Status Change
PG > Order Sheets > Status Change
결제가 됐는데 관리자 페이지에 정보가 없어요!
원모먼트 레거시

25. 1. 뜯어 고치자! 처음부터!
- 백엔드는 추후 앱을 고려 해 RestFul API 로 변경
2. Front-End 이왕이면 프레임 워크를 써보자
- 가능한 빨리 적용 할 수 있는 걸로!
한다. 일. 쓴다. Vue.
해결 방법

26. 달라진 점
nginx
기존 아키텍쳐
변경 된 아키텍쳐
Python
Django
django-osacr
ViewDB
nginx
Python
Django
django-osacr
Vue DB

27. 달라진 점

28. 달라진 점

29. 달라진 점

30. <app-header><app-header>
<banner></banner>
달라진 점

31. <category-nav></category-nav>
<set-product-carousel></set-product-carousel>
달라진 점

32. <normal-product-card v-for="product in products">
</normal-product-card>
달라진 점

33. <additional-product-card v-for="product in AdditionalProducts">
</additional-product-card>
달라진 점

34. <app-footer></app-footer>
달라진 점

35. 달라진 점

37. 오픈소스 만들기

38. 1. 음력 달력이 필요해!
라이브러리가 중국어 밖에 없잖아!?
계기

39. 그럼 만들지 뭐

40. 시안

41. 1. webpack 설정하기
webpack 이란?
JavaScript 모듈 번들
러(Bundler)
과정

42. - mkdir vue-lunar-calendar && cd vue-lunar-calendar
- yarn add --dev webpack
// webpack.config.js
과정

43. - yarn build
- yarn start
과정
// package.json

44. 과정
2. 소스 작성하기
// index.js
// Calnedar.vue
<day-cell></day-cell>

45. 과정
3. 데모 작성
// webpack.dev.config.js

46. 과정
3. 데모 작성
// package.json
- yarn demo
- yarn start

47. 과정
3. 데모 작성
// index.html
App.vue 호출

48. 과정
4. 데모 사이트 올리기

49. 과정
5. README.md 작성하기
# 제목 + 설명
# 데모 사이트
# 설치 방법
# 사용 방법
# Property
# Event
# 지원 언어
# Thanks for

50. - npm publish
과정
6. 배포하기

51. https://kimwoohyun.github.io/vue-lunar-calendar/
결과

52. 등록 확인
npmjs.com/package/패키지이름

53. 설치
npm install vue-lunar-calendar —save
선언
import lunarCalendar from ‘vue-lunar-calendar’
Vue.component('lunar-calendar', lunarCalendar)
사용
<lunar-calendar></lunar-calendar>
적용

54. 등록 이후

55. http://git-awards.com/
등록 이후

56. 홍보를 해볼까?
그럼 다국어 지원을 해야 하지 않을까!?

57. 그럼 하지 뭐

58. // lang.js
module.exports = {
translations: {
'ko': {
'name': 'Korean',
'days': ['일', '월', '화', '수', '목', '금', '토'],
'solar': '양력', 'lunar': '음력', 'leap' : '윤',
'solarShort': '양', 'lunarShort': '음'
},
'en': {
'name': 'English',
'days': ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
'solar': 'solar', 'lunar': 'lunar', 'leap': 'leap',
'solarShort': 'sol', 'lunarShort': 'lun'
}
}
};

60. https://github.com/vuejs/awesome-vue
홍보

61. 홍보

62. 홍보

63. 몇 주 후

64. 홍보

66. 최종

67. Q&A

68. 감사합니다.