Vue 웹앱 프로젝트_10

## Vue 웹앱 프로젝트_10

---

- 기술참조 Vuejs: https://kr.vuejs.org/v2/guide/components.html
- 기술참조 Vuetify: 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)
- firebase 가이드: https://firebase.google.com/docs/guides?authuser=0
- plugins/axios.js 에서 로컬과 클라우드용 node서버 지정.(firebase functions는 노드js서버 기본설치됨.)
- 결과확인링크: https://covid19-kr.web.app/
- 작업결과소스: https://github.com/miniplugin/vue
- 같은의미: npm install = yarn install = yarn (package.json 의 의존성 패키지를 node_moudles 폴더에 설치해 준다.)

---

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

- firebase인증(구글로그인) 인증 과 vuex 전역변수(상태변이) 통합 테스트.
- console firebase Database 접근설정변경

```
allow read;
allow write: if request.auth.uid != null;
```

- 게시판 로그인 인증 처리 OK.(수정한 파일들-아래)

- plugins/firebase.js ( 구글인증 hook 전 처리 onAuthStateChanged )
- store/index.js ( vuex 미들웨어로 로그인 user 와 token 전역변수 처리 )
- App.vue ( 상단에 vue조건 v-if="\$store.state.user" 으로 보이기, 숨기기 )
- /vies/lectures/Notes.vue 게시판 vue조건에 따라 쓰기/수정 보이기, 숨기기 )
- 작업예정: 로그은 후 권한별 처리 사항 적용예정.(지금은 로그인인증만 되면 누구나 게시판에 작성가능)