Post on 28-Jan-2018
원모먼트�Vue.js�도입기
레거시와의�전쟁
목차
1. 원모먼트�소개�
2. Vue.js�소개�
3. 레거시와의�전쟁�
4. 오픈소스를�만들어보자
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�미림여자정보과학고등학교(미림�마이스터고)�졸업
원모먼트란?
온라인�당일�꽃배달�서비스
원모먼트
Vue.js
-�/vjuː/�로�발음,�view�와�발음이�같다.
- 사용자�인터페이스를�만들기�위한�진보적인�프레임워크�
- React�와�Angular와�같이�화두�되고�있는�떠오르는�웹�프레임워크
Vue.js
1.�단일�컴포넌트
template�+�script�+�style�
=�.vue
장점
2.�낮은�러닝커브
하루�만에�문서�정독하고��
다음날�바로�실무에�적용
장점
3.�한국어�문서 https://kr.vuejs.org/v2/guide/
장점
4.�친절한�커뮤니티 https://vuejs-korea.signup.team/
장점
*�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)이란?��-�프로젝트�구조를�미리�템플릿�형태로�정의한�것
*�CLI
#�vue-cli�설치$�npm�install�--global�vue-cli #�"webpack"�템플릿을�이용해서�새�프로젝트�생성$�vue�init�webpack�my-project #�설치�및�실행$�cd�my-project$�npm�install$�npm�run�dev
사용하기
사용하기
#�vue-cli�설치$�npm�install�--global�vue-cli
사용하기
#�"webpack"�템플릿을�이용해서�새�프로젝트�생성 $�vue�init�webpack�my-project
사용하기
#�설치�및�실행$�cd�my-project$�npm�install$�npm�run�dev
사용하기
사용하기
>> Hello�Vue!I�am�Vue�
사용하기
레거시
1.�메인�페이지
원모먼트�레거시
2.�결제�오류
정상적인�결제�루틴
원모먼트�결제�루틴
Order�Sheets�>�PG�>�Status�Change
PG�>�Order�Sheets�>�Status�Change
결제가�됐는데�관리자�페이지에�정보가�없어요!
원모먼트�레거시
1.�뜯어�고치자!��처음부터!
-�백엔드는�추후�앱을�고려�해�RestFul�API�로�변경
2.�Front-End�이왕이면�프레임�워크를�써보자
-�가능한��빨리��적용�할�수�있는�걸로!
한다.�일.�쓴다.�Vue.
해결�방법
달라진�점
nginx
기존�아키텍쳐
변경 된 아키텍쳐
Python
Django
django-osacr
ViewDB
nginx
Python
Django
django-osacr
Vue DB
달라진�점
달라진�점
달라진�점
<app-header><app-header><banner></banner>
달라진�점
<category-nav></category-nav><set-product-carousel></set-product-carousel>
달라진�점
<normal-product-card�v-for="product�in�products"></normal-product-card>
달라진�점
<additional-product-card�v-for="product�in�AdditionalProducts"></additional-product-card>
달라진�점
<app-footer></app-footer>
달라진�점
달라진�점
오픈소스�만들기
1.�음력�달력이�필요해!
라이브러리가�중국어�밖에�없잖아!?
계기
그럼�만들지�뭐
시안
1.�webpack�설정하기
webpack�이란?�
JavaScript�모듈�번들러(Bundler)
과정
-�mkdir�vue-lunar-calendar�&&�cd�vue-lunar-calendar
-�yarn�add�--dev�webpack
//�webpack.config.js
과정
-�yarn�build
-�yarn�start
과정
//�package.json
과정
2.�소스�작성하기
//�index.js
//�Calnedar.vue<day-cell></day-cell>
과정
3.�데모�작성
//�webpack.dev.config.js
과정
3.�데모�작성
//�package.json
-�yarn�demo
-�yarn�start
과정
3.�데모�작성
//�index.html
App.vue�호출
과정
4.�데모�사이트�올리기
과정
5.�README.md�작성하기
#�제목�+�설명#�데모�사이트#�설치�방법#�사용�방법#�Property #�Event#�지원�언어#�Thanks�for
-�npm�publish
과정
6.�배포하기
https://kimwoohyun.github.io/vue-lunar-calendar/
결과
설치�npm�install�vue-lunar-calendar�—save�
선언�import�lunarCalendar�from�‘vue-lunar-calendar’�Vue.component('lunar-calendar',�lunarCalendar)�
사용<lunar-calendar></lunar-calendar>
적용
등록�이후
http://git-awards.com/
등록�이후
홍보를�해볼까?
그럼��다국어��지원을�해야�하지�않을까!?
그럼�하지�뭐
//�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'�����}���}�};
https://github.com/vuejs/awesome-vue
홍보
홍보
홍보
몇�주�후
홍보
최종
Q&A
감사합니다.