[Firebase] Firebase를 이용한 API 호출 - 2

1. Firebase 프로젝트 생성 및 설치

일단 Firebase Console로 접속합시다.(https://console.firebase.google.com) 

 

프로젝트 만들기 > 프로젝트 명 입력 후 완료(만약 Firebase 첫 진입이라면 완료 시 금지되었다는 표시가 뜰 수 있습니다.

구글 계정인증을 스마트 폰 또는 Gmail로 처리하셔야 프로젝트 생성이 가능합니다.)

 

완료 되면 해당 프로젝트의 Console창이 뜨게 됩니다. 그럼 당장은 브라우저에서 할 것은 끝났으므로,

 

프로젝트를 진행할 폴더를 만듭시다. 그리고 터미널 혹은 에디터로 해당 폴더 경로에서 명령어를 실행합니다.

npm install -g firebase-tools

입력 후 설치가 끝나면 Firebase 인증을 해야하므로 아래 명령어를 입력합니다.

(현재 로그인된 계정을 바꾸고싶을땐 firebase logout 후 firebase login)

firebase login

입력하면 영어로 정보수집에 동의하겠냐하는데 Y를 누릅시다. 그러면 브라우저 창이 뜨고, 로그인이 완료되면 

firebase init

를 입력합시다. 그러면,

 

Database,Firestore,Fucntions,Hosting,Storage 5가지의 선택지가 나옵니다.

(Database,Firebstore는 Nosql 데이터베이스이며, Storage는 말 그대로 저장소입니다.)

 

스페이스 키로 Functions와 Hosting을 선택하고 엔터를 누릅니다. 그러면 프로젝트를 선택하라고하고, 아까 만들었던

 

Firebase 프로젝트를 선택합니다.

 

그 후 선택지는 Javascript > N > Y > 그냥엔터2번 으로 넘어갑시다.

2. Client에서 오픈 API 호출해보기 (필요없으시면 Skip)

Firebase Functions에서 API를 호출해보기 전에, Client단에서 API를 호출하면 어떻게 되는지 부터 살펴보겠습니다.

https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/hideonbush?api_key=발급받은key값

위의 주소는 Riot Games에서 제공하는 리그오브 레전드 기본 소환사 정보 API입니다.

(키값은 https://developer.riotgames.com/여기에서 받으시면됩니다.) 

 

프로젝트 폴더에 public > index.html 파일을 여시고 body안에 아무곳에서나 

<script>

fetch('https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/hideonbush?api_key=발급받은key값').then((res) => {
  console.log(res)
})
</script>

이렇게 입력하고 터미널에서 

firebase serve

입력하면, 기본적인 firebase 창이 뜨게됩니다. 그리고 console을 확인하면..

 

#으아니..

네 이런식으로 막히게 됩니다. 정부에서 제공하는 공공데이터 API같은경우는 조금 다른 문구가 뜨지만 역시 안됩니다. 

 

3. Functions에서 API 호출하기

안되면 되게해야죠. Front-End 개발자는 데이터가 있어야 주도적인 개발이 가능하니까요.

 

3-1. cors,request 설치

프로젝트 폴더에 Firebase를 정상적으로 설치하셨다면 functions라는 폴더가있습니다. 터미널 혹은 에디터에서 해당폴더로 이동 후

npm install cors request

3-2. functions에서 api 호출

functions 폴더에 index.js를 열어서 안의 내용을 전부 삭제하신 후 

const functions = require('firebase-functions');
const cors = require('cors')({origin: true});
const request = require('request');
exports.apicall = functions.https.onRequest((req, response) => {
  cors(req, response, () => {
    request(`https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/hideonbush?api_key=발급받은key값`, function (error, res, body) {
      response.send(res);
    });
  })
});

위의 내용을 붙여넣고 저장 후에, 커맨드에서 

firebase serve

입력하고 실행하면 

functions: HTTP trigger initialized at http://localhost:5001/api-call-da651/us-central1/apicall

이런식으로 로컬주소를 내뱉습니다. 저같은 경우는 Firebase 프로젝트명이 api-call 이라 api-call-da651이라고 나왔네요.

 

그럼 해당주소는 Cmd + 클릭(window는 Control+클릭)으로 주소를 클릭해서 들어가봅시다.

 

'그분'의 소환사정보

성공적으로 가져왔습니다! 그럼 이걸 어떻게 Client단으로 넘길것인가..! 

 

3-3. Client에서 Functions 호출하기

 

아주간단합니다. Client단에서 또 저 주소로 api를 호출하면됩니다. 다시 프로젝트 폴더에 public 폴더에 index.html를 열고 

 

body태그안에 마음에 드는곳에 

<script>
fetch('http://localhost:5001/api-call-da651/us-central1/apicall').then((res) => {
	res.json().then((res) =>{
		console.log(res)
	})
})  
</script>

 

이렇게 입력 후 저장하고, http://localhost:5000 로 이동합시다 (firebase serve 실행상태여야합니다.)

 

그리고 콘솔창을 보면!

 

'그분'의 정보를 가져왔습니다.

이렇게 원하는 정보를 가져올 수 있게 되었습니다. 

 

하지만 해결하지 못한 문제가 남아있습니다.

 

1. key값이 공개될일은 없지만 client단에서 호출하는 주소가 공개되기때문에 누구든 functions에 접근가능하다는것.

 

2. 이전 포스트에서 썼듯이 로컬이 아닌 실사용서버에서 타사 API호출을 위해선 요금제를 올려야합니다. 

요금제를 올리면 사용량이 많을시 과금이 되는데, 악의적인 사용자가 새로고침 및 api를 계속 요청해버리면 

생각지도 못한 과금이 일어날 수 있다는점

 

3. 위의 예제는 단순한 GET방식을 사용하여 정보를 가져오지만, 특정 서비스를 개발하려면 POST로 데이터를 보내서

해당 데이터에 맞는 정보를 가져와야한다는점.

 

이외에도 자잘한 문제가 있지만, 현재 미세먼지 관련 서비스를 개발중에 느낀것은 크게 3가지 입니다. 

 

이 다음 포스트에서는 요금제업그레이드, Firebase 배포와 문제점1번에 대한 해결방법을 포스트 하겠습니다.