moonstruck 개발일지: firebase 연결하기(진짜별거없음주의)

그른손·2024년 11월 11일
0

우선순위

지하철타면서 생각해본 현재 작업 우선순위는 아래와 같습니다.

  • 로그인 기능 구현: 저번에 Peony 프로젝트를 만들 때는 Firebase-google 로그인을 만들어봤으니, 이번에는 예전부터 해보고 싶었던 카카오톡 OAuth 로그인을 firebase를 활용해 구현해볼 것임
  • 계정별 무료 크레딧 및 갱신 로직 구현: 모델 사용료 관리를 위해 각 계정별로 하루에 3~5개정도의 무료 크레딧을 제공하고, 날짜가 지나면 갱신하는 식으로 만들 생각.
  • API 통신을 클라이언트에서 직접 하는 대신 서버리스로 구현하기: 클라이언트를 뜯어봤을 때 어디로 어떤 정보를 보내는지 확인할 수 있는 상태인데, 이걸 개선해줄 것.
  • google vertex AI 토큰 자동 갱신 로직: 지금은 스크립트로 CLI에서 직접 재발급받는 식으로 하고 있는데, 서버리스를 이용해서 이걸 자동화해줄거임
  • 배포: 여기까지 하면 간신히 배포 가능한 수준까지 온다고 할 수 있겠음
  • 계정에 결과 저장 기능
  • 깜짝 놀랄만큼 멋진 카드 뽑기 UI와 애니메이션 (여기가 좀 고비일듯)
  • 디자인, 스타일링 (이거 하다 늙어죽을 수도 있음)
  • 스프레드 별 프롬프트 최적화 기능, etc... (당장 필수적이지 않지만 서비스 개선에 좋은 것들)

그럼 Firebase Cloud Functions를 설정해야겠네

  • 왜냐면, 카카오톡 로그인API 통신, 계정별 크레딧 갱신, 구글 클라우드 엑세스 토큰 자동 갱신 등의 필수적인 기능이 서버리스 환경을 필요로 하기 때문

어떻게 했느냐

  • 일단 호스팅에도 firebase를 사용할 거고, db 기능은 firestore를 쓸거기 때문에 문스트럭 프로젝트에 firebase를 연결해줬습니다.
  • 사용 요금제를 spark에서 blaze로 바꿨습니다. firebase cloud functions는 사용량만큼 요금을 부과하는데, 이게 blaze 요금제 설정을 필요로 해서 요금제 변경 후 결제 계정까지 연결해줬습니다. 예산은 꼴랑 5만원으로 설정했고, 이제 사용량에 따라 메일로 제 피같은 돈을 얼마나 써야하는지 알려줄 겁니다. (25%, 50%, 100%마다 메일로 알려준다고 함)
  • firebase SDK 설정: 프로젝트를 만들면 발급되는 api 키 등을 앱에다가 넣어주고 firebaseConfig 파일을 만들어 초기화시켜줄 겁니다.
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
  measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
};

const app = initializeApp(firebaseConfig);
console.log('firebase initialized');

export const auth = getAuth(app);
export const db = getFirestore(app);

수줍은 콘솔로그..

  • 이제 서버리스 백엔드 환경을 조성할 차례입니다. moonstruck-firebase-functions 디렉토리를 만들고, firebase init functions 명령어를 실행해 초기화해줍니다.
  • 하고 나면 이렇게 됩니다. 이걸 firebase에 배포하면, 별도의 서버 구현 없이도 백엔드 로직을 실행할 수 있습니다.
  • 여기서 유저 요청에 따른 API 통신, 사용자 크레딧 갱신, 구글 클라우드 엑세스 토큰 갱신 등의 로직을 구현하면 됩니다!
  • 일단 밥부터 먹고요
profile
프론트엔드 개발자

0개의 댓글