STUDY/Firebase (7) 썸네일형 리스트형 Firebase | 채팅 웹 애플리케이션 (7) 채팅 출력하기 1. database.js 작성 데이터를 읽어오는 getChats함수를 작성 export function getChats() { let chats = []; database.ref("chats").on("value", (snapshot) => { snapshot.forEach((row) => { chats.push(row.val()); }); }); return chats; } 2. Chat.js 수정 import { auth, database } from "../services/firebase"; import { getChats, sendChat } from "../helpers/database"; chats라는 상태값에 데이터를 담는다 const [chats, setChats] = useState([.. Firebase | 채팅 웹 애플리케이션 (6) 채팅 전송하기 0. Realtime Database Rule 작성 규칙을 설정한다. auth가 null이 아니면 읽기와 쓰기의 권한이 주어진다. 즉 로그인한 회원에게만 읽기와 쓰기의 권한을 줌. 더 세세하게 규칙을 설정할 수 있지만 일단 이렇게만 설정해두었다. 1. database.js 파일 생성 auth.js 작성과 비슷함 firebase파일에서 export해주었던 database를 import해줌 // src/helpers/database.js import { database } from "../services/firebase"; 2. sendChat 메서드 작성 메시지를 보내는 함수를 작성한다. 이 함수가 실행되면 Firebase의 Real-time Database에 값이 저장된다. (INSERT) Real-ti.. Firebase | 채팅 웹 애플리케이션 (5) 소셜로그인 (Google Login) Google로그인 1. Firebase 콘솔에서 Sign-in method 추가 스크롤을 내려 승인된 도메인에 localhost가 있는지 확인 (없으면 도메인 추가로 등록) 2. auth.js 작성 이번엔 구글 로그인에 필요한 메서드를 작성하면 된다. // src/helpers/auth.js export function signInWithGoogle() { const provider = new auth.GoogleAuthProvider(); return auth().signInWithPopup(provider); } 3. Login.js 수정 우선 위에서 작성한 메서드를 불러옴 import { signIn, signInWithGoogle } from "../helpers/auth"; 구글로 로그인 버튼을.. Firebase | 채팅 웹 애플리케이션 (4) 회원가입/로그인 1. firebase.js 수정 authentication과 database 함수를 export // src/services/firebase.js firebase.initializeApp(firebaseConfig); export const auth = firebase.auth; export const database = firebase.database(); 2. auth.js 파일 생성 및 작성 함수명만 봐도 알 수 있듯, signUp은 이메일과 비밀번호를 이용한 회원가입이고 signIn은 이메일과 비밀번호를 이용한 로그인 처리임 // src/helpers/auth.js import { auth } from "../services/firebase"; export function signUp(email,.. Firebase | 채팅 웹 애플리케이션 (3) 웹 앱 프로젝트에 세팅하기(React JS) 1. React 프로젝트 생성 create-react-app을 이용해 빠르게 만들어~~ 그 후 navigating에 필요한 react-router-dom과 firebase 패키지를 인스톨해주기 npm i react-router-dom firebase components / pages / helpers / services 폴더를 추가하였음 ✔️components - 재사용 가능한 컴포넌트들이 추가될 폴더 ✔️helpers - 재사용 가능한 메서드들이 추가될 폴더 ✔️pages - view들이 추가될 폴더 ✔️services - 서드파티 서비스들 2. App.js에 Route 설정 PrivateRoute와 PublicRoute HOC 만들기 👇 더보기 PrivateRoute - 로그인 한 유저만 접근 가능 .. Firebase | 채팅 웹 애플리케이션 (2) Firebase 프로젝트 설정 1. Firebase SDK 발급 프로젝트에 Firebase를 추가하려면 설정 값 (configuration details)가 필요함. 우선 스크립트를 복사하여 어딘가에 소중히 보관해두기..! 2. Authentication 설정 인증 방식 중 이메일/비밀번호 사용을 활성화 시켜줌 빌드 - Authentication - 시작하기 + ) Realtime Database 만들기 이제 리액트 프로젝트를 생성하고 SDK를 등록해주면 된다. 다음 글에 계속... Firebase | 채팅 웹 애플리케이션 (1) Firebase 프로젝트 생성 👀Firebase? 앱 개발을 빠르게 할 수 있도록 도와주는 모바일 플랫폼. 웹, iOS, Android등의 백엔드 관리를 도와준다. 👀Firebase가 제공하는 기능들 ✔️Authentication - email과 비밀번호 가입/로그인, Facebook, Google 등의 소셜로그인도 지원 ✔️Realtime database - 실시간으로 업데이트되는 No SQL데이터베이스 지원 ✔️Cloud functions ✔️Static hosting ✔️Cloud storage 무료 요금제(Spark)에서도 위의 기능들을 지원하고 있음. Firebase요금제 확인 1. Firebase 프로젝트 생성 Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의.. 이전 1 다음
