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 ( )이다.
- 자세한 내용은 아래의 링크를 참조하라.
- https://impnem.tistory.com/32
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>
- 실행 결과 화면은 아래와 같다.
- 원래라면 제어할 수 없는 빨간색 에러화면이 뜰 것인데 예외처리로 위와 같은 제어가 가능한 에러가 표시되었다.
- 이것으로 이곳에 원하는 에러를 띄울 수 있게 되었다.
- memi dev 유튜브 강의 보기
17 제목 수정해보기 : memi
firebase realtime을 사용해서 제목을 수정해봅니다.\n- - - \n# 코드\n## views/site/title.vue\n```vue\n<
memi.dev
해당 글은 [memi dev] 유튜브 채널을 토대로 공부한 내용을 기록하기 위하여 작성됨.