Vue 웹앱 프로젝트_6

## Vue 웹앱 프로젝트_6

---

- 기술참조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 폴더에 설치해 준다.)

---

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

- vue 에서 동기(기본) 과 비동기(async > await) 함수 차이 확인.

Git 소스확인(/src/plugins/test_promise.js 파일 내용중 아래)

// 비동기 함수 예 = promise 함수 (아래)

const longFunc = (i) => {

  return new Promise((resolve, reject) => {

    const time = Math.random() * 1000

    // console.log(time)

    setTimeout(() => {

      resolve(i)

    }, time)

  })

}

const foo = async () => { // foo = async () => longFunc(i) 비동기

  for (let i = 0; i < 10; i++) {

    // const r = await longFunc(i) // 비동기 함수 return 결과 확인

    // 동기 함수 결과 직접 확인

    await longFunc(i)

      .then(r => {

        console.log('비동기-순차진행 ' + r)

      })

      .catch(e => {

        console.error(e.message)

      })

  }

  return 'done'

}

/* const foo = () => { // foo = () => longFunc(i) 동기함수(기본값)

  for (let i = 0; i < 10; i++) {

    longFunc(i)

      .then(r => {

        console.log('동기-비순차진행 ' + r)

      })

      .catch(e => {

        console.error(e.message)

      })

  }

} */

작업결과(아래 화면 오른쪽 Console 에서 확인-순차진행이 필요할때 async-await 비동기 함수사용)

- CRUD중 입력/삭제 기능 구현.( https://covid19-kr.web.app/lectures/notes 아래)