내가 프론트엔드 개발을 스타트업에서 처음 경험했었는데 입사하자마자 어느 회사의 소개 페이지를 관리할 수 있는 관리자 페이지를 혼자 만들어야 되는 상황이 발생했다. 설상가상으로 해당 프로젝트 시작일로부터 약 한 달 뒤 지금 하고 있는 관리자 페이지 UI 와 기능을 기반으로 다른 회사의 관리자 페이지를 하나 더 만들어야 되는 상황이 발생한 적이 있다.
이때 두 프로젝트 모두 FIrebase 를 사용했었는데 이 글에서 Firebase 를 소개하면서 해당 기능들에 대한 나의 경험을 이야기해보려고 한다.
FireStore
Cloud Firestore는 Firebase 및 Google Cloud의 모바일, 웹, 서버 개발에 사용되는 유연하고 확장 가능한 데이터베이스입니다. - firebase 공식 문서 中
기존에 서버를 사용하기 위해서는 백엔드 개발자가 Node.js(Express) 나 MySQL 등을 통해 서버와 DB 를 개발한 뒤에 사용이 가능한 점으로 인해 클라이언트 개발자와의 소통이나 유지보수 등에서 개발 비용이 발생하지만, FireStore 의 특징인 NoSQL 을 통해 클라이언트 개발자가 브라우저의 콘솔을 통해 DB 를 관리할 수 있고 해당 DB 에 연결 시 추가적인 소통을 하지 않고도 간편하게 사용할 수 있다는 장점을 가지고 있다.
FireStore 에는 컬렉션, 문서, 필드(데이터) 라는 3가지의 개념들이 있다.
기존의 SQL 구조를 빗대어 표현하자면 컬렉션은 Table, 문서는 Row, 필드는 Column 에서 특정 값을 나타낸다.
ex) 회원의 정보를 가지고 있는 user DB
SQL
NoSQL
내가 맨 처음에 React 에 Firebase 를 적용하는 당시에 제일 신기해했던 기능이다. NoSQL 을 접하기 전에는 너무나 당연하게 MySQL 과 Express 등의 백엔드 작업을 해줘야지만 DB 를 사용할 수 있다고 알고 있었는데 FireStore 를 적용해보니 너무나도 쉽게 데이터 읽기, 쓰기, 삭제가 가능했었기 때문이다. 백엔드 개발자가 아닌 내가 데이터의 구조를 설계하면서 데이터를 어떤 형식으로 설계해야 클라이언트에서 사용할 때 더 빠르고 간편하게 보여줄지를 생각하면서 작업을 하다 보니 FIrebase 를 사용하지 않는 프로젝트에서도 상태값에 대한 구조를 설계할 때 더 많이 생각하고 설계하는 습관이 생긴 것 같다.
Storage
Firebase용 Cloud Storage는 Google의 규모를 활용한 강력하고 단순하며 경제적인 객체 저장소 서비스입니다. Cloud Storage용 Firebase SDK는 네트워크 품질과 관계없이 Firebase 앱의 파일 업로드 및 다운로드에 Google 보안을 적용합니다. - firebase 공식 문서 中
서비스의 파일(이미지, 동영상, 오디오, pdf 등)을 업로드하여 파일을 관리하고 다운로드도 할 수 있는 저장소이다.
storage 는 별다른 기능이 없다고 생각해서 프로젝트를 진행할 때 크게 느낀점은 없었던 것 같다. 하나 생각나는 건 이미지를 업로드하고 업로드 한 이미지의 url 을 받아서 store 에 문자열로 저장하는 기능을 구현할 때, 해당 이미지를 더 쉽게 구분하기 위해 이미지를 저장할 때 shortid 라이브러리를 사용하여 파일의 이름을 적용하고 url 의 query string 에 imgId={shortid} 라는 쿼리를 추가해서 이미지를 제거하는 경우 더욱 더 명확하게 기능을 구현한 경험이 있다.
Auth
Firebase 인증은 앱에서 사용자 인증 시 필요한 백엔드 서비스와 사용하기 쉬운 SDK, 기성 UI 라이브러리를 제공합니다. 비밀번호, 전화번호, 인기 제휴 ID 공급업체(예: Google, Facebook, Twitter 등)를 통해 인증이 지원됩니다. - firebase 공식 문서 中
회원 관리에 필요한 기능들(로그인, 이메일 인증 여부, 비밀번호 변경, 아이디 찾기)을 더욱 쉽게 구현할 수 있게 해주는 기능이다. firebase console(브라우저) 에서 이메일의 정보(발신 이메일, 내용) 를 변경할 수 도 있어서 간단한 텍스트를 변경하여 사용자에게 이메일을 보내줄 수도 있다. 그리고 Store, Storage 의 데이터에 Auth 에 데이터가 존재하는 사용자들에게만 공개할 수 있는 기능도 있어서 인증된 사용자에게만 보여줘야 하는 경우에도 코드 몇 줄로 간단하게 제한이 가능하다.
Auth 기능을 사용하면서 느낀 점은 기능 동작은 엄청 간단하지만 디테일한 부분을 손 봐줘야 한다고 느꼈다. 예를 들어서 비밀번호 변경을 하는 경우 해당 사용자에게 비밀번호를 변경할 수 있는 url 을 이메일을 통해서 보내줘야되는데 대부분의 회사들은 회사마다 이메일의 템플릿이 존재한다.
하지만 firebase 에서 보낸 이메일은 이런 형태로 보여준다.
누가봐도 UI 변경이 필요하다고 생각할 것이다. 게다가 메일을 많이 보내는 경우 firebase에서 보낸 메일이 스팸으로 빠지는 이슈가 발생하기도 한다.
그래서 이런 두 가지의 이슈들을 해결하기 위해 템플릿 이슈는 nodemailer 를 사용하여 회사 UI 를 HTML 과 CSS 로 제작한 뒤 메일을 전송하는 방법으로 해결하였고 스팸으로 분류되는 이슈는 nodemailer 를 OAuth 형태로 메일을 전송하여 문제를 해결하였던 적이 있다.
또한 Auth 에서 이메일이나 페이스북은 기본적으로 지원하지만 우리나라의 경우 카카오나 네이버 계정을 통해 소셜 로그인을 구현하는 서비스가 많기 때문에 별도의 작업이 필요하다. 카카오나 네이버 로그인을 구현하려면 functions 와 admin 을 통해 custom token 을 발급해야 가능한걸로 알고 있다.
Hosting
Firebase 호스팅은 웹 앱, 정적 콘텐츠와 동적 콘텐츠, 마이크로서비스를 위한 빠르고 안전한 호스팅을 제공합니다. - firebase 공식 문서 中
정적 컨텐츠인 웹 어플리케이션(React, Angular 등)을 별다른 설정 없이 빠르게 배포할 수 있도록 해주는 서비스이다. SSL을 통한 안전한 접속, CDN 을 통해 전 세계에서도 빠르게 접속할 수 있는 특징들이 있다.
FIrebase CLI 를 통해 배포할 수 있고, 리소스를 공유하는 다른 사이트를 배포하는 것도 가능하다. (서비스-관리자 페이지)
이전에 개인 프로젝트를 진행할 때 Netlify 나 Vercel 같은 서버리스 플랫폼을 통해서 배포를 진행해본 적이 있어서 관리자 페이지를 배포할 때 큰 에러도 없이 술술 진행되어 큰 감흥은 많이 없었다. 하지만 문제는 Next.js 로 개발한 서비스 페이지 배포를 할 때 발생하였다.
Next.js 로 개발한 서비스 페이지에서는 getServerSideProps 를 통해서 News, Blog 같은 포스팅의 타이틀이나 썸네일 이미지를 meta 태그에 적용하는 기능을 구현하는 상황이었는데 firebase 는 정적 컨텐츠만 지원하다 보니 배포가 정상적으로 진행이 되지 않는 이슈가 발생하였다.
그래서 Cloud Functions 를 통해서 여러 가지 세팅을 진행하여 배포를 진행하였다.
Cloud Functions
Firebase용 Cloud Functions는 Firebase 기능과 HTTPS 요청에 의해 트리거되는 이벤트에 응답하여 백엔드 코드를 자동으로 실행할 수 있는 서버리스 프레임워크입니다. - firebase 공식 문서 中
Firebase 환경에서 개발을 하다보면 Node.js 환경에서만 동작하는 라이브러리나 Firbase 에서 특정 동작(이벤트)이 발생하면 해당 값을 Firebase 내의 다른 서비스에 이벤트를 발생시키는 트리거 기능들이 필요한 경우가 생긴다. 이를 Cloude Functions 를 통해 구현이 가능하다.
Cloud Functions 를 사용하면서 생각나는 특징들을 간단하게 정리해보았다.
- 동적 컨텐츠 hosting 제공 (next.js 등)
- 백엔드 코드 구현 (nodemailer 등)
- 카카오, 네이버 등의 Firebase Auth 에서 제공하지 않는 플랫폼 사용
- Firebase Admin 의 트리거를 통한 store 등의 firebase 데이터 처리
1번부터 3번은 위쪽에서 각각의 서비스들을 설명할 때 언급했기 때문에 4번만 이야기해보려고 한다.
예를 들어서 Auth 의 정보와 Store 의 정보가 연결되어있는 경우, 특정 값을 변경해주기 위해서는 Auth 에도 정보를 수정해야되고 추후에 Store 에 있는 정보도 수정해줘야 하는데 이러면 여러번 작업을 진행해야되기 때문에 번거로울 수 있다. 이를 Cloud Functions 와 Firebase Admin 을 통해 Store 에 특정 값이 변경되면 해당하는 Auth 의 정보도 변경해줄 수 있다.
마무리
Firebase는 무료 플랜으로도 충분히 간단한 어플리케이션을 구현할 수 있다고 생각한다. (회사 프로젝트는 functions 를 사용하기 위해 유료 플랜으로 진행을 하였지만 규모가 크지 않은 프로젝트라서 비용이 많이 나오지 않았다) 그렇기 때문에 만약 내 주변에서 Firebase 를 공부하고자 하는 사람이 생긴다면 일단 공식 문서를 보고 만들면서 개념을 익히라고 추천하고 싶다. 1년 전에 프로젝트를 진행했다 보니 여러 가지 개념들이 확실하지 않거나 빠진 내용들이 발생했을 수 도 있다. 이 점은 생각날 때 바로바로 수정을 진행할 예정이다.
참고
