![// 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://image.slidesharecdn.com/vue-js-170826083450/85/Vue-js-58-320.jpg)
원모먼트 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. 달라진 점
- 32. <normal-product-card v-for="product in products"> </normal-product-card> 달라진 점
- 33. <additional-product-card v-for="product in AdditionalProducts"> </additional-product-card> 달라진 점
- 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. 배포하기
- 53. 설치 npm install vue-lunar-calendar —save 선언 import lunarCalendar from ‘vue-lunar-calendar’ Vue.component('lunar-calendar', lunarCalendar) 사용 <lunar-calendar></lunar-calendar> 적용
- 54. 등록 이후
- 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' } } };
- 61. 홍보
- 62. 홍보
- 63. 몇 주 후
- 64. 홍보
- 66. 최종
- 67. Q&A
- 68. 감사합니다.