Vue 웹앱 프로젝트_7

## Vue 웹앱 프로젝트_7

---

- 기술참조1: https://vuetifyjs.com/ko/components/toolbars/
- 기술참조2: Front-end 간단한 게시판 구현 ( VueJs + Vuetify). https://dollvin.tistory.com/61
- 기술참조3: Vue와 Firebase로 모던웹사이트 만들기. https://fkkmemi.github.io/talk/vf-000-intro/
- 기술참조4: 기술참조3의 Git소스. https://github.com/fkkmemi/vf
- 개발언어: Vue(Javascript 문법 확장판)
- 개발환경: VSCode IDE사용, vue create . 사용-
- Vue 프로젝트 설치시 vue-router, vuex 선택 이후 모두 default 선택.
- 실행환경: yarn serve = npm run serve (필요: npm i -g yarn)
- 배포환경: 구글파이어베이스 firebase deploy(필요:npm install -g firebase-tools)
- 결과확인링크: https://covid19-kr.web.app/
- 작업결과소스: https://github.com/miniplugin/vue
- 같은의미: npm install = yarn install = yarn (package.json 의 의존성 패키지를 node_moudles 폴더에 설치해 준다.)

---

### 20200412 작업내역(아래)

- firebase 파이어스토어 DB에 CRUD 구현(결과URL: https://covid19-kr.web.app/lectures/notes ).

- 뷰-모먼트 모듈사용(아래 소스코드)

```javascript
// main.js
import VueMoment from 'vue-moment' // npm install --save vue-moment
Vue.use(VueMoment) // 사용예, https://codesandbox.io/s/k9v3qjvq73
```

```javascript
// Notes.vue
methods: {
    async post () {
      // 등록
      const today = this.$moment(new Date()).format('YYYY-MM-DD, HH:mm:ss')
      const r = await this.$firebase.firestore().collection('notes').add({ // DB입력 add 매서드
        title: this.title, content: this.content, rdate: today // firebase 컬렉션 자동생성 id 사용
      })
      console.log('post', r)
      await this.get() // 비동기 - 순서대로 출력용.
      this.title = ''
      this.content = ''
    },
    ...
}
```

- 작업예정: firebase 인증(auth)로 로그인 구현.

- 구글 console firebase 사이트에서 Database 규칙 인증 후 read, write 변경(아래)

```
  //allow read, write: if request.time < timestamp.date(2020, 5, 11);
  allow read, write: if request.auth.uid != null;
```