IT Study./VF

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

impnem 2022. 5. 11. 21:49

 

 

 

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 ( )이다.
 

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

3장 - 1 "인스턴스와 컴포넌트를 레고에 비유한다면 인스턴스는 레고를 조립하는 기본 판을, 컴포넌트는 레고 블록을 의미한다." 03-1 뷰 인스턴스 <뷰 인스턴스의 정의와 속성> 뷰 인스턴스(Instance

impnem.tistory.com

  • 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>
  • 실행 결과 화면은 아래와 같다.

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

 

 

17 제목 수정해보기 : memi

firebase realtime을 사용해서 제목을 수정해봅니다.\n- - - \n# 코드\n## views/site/title.vue\n```vue\n<

memi.dev

 

 

 


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