[JS with Firebase] 파이어베이스로 스케줄러 프로그램 배포하기 1

RedPanda·2023년 2월 22일
0

간만의 포스팅이다. Spring boot 공부를 쉬엄쉬엄하면서 나름의 휴식 기간을 갖던 중에 친구에게 한가지 요청을 받았다.

게임 스케줄러를 만들자

게임 스케줄러 개발?

내가하는 게임 특성상 여러 캐릭터를 육성해야 하는데, 일간 및 주간에 돌 수 있는 컨텐츠가 한정적이다. 따라서 매주 얼마나 컨텐츠를 진행했는지 확인하는 것이 필요하다.
인게임 내에 구현되어있긴 하지만 한눈에 보는 것이 어렵고, 무엇보다도 다른 사람들과 공유하는 것이 불편하다.

그래서 최소 5~10명이 사용할 수 있는 게임 스케줄러를 만들어보는 것이 어떻겠냐는 제안을 받았다. 해당 게임에 API를 배포한지 얼마 되지 않아 사용해보고 싶다는 생각이 들던 참이였는데 잘됐다고 생각했다.

초반 개발은 이렇게

서버 개발을 하면서 느낀거지만 AWS에 배포하면서 가장 문제가 되었던 것은 비용적인 측면이다. 프로젝트 목적이 10명 이내로 사용할 수 있는 웹서버를 구현하는 데에 있지만 그에 대한 비용이 어쩔 수 없이 드는 점이 아쉬웠다.
그러다가 구글의 스프레드 시트에 익스텐션을 잘 사용하면 API로 데이터를 불러올 수 있다는 것을 알게되었다.

처음에는 해당 스프레드시트를 다운받아 스크립트를 모두 분석하고 필요한 데이터를 추가하고 정제하면서 우리에게 필요한 정보를 불러오게 했다. 엑셀로 간단하게 프론트 페이지를 구현할 수 있어 이틀만에 뚝딱 만들었다.

내맘대로 못하는 프론트 페이지

위와 같이 이쁘진 않지만 최대한 사용하기 쉽도록 간단하게 만들었다. 그러나 역시 엑셀 자체에는 한계가 분명했다.
물론 내가 못하는 것일지도 모르지만 시간이 되면 알아서 수정이 되는 부분같은 것이 추가로 필요한 기능인데, 아쉽게도 이 부분이 구현이 되지 않았다.
그리고 아무리 보기 쉽게 만들고 싶어도 빼곡한 저 표는 너무 아쉬웠다. 그러다가 캠프때 같이 수업을 듣던 분이 개발하면서 사용했다던 "파이어베이스"가 떠올랐다.

개발 스택 결정과 진입 과정

왜 파이어베이스인가?

위에서 설명했다시피 AWS에 배포하는 것은 비용도 들지만 정말정말 어렵다. 간단한 프로젝트를 만들어보려고 해도 AWS의 기능도 어려울 뿐더러 AWS에 서버를 실행시키기 까지의 과정이 너무너무 어려웠다. 그에 반해 파이어베이스는 웹서버를 지원해주기 때문에 프론트페이지만 잘 만든다면 간단한 서버를 직접 배포할 수 있다는 장점이 있다.

개발 스택 및 개발 방향

엑셀로는 더이상의 개발은 어렵다고 판단하였다. 조금 더 많은 기능들을 넣고 싶은 욕심도 있었고, 사용자의 요구사항에 따라 페이지를 구현하고 싶은 마음도 있었다.
앞서 말했지만 프로그램 규모가 작고 사용자도 많지 않기 때문에 AWS보다는 Firebase를 배워보면서 이것으로 백엔드를 구성하는 것이 좋겠다고 생각했다.

백엔드 개발자를 지망하는 나지만 배포 경험을 늘리고 싶고 파이어베이스가 뭔지도 궁금했기 때문에 Firebase를 선택했다.
프론트엔드는 vanilaJS와 Html, CSS로 빠르게 개발한 후에 필요에 의하여 vueJS로 추가 개발할 예정이다.

Firebase init!

Firebase Console 사용하기

구글 계정이 있다면 firebase를 이용할 수 있다.
다음의 URL로 들어가서 firebase를 세팅해보자.
https://firebase.google.com/?hl=ko

1. 프로젝트 만들기

상단의 "콘솔로 이동" 버튼을 클릭한 후에 "프로젝트 추가"를 눌러 프로젝트를 생성하자. 중간에 구글 에널리틱스 선택지가 나오는데 이는 굳이 설정할 필요 없단다.

2. 프로젝트 기능 추가

이제 기능을 추가해보자. 생성한 프로젝트를 클릭하면 왼쪽 네비게이션 바에 "빌드" 선택지가 있을 것이다. 여기서 원하는 기능들을 추가해보자.
나는 유저 인증에 대한 Authentication, DB 역할을 하는 Firestore Database, 파일 저장용 Storage, 배포용 Hosting을 사용하였다.

3. 각 기능별 세팅

3-1) Authentication

이메일 및 비밀번호와 구글 로그인을 사용할 예정이기 때문에 이렇게 세팅하였다.

3-2) Firestore Database, Storage의 rule

유저 정보에 대한 개발이 이루어지지 않았기 때문에 데이터 확인을 용이하게 하기 위해 모두 허용으로 세팅해놓도록 했다.

이렇게 되면 콘솔에서의 세팅은 끝난다.

VS code에서 firebase 사용하기

npm으로 폴더에 firebase 세팅하기

간단하게 cli에 다음을 입력해보자. 이를 위해서 nodeJS가 깔려있어야 한다.

npm install -g firebase-tools@9.12.1   // firebase 설치
firebase login  // firebase 계정을 cli와 연동
firebase init   // firebase 초기 세팅

firebase init을 하게되면 선택지가 생기는데 앞서 추가한 세팅에 맞게 선택해주면 된다. (화살표, 스페이스바, 엔터 사용)

다음 지문에서는 exited project를 선택하여 생성한 프로젝트가 나오면 성공이다. 엔터로 완료해주자.

++) 만약 python 관련 에러가 뜬다면 다음을 입력해주자.

npm i node-pre-gyp
npm i sqlite3

뭔진 모르겠지만 해결된다.

페이지 띄우기

이렇게하면 public이라는 디렉토리가 생성된다.
index.html을 찾아보면 여러 세팅들이 되어있는데 무시하고 우리가 봐야할 것은 인라인으로 세팅한 script들이다. 귀찮다면 다음을 복붙해주자.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
  <div class="container">HELLO<div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
</body>
</html>

이렇게 되면 HELLO라는 메세지가 페이지에 뜰 것이다.

다음은 실행 명령어다. 개발을 위해 localhost로 띄워보자.

firebase serve		// localhost로 띄우기
firebase deploy 	// 서버에 배포하기

여담

개발을 빨리 해야해서 바로바로 올릴 수 있을지 모르겠다. 아마 사용할 수 있을 만큼만 개발하고 다시 포스팅할 것 같다. 빨리 다른 사람들이 내 페이지를 사용했으면 좋겠다.

profile
끄적끄적 코딩일기

0개의 댓글