본문 바로가기

FE - Tools/Firebase3

[Firebase] React에서 Firebase로 database 이용하기 React에서 Firebase로 database 이용하기 React에서 Firebase로 데이터베이스에 데이터 추가하기, 데이터베이스에 있는 데이터 불러오기, 데이터베이스에 있는 데이터 삭제하기를 구현하는 방법을 정리해보려 한다. firebase 9.16.0 버전 기준으로 작성되었습니다. 1. firebase 파일 만들기 (src 폴더 하위에 생성하면 됨) // src/fbase.js import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain:.. 2023. 1. 26.
[Firebase] React에서 Storage로 프로필 사진 업데이트 하기 React에서 Storage로 프로필 사진 업데이트 하기 프로필 업데이트 기능은 Firebase의 Authentication에서, 이미지 업로드 기능은 Firebase의 Storage를 이용하여 구현할 수 있다. 우선 사용자 프로필 업데이트 기능을 구현하려면, 사용자가 존재해야 한다. 사용자를 생성하는 것, 즉, 계정을 생성하고 로그인을 할 수 있는 기능이 이미 있어야 한다. (Authentication 관련 내용 : 이전 글 참고 https://inthedev.tistory.com/37) firebase 9.16.0 버전 기준으로 작성되었습니다. 1. src에 firebase 파일 생성하기 src 폴더에 파일을 하나 생성해서 다음과 같이 입력한다. // src/fbase.js import { initi.. 2023. 1. 16.
[Firebase] React에서 Authentication로 로그인 구현하기 React에서 Authentication로 로그인 구현하기 Firebase로 로그인 기능을 구현하기 위해 관련 강의도 들어보고 구글 검색도 열심히 해보았지만 이전 버전에 대한 내용이 많아서 공부하는 것에 어려움이 좀 있었다. 😥 그래서 Firebase 공식 문서를 읽어보며 최신 버전에 대해 공부했던 내용을 짧게나마 정리해보려 한다. firebase 9.16.0 버전 기준으로 작성되었습니다. # 이메일로 로그인하기 1. src에 firebase 파일 생성하기 src 폴더에 파일을 하나 생성해서 다음과 같이 입력한다. // src/fbase.js import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; cons.. 2023. 1. 13.