19. Vue와 Firebase로 나만의 사이트 만들기 - 에러 처리하기

 

VF - 19강

 

 

 

---

• 이번 강에서는 공용 에러처리를 해볼 것이다.
• 이것이 왜 필요하냐면 매번 비동기 작업에서 try-catch문을 쓰는 것은 코드도 길어지고 불편하기 때문이다.

 

• 일단 vue에서 global로 공용 에러처리를 할 수 있다.
• vue.config.js 파일에 에러 핸들러라는 것이 있고 그것을 main.js에 선언을 해주면 되지만 지금은 파일로 뺄 것이다.
• src 디렉터리 안에 error.js라는 파일을 먼저 만든다. 그리고 아래의 코드를 작성한다.

// error.js
import Vue from 'vue'

Vue.config.errorHandler = e => {
  console.error(e.message)
  console.log('here')
}

• Vue를 먼저 불러오고, Vue.config에 errorHandler를 작성해주면, 작동을 하다가 어디서 에러가 나면 catch 구문이 없는 곳에서는 이쪽으로 들어올 수 있다.
• 진정한 에러이기 때문에 빨간색으로 표시해주기 위하여 console.error를 쓰며 메시지를 표시해준다.

 

• 그 다음 main.js에 아래와 같이 import를 해준다.

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import './plugins/firebase' // 그냥 쓴다고 하면 from 없이 사용
import './error' // import 추가

 

• 여기까지 작성 후 서버를 동작하여 이곳으로 넘어오는지 테스트를 한다.
• 그렇게 하기 위해서 firebase 콘솔에서 Realtime DB의 write를 false로 변경한다.

• 그리고 titleView.vue 의 save 함수를 아래와 같이 수정한다. (catch 삭제)

async save () {
  try {
    const db = this.$firebaseDB.getDatabase()
    await this.$firebaseDB.update(this.$firebaseDB.ref(db, 'site/'), {
      title: this.text
    })
  } finally {
    this.dialog = false
  }
}

 

• 그리고 브라우저에서 title 수정을 하면 아래와 같은 결과 화면이 나온다.

• 이제 이렇게 catch가 필요없어졌으며, 모든 에러는 이곳에 모이게 된다.

 

• 다음으로 snackbar를 설치하기 위해 아래의 명령어를 실행한다.
  • 로컬 서버는 끄고 실행하길 바란다.
  • 강의에서는 vuetify 2.3 이전 버전 사용중이라서 yarn add vuetify-toast-snackbar로 설치하지만 2.3 버전 이후라면 아래의 명령어로 실행한다.

$ yarn add vuetify-toast-snackbar-ng

• vuetify 공식사이트 : https://vuetifyjs.com/en/components/snackbars/
• snackbar 모듈화 사이트 : https://www.npmjs.com/package/vuetify-toast-snackbar-ng

Snackbar component — Vuetify

vuetify-toast-snackbar-ng

 

• 설치가 완료되면 src의 plugin 디렉터리에 Vuetify.js에 아래와 같이 수정한다.

// vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
import VuetifyToast from 'vuetify-toast-snackbar-ng'

Vue.use(Vuetify)
Vue.use(VuetifyToast, {
  x: 'right', // default
  y: 'bottom', // default
  color: 'info', // default
  icon: 'mdi-information', // 수정함
  iconColor: '', // default
  classes: [
    'body-2'
  ],
  timeout: 3000, // default
  dismissable: true, // default
  multiLine: false, // default
  vertical: false, // default
  queueable: false, // default
  showClose: false, // default
  closeText: '', // default
  closeIcon: 'close', // default
  closeColor: '', // default
  slot: [], // default
  shorts: {
    custom: {
      color: 'purple'
    }
  },
  property: '$toast' // default
})

export default new Vuetify({
})

• 위의 코드로써 이제 snackbar는 $toast로 전역으로 사용할 수 있다.

 

• 이제 다시 error.js로 넘어가 snackbar를 사용하기 위하여 아래와 같이 수정한다.

// error.js
import Vue from 'vue'

Vue.config.errorHandler = e => {
  console.error(e.message)
  Vue.prototype.$toast.error(e.message)
  console.log('here')
}

 

• 그리고 서버를 실행하여 title 이름을 변경하면 개발자 도구의 console에 아래와 같은 에러가 뜬다.

• <v-snackbar>, <v-icon>가 없다는 에러가 뜨는 이유는 처음 vuetify를 설치할 때 a-la-carte component를 사용한다고 설정하였다.
• a-la-carte component를 사용하면 코드에 있는 내용들 중에 vue snackbar와 같은 것이 있으면 그런 것들을 알아서 웹팩에 등록을 해준다는 것인데 <v-snackbar>는 지금까지 사용한 적이 없다. 그래서 등록을 해줘야 한다.
• vuetify.js에 아래와 같이 등록을 해준다.

// vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
import { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar-ng'

Vue.use(Vuetify, {
  components: {
    VSnackbar,
    VBtn,
    VIcon
  }
})

...

• 그리고 다시 title을 수정하였을 때 결과 화면은 아래와 같다.

 

• 이제 footerView.vue에도 catch를 삭제한다.

// footerView.vue
<script>
export default {
  props: ['footer'],
  data () {
    return {
      dialog: false,
      text: this.footer
    }
  },
  methods: {
    openDialog () {
      this.dialog = true
    },
    async save () {
      try {
        const db = this.$firebaseDB.getDatabase()
        await this.$firebaseDB.update(this.$firebaseDB.ref(db, 'site/'), {
          footer: this.text
        })
      } finally { // catch 삭제함
        this.dialog = false
      }
    }
  }
}
</script>

• 그리고 나면 footer의 제목을 변경할 때에도 똑같이 snackbar가 뜨게 된다.

 

• 지금까지 errorHandler를 설치하고 vuetify toast를 설치를 해보았다.

 

• memi dev 유튜브 강의 보기
• https://memi.dev/board/lecture/1597406491491
• https://www.youtube.com/watch?v=0sE5Rm7UuEc 

19 에러 처리하기 : memi

 

 

 

---

해당 글은 [memi dev] 유튜브 채널을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---