[Vue.js/개발일지] 07. Vue3와 firebase 9로 CRUD중 CR만들기

일단 백엔드를 배우고 파베를 하자.

파이어베이스... 뭐 좋지만 딱 프로토타입 제작용이다 라는 말이 딱 맞는 것 같다. 근데 아직 백엔드 할 줄 모르나, 제작은 해야 하니 파이어베이스 9으로 제작 해보았다.

일단 Create(만들기)와 Read(읽기)가 가능한 게시판 폼을 제작해보았다. 

BoardAdd.Vue

<template>
  <div class="container-md">
    <div class="row justify-content-center">
      <div class="col-md-5">
        <h3 class="text-center">
          글 쓰기
        </h3>
        <form @submit.prevent="onFormSubmit">
          <div class="form-group">
            <label class="form-label">작성자</label>
            <input
              type="text"
              class="form-control"
              v-model="board.author"
              required />
          </div>
          <div class="form-group">
            <label class="form-label">제목</label>
            <input
              type="text"
              class="form-control"
              v-model="board.title"
              required />
          </div>
          <div class="form-group">
            <label class="form-label">내용</label>
            <input
              type="text"
              class="form-control"
              v-model="board.contents"
              required />
          </div>
          <div class="form-group">
            <button class="btn btn-primary btn-block">
              글 작성 
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

v-model로 데이터를 넘겨 줄 수 있도록 html사이드에서 제작 해주었다. 폼은 bootstrap 5로 제작 해주었다.

폰트나 디자인은 나중에 수정 해야한다... 사진이나 파일 넣는 기능또한 넣어야 하기 떄문에 글 쓰기 페이지 디자인은 나중에 다시 할 필요가 있다.

스크립트 사이드를 확인 해보자.

<script>
    import { db } from '../../firebaseConfig';
    import { collection, addDoc } from "firebase/firestore";
    export default {
        data() {
            return {
                board: {
                }
            }
        },
        methods: {
            async onFormSubmit(event) {
                event.preventDefault()
                  try {
                    const docRef = await addDoc(collection(db, "boards"), {
                    author: this.board.author,
                    title: this.board.title,
                    contents: this.board.contents
                  });
                alert('정상 작성 되었습니다.');
                this.$router.push('/board/BoardList');
              } catch (e) {
                alert.error("Error adding document: ", e);
              }
            }
        }
    }
</script>

이 또한 firebase 9이 되면서 문법이 새롭게 바뀌었다.

이것과 똑같이 작성 했다. db를 FirebaseConfig.js 에서 만들어 준 후 export 해왔다. 

addDoc 함수로 데이터를 넣어 준다.

이런식으로 작성 해주면

no sql database로 이런식으로 보인다. 나중에 타임스태프 추가해서 시간같은거 띄워주고 하면 될 것 같다. 

이제 저 데이터들이 보이는 화면을 만들어 보자

<template>
  <div class="container-md">
    <RouterLink
      :to="'/board/BoardAdd'"
      class="btn btn-secondary">
      글 작성
    </RouterLink>
    <div class="row">
      <div class="col-md-12">
        <table class="table">
          <thead>
            <tr>
              <th>작성자</th>
              <th>제목</th>
              <th>내용</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="board in Boards"
              :key="board.key">
              <td>{{ board.author }}</td>
              <td>{{ board.title }}</td>
              <td>{{ board.contents }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
    import { db } from '../../firebaseConfig';
    import { collection, onSnapshot  } from "firebase/firestore";
    export default {
        data() {
            return {
                Boards: []
            }
        },
        created() {
            onSnapshot(collection(db, "boards"), (querySnapshot) => {
              this.Boards = [];
              querySnapshot.forEach((doc) => {
                this.Boards.push({
                  key: doc.id,
                  author: doc.data().author,
                  title: doc.data().title,
                  contents: doc.data().contents
                })
              })
            })
        },
</script>

 

똑같이 파베 9문법으로 제작 해주었다.

고지가 얼마 남지 않은 것 같다...