Firestore 썸네일형 리스트형 스탬프 투어 미션 구현하기(feat. firestore, redux saga) 프로젝트: SNU FESTIVAL 키워드: firestore, redux saga 상황 축제 사이트를 구현할 때 미션 기능을 추가해달라는 요청이 들어왔다. 페이지 곳곳에 5개의 미션이 나누어져 있고 특정 미션을 클리어하면 미션 카드에 그림 스탬프가 채워지는 형식이었다. 웹사이트 전체에 걸쳐 미션 진행 상태를 다뤄야 해야하기 때문에 redux를 이용하여 브라우저 내 상태 관리를 하는 것이 좋다고 생각했다. firebase auth 로그인을 한 상태로 미션이 이루어지기 때문에 firestore에 uid(사용자 계정의 unique id)를 문서 이름(key)으로 하고, 미션 진행 상태를 value로 저장하는 방식으로 미션 데이터를 관리하기로 했다.(GET/SET을 할 때 대상 문서를 쉽게 찾을 수 있다.) 해.. 더보기 Vercel log를 통해 Next.js 500 error 원인 분석하기 프로젝트: 채식 지도(가명) 키워드: Next.js, vercel, logging, realtime log, firebase 상황 mock으로 개발 중이었던 유저 피드백 데이터를 firestore에 저장된 실제 데이터로 교체하고자한다. 먼저 firebase를 package.json에 추가하고, firebase initialize 파일을 작성한다. // firebase/index.ts import { initializeApp } from '@firebase/app'; import { getFirestore } from '@firebase/firestore'; initializeApp({ apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: proce.. 더보기 env 파일의 보안 취약점과 api key 유출에 대비하기 프로젝트: SNU FESTIVAL 키워드: .env, react environment variables, security, chrome devtools sources, firebase auth, firestore 상황 프로젝트에서 로그인 기능은 firebase auth 의 google login 을 사용하고 있고, 데이터 CRUD는 firestore 를 사용하고 있다. CRA 환경에서 firebase api key 값을 .env 파일에 분리하여 저장하고있다. .env 파일이 보안을 위해 사용한다고 알려져있지만, 개발자 도구 source를 통해 충분히 노출될 가능성이 있다. 이를 막기 위해선 백엔드의 도움이 필요하지만, SNU FESTIVAL 프로젝트는 1인 개발이므로 firebase 의 보안 기능을 최대.. 더보기 이전 1 다음
