원모먼트�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/

결과

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

설치�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

감사합니다.