본문 바로가기

Web Programming

Vue 학습하기 ⑦ - VueJS로 만든 프론트엔드와 Firebase 와 연동하기

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 아직 Firebase 에 대한 이해 수준이 낮은 편이라서 Vue에 별로 신경을 못쓰고 있다. 그래서 일단은 프로젝트를 어느 정도 마무리 하고 이후에 진행하려고 마지막 글을 쓰게 되었다. 일단 하고 싶었던 것은 Firebase cloud functions 로 만든 API를 VueJS 에서 사용하여 데이터를 노출시켜주고 입력하는 기능을 만들고 싶었다. 이번 글은 전반적인 설명 보다, 소감을 위주로 작성해야 할 것 같다. (아직 모두 정리가 된 것이 아니라서)

 만들면서 크게 신경써서 만들었던 스펙들은 이렇다.

  • 보안상의 문제가 없는지 확인(예전 AWS EC2 요금 폭탄의 추억)
  • 데이터의 입력은 Firebase database (cloud firestore) 를 사용
  • 최대한 RESTful API 형태로 개발 (HTTP METHOD, PUT을 사용하고 싶었다)
  • axios 모듈을 사용하여 vuejs의 httprequest 를 처리

 

Apikey는 어떻게 해야하나요?

 먼저 Apikey 와 관련된 문제로 여러 곳을 찾아다녔다. 아래 github 에서 소스를 보면 apikey 를 노출시켜서 소스를 올렸다. 올리기 전에 7일 정도를 고민을 했는데 결국은 올리게 되었다. stackoverflow에 똑같은 이유로 올린 글이 있었는데 그 내용들을 참고하고 보면 결국 apikey의 노출의 문제보다는 보안 규칙과 관련된 설정 자체가 가장 중요한 것. Apikey 가 노출되는 것 자체가 위험하기도 하고 안위험하기도 하다는 표현 자체가 의미하는 바는 결국 각각의 서비스별로의 보안 규칙이 어떻게 되어있냐가 가장 중요하다는 것.

 

mrtint/vue-pets

vuejs 연습. Contribute to mrtint/vue-pets development by creating an account on GitHub.

github.com

 

Firestore를 통해 데이터를 저장/읽어보자

 일단 문서에 있는 튜토리얼을 살펴보면 별로 어렵지 않다. cloud functions에서는 firebase admin 을 사용하여 손쉽게 firestore를 사용할 수 있다. 하지만 이 방법은 사라질 예정. 데이터를 저장하고 읽는 방법 자체는 어려운게 하나도 없다. 다만 데이터의 구조에 대한 이해가 조금 필요할 뿐이다. mongodb를 사용해본 적이 있는 사람이라면 쉽게 이해할 수 있을 것 같다.

 

읽고 쓰는 방법은 문서에 잘 정리가 되어있다. cloud function은 nodejs 로 되어있어서 collection.add(), get() 과 같은 함수들을 참고하면 쉽게 개발할 수 있다. 이런 api에 대한 참고 방법 보다는 Promise 쪽에 대한 이해가 더 잘되어야 할 것 같은 느낌.

 

RESTful 비슷하게 만들기

 기존 소스는 http method에 대응하지 않고 모든 호출을 받아 들이는 형태였는데, express를 사용하여 http method 별로 대응하도록 수정하였다. 관련한 문서 링크는 여기 있다.

exports.date = functions.https.onRequest((req, res) => {  // ...
});
const express = require('express');
const cors = require('cors');

const app = express();

// Automatically allow cross-origin requests
app.use(cors({ origin: true }));

// Add middleware to authenticate requests
app.use(myMiddleware);

// build multiple CRUD interfaces:
app.get('/:id', (req, res) => res.send(Widgets.getById(req.params.id)));
app.post('/', (req, res) => res.send(Widgets.create()));
app.put('/:id', (req, res) => res.send(Widgets.update(req.params.id, req.body)));
app.delete('/:id', (req, res) => res.send(Widgets.delete(req.params.id)));
app.get('/', (req, res) => res.send(Widgets.list()));

// Expose Express API as a single Cloud Function:
exports.widgets = functions.https.onRequest(app);

 

axios 모듈 사용하기

 vuejs 에서 따로 http 요청을 보내는 기능을 가지고 있지 않다. 그래서인지 vuejs 문서에서도 axios의 사용과 관련한 문서를 제공하고 있다. 해당 모듈의 사용방법은 아주 간편해서 좋다! 이 역시 Promise 에 대한 이해가 필요하다.

// axios
Vue.prototype.$http = axios;
...

	  const url = "http://localhost:5000/vuepets-30e00/us-central1/vuepets";
      var obj = this;

      this.$http
        .get(url)
        .then(result => {
          obj.list = result.data;
          console.log(obj.list);
        })
        .catch(err => {
          console.log(err);
        });

 

이렇게 만든 화면의 모습은 대강 이렇다.

목록 조회 하기

 

로그인 후 사진 등록하기

 

마치며

 VueJS의 사용법은 몹시 쉽다. 다만 컴포넌트의 과도한 분리는 코딩의 애로사항을 낳을 수 있다는 점을 기억해야 할 것이다. 그리고 생명주기에 대한 글을 한번쯤 읽어보는 것이 좋겠다. Firebase는 아주 단순한 데이터베이스의 형태와 아주 간단한 기능들만 가지고 사용을 해보았기 때문에 아직 뭐가 어떻다고 하기가 좀 어렵다. 다만 정말 쉽게 서버를 구성해볼 수 있다는 점에서 정말 고무적이다. 빠른 속도의 프로토타이핑이 가능할 것 같다. 조금 더 성숙된 사용이 필요하겠지만 이 정도만 해도 정말 빠르게 접해 볼 수 있는 서비스 아닐까?