abcd firebase study 3차 모임용 DEMO
스터디 : JS기초 -> ES6 -> VueJS -> Firebase -> …
아래와 같은 app을 만드는 codelab
1. 기본 환경 설정 <2>
NodeJS (필수)
$ node -v
$ npm -v
- macOS : brew install node 추천
- linux : https://github.com/creationix/nvm 추천 (nvm install 8.5.0)
- windows : https://github.com/coreybutler/nvm-windows/releases latest release의 nvm-setup.zip 추천 (nvm install 8.5.0 -> nvm use 8.5.0)
Firebase Tools (필수)
$ firebase --version
# 없으면 npm i -g firebase-tools
Vue cli (필수)
$ vue --version
# 없으면 npm i -g vue-cli
yarn (옵션)
$ yarn -v
# 없으면 npm i -g yarn
Visual Studio Code (옵션)
- download : https://code.visualstudio.com/Download
- macOS : brew cask install visual-studio-code
- 추가 plugin vetur 설치
tip: npm-check가 설치되어 있으면 upgrade를 체크해줌.
$ npm-check -gu
# 없으면 npm i -g npm-check
vue-cli를 사용하여 Nuxt.js + Vuetify.js 를 생성한다.
(이 예제에서는 route, store등의 기능을 사용하지 않는다.)아래 명령어를 실행하여 프로젝트 생성 및 기본 화면을 확인한다.
$ vue init vuetifyjs/nuxt memo-project
# project name, project description, Author는 자유롭게 입력.
$ cd memo-project
$ npm install moment firebase --save # or yarn add moment firebase
$ npm install # or yarn
$ npm run dev # or yarn run dev
# 만약 install과정에 오류가 발생하면, package.json에서 version을 latest로 변경해보고 다시 실행해본다.
# 브라우져 접속 경로 : http://localhost:3000
작성자 코딩스타일과 맞지 않아 기본 ESLINT 부분을 제거합니다.
(제거 없이 규칙을 수정하거나, 규약에 맞춰 개발할 수도 있습니다.)
if (ctx.dev && ctx.isClient) {
// config.module.rules.push({
// enforce: 'pre',
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// exclude: /(node_modules)/
// })
}
1) 불필요한 영역 제거
<!-- 59라인에서 72라인까지의 아래 소스를 제거한다. (오늘쪽 메뉴 영역) -->
<v-navigation-drawer
temporary
:right="right"
v-model="rightDrawer"
<v-list>
<v-list-tile @click="right = !right">
<v-list-tile-action>
<v-icon light>compare_arrows</v-icon>
</v-list-tile-action>
<v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<!-- 26라인에서 44라인까지의 아래 소스를 제거한다. (메뉴 상단의 아이콘과 버튼) -->
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-btn
icon
@click.stop="miniVariant = !miniVariant"
<v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
</v-btn>
<v-btn
icon
@click.stop="clipped = !clipped"
<v-icon>web</v-icon>
</v-btn>
<v-btn
icon
@click.stop="fixed = !fixed"
<v-icon>remove</v-icon>
</v-btn>
2) 사용할 data format 정의
// 배열 data 형식을 firebase realtime database처럼 object형태로 변경합니다.
// 현제 선택된 item을 표현할 current를 추가합니다.
export default {
data() {
return {
clipped: false,
drawer: true,
fixed: true,
items: {
aa: {id: 'aa', memo: 'Welcome',icon: 'label', datetime: '2017.09.14 00:00:00'},
bb: {id: 'bb', memo: 'Inspire', icon: 'label', datetime: '2017.09.14 00:10:00'}
},
current:{memo:''},
miniVariant: false,
title: '메모앱'
}
}
}
3) 왼쪽 data 목록 영역을 바뀐 items에 맞게 변경.
<!--
v-navigation-drawer 에 permanent 속성 추가.
v-list-tile에서 :to="item.to" 제거.
v-icon에 v-bind:class="{'orange--text':item.id==current.id}" 을 추가해서 선택시 icon생상을 변경한다.
v-list-tile-title의 item.title을 item.memo로 변경.
v-list-tile-title 밑에 <v-list-tile-sub-title v-text="item.datetime"></v-list-tile-sub-title> 추가
-->
<v-navigation-drawer permanent persistent :mini-variant="miniVariant" :clipped="clipped" v-model="drawer" enable-resize-watcher>
<v-list>
<v-list-tile v-for="(item, i) in items" :key="i">
<v-list-tile-action>
<v-icon v-bind:class="{'orange--text':item.id==current.id}" v-html="item.icon"></v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-text="item.memo"></v-list-tile-title>
<v-list-tile-sub-title v-text="item.datetime"></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
4) 편집영역 추가
``` html
<!—
를 제거하고 아래 소스를 추가한다.
—>
<v-card-text>
<v-btn class="pink" dark absolute bottom right fab>
<v-icon>add</v-icon>
</v-btn>
</v-card-text>
</v-card>
</v-flex>

> 5) 상세 보기 기능 작업
- 왼쪽 영역 클릭시 가운데 편집창에 반영되는 기능을 추가한다. (vue의 bind로 수정도 적용됩니다.)
``` html
<!-- v-list-title event 추가 -->
<v-list-tile v-for="(item, i) in items" :key="i" @click.stop.prevent="detail(item)">
//detail method 생성
export default {
data() {
~~~생략~~~
},
methods: {
detail(i) {
this.current = i
}
}
}
6) 새글 기능 작업
- 편집창안에 글을 지우고 새글을 받을 준비를 합니다.
<!-- textare 편집창 아래의 pink btn에 event 추가 -->
<v-btn class="pink" dark absolute bottom right fab @click="reset">
//methods안에 reset method 추가
reset() {
this.current = {memo:''};
}
7) 저장 기능 작업
- 편집창에서 focus를 잃으면 items에 저장
``` javascript
<!-- textarea에 event 추가 -->
<v-text-field @blur="save" placeholder="새로운 메모를 입력해보세요!" full-width rows="15" v-model="current.memo" textarea></v-text-field>
//모듈 import