17. Vue와 Firebase로 나만의 사이트 만들기 - 제목 수정해보기

 

 

 

VF - 17강

 

 

 

---

• 이번 강에서는 Realtime Database를 응용해볼 것이다.
• 먼저 title이나 세팅들을 통째로 저장을 하여 읽어오는 것을 만들어 볼 것이다.
• App.vue 파일에서 전체를 다 리스닝해야하여 site라는 객체를 만든 후 그에 따라 코드를 아래와 같이 수정을 한다.

<!-- App.vue -->
<template>
...
      <site-title :title="site.title"></site-title>
...
      <site-menu :items="site.menu"></site-menu>
...
      <site-footer :footer="site.footer"></site-footer>
...
</template>

<script>
...

export default {
  components: { SiteTitle, SiteFooter, SiteMenu },
  name: 'App',
  data () {
    return {
      drawer: false,
      site: { // site 객체 생성
        menu: [],
        title: '나의 타이틀입니다',
        footer: '푸터입니다'
      }
    }
  },
  created () {
    this.subscribe() // methods의 subscribe 사이트 받아오기
  },
  methods: {
    subscribe () {
      const db = this.$firebaseDB.getDatabase()
      const starCountRef = this.$firebaseDB.ref(db, 'site/')
      this.$firebaseDB.onValue(starCountRef, (snapshot) => {
        const v = snapshot.val()
        if (!v) { // DB에 site값이 없을 경우 현재의 site 객체를 넣는다.
          this.$firebaseDB.set(this.$firebaseDB.ref(db, 'site/'), this.site)
        }
        this.site = v
      }, (e) => {
        console.log(e.message)
      })
    }
    ...
  }
}
</script>

• created ( )는 형상이 없을 때, 형상이 그려지고 나서는 mounted ( )이다.
  • 자세한 내용은 아래의 링크를 참조하라.
  • https://impnem.tistory.com/32

3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 1

• subscribe ( )란 사이트를 구독할거라는 뜻이며, 구독을 하면 사이트를 받아온다.
• listener인 subscribe ( )는 error listener가 뒤에 있어서 (e)와 같이 작성되었다. error가 났을 때 무슨 error가 어디서 났는지 알기 위하여 e.message로 작성하였다.

 

• 나중에는 제목을 수정모드를 켜서 수정할 수 있도록 하지만 지금은 먼저 수정이 가능하게 하기 위하여 titleView.vue 또한 아래와 같이 수정한다.

<!-- titleView.vue -->
<template>
  <v-toolbar-title>
    {{ title }}
    <v-btn icon @click="openDialog"><v-icon>mdi-pencil</v-icon></v-btn>
    <v-dialog v-model="dialog" max-width="400">
      <v-card>
        <v-card-title>
          제목 수정
          <v-spacer></v-spacer>
          <v-btn icon @click="save"><v-icon>mdi-content-save</v-icon></v-btn>
          <v-btn icon @click="dialog=false"><v-icon>mdi-close</v-icon></v-btn>
        </v-card-title>
        <v-card-text>
          <v-text-field v-model="text" outlined label="제목" @keypress.enter="save" hide-details></v-text-field>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-toolbar-title>
</template>

<script>

export default {
  props: ['title'],
  data () {
    return {
      dialog: false,
      text: this.title
    }
  },
  methods: {
    openDialog () {
      this.dialog = true
    },
    save () {
      const db = this.$firebaseDB.getDatabase()
      this.$firebaseDB.update(this.$firebaseDB.ref(db, 'site/'), {
        title: this.text
      })
      this.dialog = false
    }
  }
}
</script>

<style>

</style>

 

• <v-dialog>는 간단히 말해 팝업창을 말한다. dialog 값이 true이면 나타나고 false면 보이지 않는다.
• save ( ) 함수에는 set이 아닌 update로 값을 갱신하게끔 작성하였고, 이것으로 제목을 수정한 후 저장하면 DB에 title이 갱신되고 브라우저에는 반영되게 된다.
• <v-text-field>태그의 hide-details 속성은 팝업창의 아래 공간(에러가 나오는) 부분을 숨겨준다.
• 결과 화면은 아래와 같다.

 

• 이제는 예외처리가 필요할 수 있다.
• 만약 database.rules.json에서 현재는 true로 되어있지만 false로 되었을 경우 에러가 날 것이다.

// database.rules.json
{
  "rules": {
    ".read": "now < 1654614000000",  // 2022-6-8
    ".write": false // 변경함
  }
}

• 위와 같이 변경한 후 아래의 명령어로 deploy한다.

$ firebase deploy --only database

• 명령어 실행 결과 화면은 아래와 같다.

 

• 이제 예외처리를 하기위하여 titleView.vue 파일을 아래와 같이 수정한다.

<!-- titleView.vue -->
<script>
export default {
  props: ['title'],
  data () {
    return {
      dialog: false,
      text: this.title
    }
  },
  methods: {
    openDialog () {
      this.dialog = true
    },
    async save () {
      try {
        const db = this.$firebaseDB.getDatabase()
        await this.$firebaseDB.update(this.$firebaseDB.ref(db, 'site/'), {
          title: this.text
        })
      } catch (e) {
        console.log(e.message)
      } finally {
        this.dialog = false
      }
    }
  }
}
</script>

<style>

</style>

• 실행 결과 화면은 아래와 같다.

• 원래라면 제어할 수 없는 빨간색 에러화면이 뜰 것인데 예외처리로 위와 같은 제어가 가능한 에러가 표시되었다.
• 이것으로 이곳에 원하는 에러를 띄울 수 있게 되었다.

 

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

17 제목 수정해보기 : memi

 

 

 

---

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

 

---