vue에서 firebase 데이터 가져오기

JS
node, vue, firebase, data

사실 제가 다 알아서 진도를 나가는 것은 아닌 것 같습니다. 언제나 그랬듯이 지나고 나면 알게 되겠지 라는 마음으로 꾸준히 하고 있습니다.

firebase에서 데이터를 가져오기 위해 필요했던 작업들입니다.

내용이 많았던 페이지들의 라우터를 분리하고 필요한 라이브러리를 설치하는 등의 추가 작업이 필요했습니다.

1. firebase 커넥션 분
2. 테스트 페이지 만들기
3. api 미들웨어로 등록
4. test 페이지 라우터 만들기
5. http 비동기 통신을 위해 axios라이브러리 설치
6. localhost:3000 의 데이터를 받아오기
7. data()로 firebase 데이터 정리
8. 정리된 데이터를 html 안에 넣기

저도 잘 기억은 나지 않지만 하나하나 차근차근 정리해 보도록 합시다.

1. firebase 커넥션 분리

저희는 우선 app.js에 들어있던 커넥션을 정리했습니다.
app.js 레벨에 새로운 파일 db.config.js를 만들어 firebase관련된 내용을 분리시켰습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
//db.config.js
var admin = require("firebase-admin");
var serviceAccount = require("./ex01-shin-key.json");
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://ex01-shin.firebaseio.com"
});
var db = admin.database();
module.exports = db;

2. 테스트 페이지 만들기

저는 우선 저번에 만들었던 second페이지에서 받아오는 정보를 다시 보여주는 페이지를 만들었습니다. 일단 폼을 만들고 라우터 연결 등등의 연결을 해줄겁니다.
vue > front > src > components에 새로운 members폴더를 생성합니다.

members.html 생성

1
2
3
<div>
    <h1>members</h1>
</div>

members.vue파일 생성

1
2
3
4
5
<template src = "./members.html"></template>
<style scoped src = "./members.css"></style>
<script>
</script>

그리고 주소 라우터를 생성해줍니다. 위치는 front > src > router > index.js

1
2
3
4
5
6
7
8
9
...
import members from '@/components/members/members'
...
    {
      path: '/members',
      name: 'members',
      component : members
    }
...

3.api 미들웨어로 등록

app.js에 api를 미들웨어로 등록해줍니다.

1
2
app.use('/api', route);
//데이터만 응답하는 서버 api

4. test 페이지 라우터 만들기

이제 테스트 페이지의 라우터를 만들어줍니다.
라우트는 vue(최상위 위치) > routes 에서 셋팅해줍니다.
index.js에서는

1
2
3
let accountRoute = require('./account.route');
module.exports = accountRoute;

account.route.js를 만들어 라우팅

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var express = require('express');
var db = require('../db.config');
var accountRoute = express.Router();
var ref = db.ref("/");
//firebase에서 들어가는 경로 설정
accountRoute.get('/test',(req, res) => {
    var usersRef = ref.child("users")
    //child 로 하위 메뉴로 들어감 
    usersRef.once('value')
        .then((data)=>{
            console.log(data);
            res.send(data);
            //then은 성공했을 때 행동양식
        })
        .catch(err => {
            res.statusCode(500)
            console.log(err)
            //catch는 실패했을 때 행동양식
        })
});
module.exports = accountRoute;

5. http 비동기 통신을 위해 axios라이브러리 설치

이 부분은 Vue.js 한국 사용자 모임에 잘 정리되어 있습니다.
HTTP 요청을 위한 axios
axios는 비동기 통신을 위한 플러그인입니다.

비동기 전송 방식은 요청과 그 결과가 동시에 일어나지 않습니다. 송, 수신간 동기를 맞추지 않고(?) 문자단위로 구분하여 전송합니다. 상대방의 상태와 관계없이 일방적으로 다음 동작을 발생시킵니다. 구현이 간단하고 비용이 적게드나 데이터 전송 시 많은 오버헤드(?)를 가진다고 합니다.

1
npm install --save axios

npm으로 axios를 설치해줍니다. 그리고 front > src에 들어있는 main.js에서 import.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.prototype.$http = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

6. localhost:3000 의 데이터를 받아오기

이제부터 좀 헷갈리기 시작합니다. 돌아가는 상황을 보면 second 파일에서 자료를 보낼때 그것을 캐치해서 members에 뿌리는 건가 싶기도 합니다.

일단 members에서는 localhost:3000의 데이터를 가져와보기로 합니다.
members.vue에서 다음과 같은 태그를 넣어 줍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default {
  name: "members",
  methods: {
    getData: function() {
      const baseUrl = "http://localhost:3000/api";
      this.$http.get(baseUrl + "/test").then(res => {
        console.log("test", res.data);
        this.shin = res.data.shin;
      });
    },
    listSet: function(){
      this.list = [1,2,3,4,5,6]
    }
  },
};

7. data()로 firebase 데이터 정리

그리고 쉼표 아랫부분에는 파이어베이스에서 데이터를 가져오는 공간을 마련해줍니다.

1
2
3
4
5
6
7
8
9
10
11
...
  data() {
    return {
      shin:{
        id:"",
        password: "",
        fullName: ""
      },
      list:[]
    };
  }

members.html파일에서는 데이터를 저번과 같은 방식으로 넣어주면 끝!

8. 정리된 데이터를 html 안에 넣기

member.html

1
2
3
4
5
6
7
8
9
<div>
    <h1>members</h1>
    <button v-on:click="listSet">list</button>
    <h2 v-for="item in list">{{item}}</h2>
    <button v-on:click="getData">dataTest</button>
    <h5>{{shin.id}}</h5>
    <h5>{{shin.password}}</h5>
    <h5>{{shin.fullName}}</h5>
</div>

이렇게 하고 실행시켜줍니다.
vue 레벨에서 app.js를 실행시켜주고

1
node .\app.js

vue > front 에서 vue실행.

1
npm run dev

그럼 다음과 같은 결과를 보실 수 있습니다.
으아아아아아 어려우엉ㅜㅜ

공유하기 댓글