refactor: #54 Firebase SDK를 통한 사용자 인증 기능 구현

[SeungrokYoon]

Description

closes #54

프리온보딩 챌린지 당시 기능요구사항 문서에 제공된 API가 닫혔습니다. 그래서 현재 투두리스트 관련한 기능들이 제대로 동작하지 않고 있습니다.

그 중, 사용자가 우리 프로젝트에서 가장 처음 마주하게 되는 인증관련 기능들을 Firebase로 리팩토링을 진행했습니다.

Firebase SDK 동작 방식

파이어베이스 앱 생성 및 설정 파일 생성

파이어베이스 사이트에서 처음 프로젝트를 생성하고 나면, 파이어베이스 앱을 초기화 할 수 있는 설정 코드 스니펫을 제공해줍니다.
그 코드를 복사하여 전역에서 참조하여 사용할 수 있는 파이어베이스 인스턴스 app을 생성해줍니다.

// firebase/config.ts
import { getAuth } from 'firebase/auth'
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENT_ID,
}

// Initialize Firebase
const app = initializeApp(firebaseConfig)

export const auth = getAuth(app)
export default app

파이어페이스의 모든 기능은 app 인스턴스를 활용하여 접근할 수 있습니다. 저는 인증 관련 기능을 사용하기 위해서 파이어베이스와 연결된 인증 인스턴스를 getAuth() API 함수를 활용하여 반환해 사용하겠습니다.

현재 설정값들이 저장되어있는 firebaseConfig를 보시면 전부 환경변수를 참조하고 있습니다. 로컬 개발 시에는 .env.local에 환경변수 값들을 저장해두어 사용했고, 배포시에는 netlify 콘솔에서 환경변수를 추가하여 사용했습니다.

파이어베이스 인증 관련 기능 문서을 참고하시면 더 수월한 리뷰가 될 것 같아 첨부해보았습니다.

createUserWithEmailAndPassword, signinWithEmailAndPassword , signout API 함수를 사용하여 가입, 로그인, 로그아웃을 구현하였습니다.

사용자 정보는 파이어베이스에서 자체적으로 관리하고 있습니다.

테스트주소

작업 브랜치 프리뷰 링크

https://deploy-preview-55--our-todo-list.netlify.app/

를 통해서 회원가입, 로그인, 로그아웃 기능을 확인할 수 있습니다!

[netlify]

✅ Deploy Preview for our-todo-list ready!

Name	Link
🔨 Latest commit	b308437
🔍 Latest deploy log	https://app.netlify.com/sites/our-todo-list/deploys/6554dedaea3c420008830acc
😎 Deploy Preview	https://deploy-preview-55--our-todo-list.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 99 Accessibility: 100 Best Practices: 100 SEO: 92 PWA: 80 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for classy-twilight-6e3a73 ready!

Name	Link
🔨 Latest commit	b308437
🔍 Latest deploy log	https://app.netlify.com/sites/classy-twilight-6e3a73/deploys/6554deda4c577b00085e55e6
😎 Deploy Preview	https://deploy-preview-55--classy-twilight-6e3a73.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.