[firebase] Vue.js + Element UI + Firebase : 셋업 + 간단한 정보 등록

간단한 책 정보와 리뷰를 등록하는 웹앱을 Vue와 Element UI 프레임워크, 그리고 Firebase를 이용해 만들고 있다.

이곳을 참고할 수 있다. 생성하고자 하는 폴더 경로에서 node prompt를 열고 아래 명령어를 입력한다.

 

vue create [vue-project-name]

 

Vue CLI v4.x 부터는 almost-full 옵션이 생긴 모양이다. 이번에 하면서 처음 봤다. 손쉽게 필요한 기능들이 다 있어서, 해당 옵션으로 진행했다.

그리고 element UI 프레임워크를 쓰기 위해 아래 명령어를 써줬다. 문서는 이곳

npm i element-ui -S

 

그러다가 일 하면서 기본 템플릿으로 썼던 vue-admin-template을 이용하려고 해당 프로젝트는 지우고, 이곳에서 git clone을 해왔다.

 

# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git

# enter the project directory
cd vue-admin-template

# install dependency
npm install

# develop
npm run dev

 

서버를 실행시키면 이 데모 버전보다 더 다양한 기능이 추가된 기본 템플릿을 제공 받는다. 필요한 기능만 살리고 쓰지 않는 것은 일단 지워두었다.

 

git repo를 새로 생성하고, 기존 git을 초기화한 다음 repo에 올려둔 후, 리스트 & 파일 업로드를 위한 화면을 대강 만들어둔 다음, firebase에 프로젝트를 하나 생성했다.

 

firebase.google.com/docs?authuser=0 여기서 우측 상단 '콘솔로 이동'하면 아래 같은 화면이 뜬다. 프로젝트 추가를 통해 vue-library-project를 생성한 상태. 플랫폼은 웹으로 선택했다.

 

 

Nomad Coders의 트위터 클론 강의의 firebase 부분만 참고했다. 리액트 기반으로 진행하지만, vue와 크게 다를 게 없어서 도움을 많이 받았다. Auth 부분을 우선 넘기고 파일 업로드를 위해 Cloud Firestore & Storage만 우선 건드려봤다.

 

 

가장 처음 firebase를 앱에 등록하기 위해서는

 

프로젝트 개요 > 톱니바퀴 설정 아이콘 > 프로젝트 설정으로 들어간다. 맨 아래 Firebase SDK snippet이 있는데, CDN 방식으로 진행하진 않을 것이라 문서에 나온대로

 

npm install --save firebase

// 또는

yarn add firebase

 

npm 패키지를 설치해 package.json에 저장한다.

 

 

잘 저장이 되었으면, App.vue가 있는 프로젝트 루트 경로에 firebase.js 파일을 하나 생성해주고, 아래처럼 import 시켜준다. firestore와 storage 부분은 어느 정도 진행한 후 추가한 것이므로 처음에는 import firebase from 'firebase/app'만 있어도 된다.

 

config 객체의 내용은 아까의 firebase SDK snippet 에서 긁어오면 된다. git에 올리기 위해 .env에 따로 키들을 담고 아래에는 VUE_APP으로 시작하는 상수로 대체했다.

 

 

firebase.initializeApp(firebaseConfig)를 통해 firebase를 초기화해주고, 필요한 파이어베이스 인스턴스를 export 해준다. 맨 아래 두 줄은 후에 firestore와 storage를 등록하고 진행한 후여서 있지만 처음에는 19번째 줄로 끝날 것이다.

 

간단한 form 형태를 작성한 bookDetail.vue 라는 파일을 준비한다. 책 커버 이미지와 도서 관련 정보를 직접 작성해서 업로드할 수 있는 form이기 때문에 이 정보를 모아둘 DB가 필요하다. Firebase > Cloud Firestore에 들어가면 컬렉션 / 다큐먼트라는 시스템이 있는데, bookDetail 이라는 컬렉션에 form에 저장한 객체를 담을 '다큐먼트'가 들어간다.

 

다시 bookDetail.vue 의 script 로 와서,

 

import { dbService, storageService } from '@/firebase'

dbService를 등록해준다.

 

element UI 를 이용해 간단한 form 형태를 만들어준다. 아직 파일 업로드 기능은 없는 상태.

  <el-form ref="form" :model="params" label-width="150px" label-position="left" size="mini" @submit="onSubmit">
      <h3>• 책 정보</h3>
      <div class="form-bg">
        <section>
          <el-form-item label="도서명">
            <el-input v-model="params.bookNm" size="small" />
          </el-form-item>
          <el-form-item label="저자">
            <el-input v-model="params.author" size="small" />
          </el-form-item>
          <el-form-item label="출판사">
            <el-input v-model="params.publisher" size="small" />
          </el-form-item>
        </section>
      </div>
      <el-row type="flex" class="form-btn">
        <el-button type="info" @click="handleCancel">취소</el-button>
        <el-button type="primary" @click="onSubmit">등록</el-button>
      </el-row>
    </el-form>

 

import { dbService, storageService } from '@/firebase'

export default {
	name: 'BookDetail', // router/index.js 에 등록한 name과 동일하게
    data() {
    	return {
        	list: {}, // object에 주의
            params: {
            	bookName: '',
                author: '',
                publisher: ''
            }
        }
    },
    mounted() {
    	// 추후에 상세 책 정보를 가지고 올 때 코드를 쓸 부분
    },
    methods: {
    	async onSubmit() {
        	event.preventDefault()
            await dbService.collection('bookDetail').add(this.params)
        }
    }
}

스크립트 부분은 위와 같은데, dbService에 아까 언급한 collection이라는 대분류 폴더(?) 같은 개념에 'bookDetail'이라는 이름으로 params 값들을 저장한다.

 

이런 식으로 저장이 되어 들어간다.