본문 바로가기

Firebase

 (9)
Firebase vs Supabase Firebase 현재 Google이 소유하고 있는 Firebase는 모바일 및 웹 개발자를 대상으로 하는 도구 모음입니다. 그 중심에는 Firestore 데이터베이스가 있습니다. Firestore를 사용하면 "문서"를 저장할 수 있습니다. 이는 값이 다른 하위 문서가 될 수 있는 키:값 쌍의 모음입니다. 문서 기반 스토리지는 컬렉션의 두 문서가 반드시 동일한 구조를 가질 필요는 없으므로 구조화되지 않은 데이터에 적합합니다. Firebase는 또한 사용자 관리를 위한 인증 서비스, Cloud Functions 및 File Storage와 같은 다른 Google 서비스용 래퍼와 같이 웹 개발자가 유용하다고 생각하는 다른 기능을 제공합니다. Supabase Supabase는 오픈 소스 firebase 대안이지..
firebase를 이용한 아이디 찾기, 비밀번호 재설정 구현하기 오늘은 firebase의 Authentication과 firestore Database를 활용하여 아이디 찾기, 비밀번호 재설정을 구현하는 방법에 대해 정리해보겠습니다. 우선 각각 구현 방향은 다음과 같습니다. 처음에는 본인인증 기능을 구현하여 본인인증을 바탕으로 아이디 찾기, 비밀번호 재설정을 구현하는 것이 목표였지만, 시간적인 한계로 다운 그레이드한 방법으로 구현했습니다. 아이디 찾기 이름, 연락처 입력받기 입력 안했을 시 오류메시지 이름, 연락처에 해당하는 데이터 불러오기 일치하는 데이터가 없을 때는 일치하는 데이터가 없습니다. 데이터가 있을 때는 해당하는 이름, 이메일 띄워주기 비밀번호 재설정 이름, 아이디, 연락처 입력받기 입력 안했을 시 오류메시지 이름, 아이디, 연락처에 해당하는 데이터 불러..
React Query Key 관리 오늘은 useQuery를 통해 데이터를 관리하다가 발생한 문제와 그 원인이었던 React Query Key에 대해서 정리해보려고 합니다. 우선 발생한 문제에 대해 설명해 보겠습니다. 문제가 발생한 코드는 const fetchPosts = async () => { const postsCollection = query( collection(db, "posts"), where("nation", "==", nation), where("category", "==", category) ); const querySnapshot = await getDocs(postsCollection); const postsData = []; querySnapshot.forEach((doc) => { postsData.push({ ...
firebase Storage를 활용한 이미지 업로드 하기 오늘은 firebase Storage를 활용하여 이미지를 업로드하고 해당 이미지 링크를 데이터베이스에 저장하는 방법에 대해서 정리해보겠습니다. 이 포스트에서는 firebase Storage 콘솔 설정에 대한 부분은 생략하고, 코드를 작성하는 부분에 대해서만 정리할 예정입니다. 우선 구현하려고 했던 이미지 업로드 방식은 한 개 이상의 이미지를 선택한다. 선택한 이미지 목록을 보여준다. 선택한 이미지 목록에 삭제 기능을 통해 목록에서 삭제를 가능하게 한다. 파일을 업로드하고 다운로드 url을 받는다. 다운로드 url을 해당 post의 database에 넣는다. 위의 5개의 과정입니다. 우선 기능을 구현하기 전에 Firestore SDK를 추가해야 합니다. import { initializeApp } from..
[내배캠] firebase 회원가입, 로그인 이번 과제의 요구사항은 1. 회원가입 유효성 검사하기 2. 회원가입 성공 시 Header의 로그인, 회원가입 버튼을 숨기고, 이메일과 로그아웃 버튼이 보이게 만들기 3. 로그아웃 버튼 클릭 시 Header의 이메일과 로그아웃 버튼이 없어지고, 로그인, 회원가입 버튼을 보이게 만들기 4. 로그인 유효성 검사하기 5. 로그인 성공 시 회원가입과 마찬가지로 Header의 로그인, 회원가입 버튼을 숨기고, 이메일과 로그아웃 버튼이 보이게 만들기 6. 게시물 추가 버튼 클릭 시 로그인 여부 확인하기 7. 게시물 추가 시 이메일을 게시물의 author에 저장하기 8. 게시물 수정 버튼 클릭 시 회원정보 확인하기 9. 게시물 삭제 버튼 클릭 시 회원정보 확인하기 이렇게 9가지 입니다. 이번 과제는 firebase를 ..
FireBase Auth를 활용하여 소셜 로그인 구현하기(Google, Github) 이번 포스트에서는 Firebase Authentication을 활용한 소셜 로그인 구현에 대해서 정리해보겠습니다. Google, Github 로그인 모두 코드상으로는 거의 비슷합니다. 그 전에 해야할 setting이 조금 차이가 있는데, 그 부분은 아래의 링크에서 참고해주세요. 자바스크립트로 Google을 사용하여 인증 | Firebase 자바스크립트로 Google을 사용하여 인증 | Firebase 의견 보내기 자바스크립트로 Google을 사용하여 인증 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 사용자가 Google 계정을 사용하여 Firebase에 인증하도록 설 firebase.google.com 그럼 코드를 정리해보겠습니다. 우선 Google 로그인 입니다. //..
FireBase Auth를 활용하여 회원가입, 로그인 기능 구현하기 오늘은 Firebase Authentication을 활용하여 회원가입, 로그인 기능을 구현하는 방법에 대해 정리해볼게요. import 해야하는 부분이나 초기 세팅에 대해서는 웹사이트에서 Firebase 인증 시작하기 | Firebase Authentication (google.com) 웹사이트에서 Firebase 인증 시작하기 | Firebase Authentication Google I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알아보기 의견 보내기 웹사이트에서 Firebase 인증 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분 firebase.google.com 해당 링크를 참고하면 됩니다. 저는 제가 구현했던 코드를 중심으로 정리해볼 예정입니다..
[내배캠] 뉴스피드 프로젝트 오류 정리2 오류 firebase의 fireStore를 통해 데이터를 저장하고 받아오는 과정에서 발생한 오류 입니다. 오류의 원인은 fireStore 무료 버전의 용량을 초과해서 발생한 오류였습니다. 해결방법 우선 새로운 store를 만들어서 사용하는 방법으로 진행했지만, 아직 근본적인 원인과 해결책을 찾지 못해 임시방편으로 앞의 방법으로 진행하고 있습니다. 해결방법을 찾게 되면 수정할게요..! 오류 const fetchData = async () => { const q = query(collection(db, "contents")); const querySnapshot = await getDocs(q); const initialContents = []; querySnapshot.forEach((doc) => { i..

티스토리툴바