Firebase (8) 썸네일형 리스트형 배포하기 database 규칙 참고: Firebase 보안 규칙 시작하기 | Firebase Documentation (google.com) Firebase 보안 규칙 시작하기 | Firebase Documentation 의견 보내기 Firebase 보안 규칙 시작하기 Firebase 보안 규칙은 Cloud Firestore, 실시간 데이터베이스, Cloud Storage의 데이터에 강력하고 완전한 맞춤설정 보호 기능을 제공합니다. 다음 단계에 따라 데이 firebase.google.com storage 규칙 참고: Firebase 보안 규칙 시작하기 | Firebase Documentation (google.com) Firebase 보안 규칙 시작하기 | Firebase Documentation 의견 보내기 Firebase 보안 규칙 시작하기 Firebase 보안 규칙은 Cloud Firestore, 실시간 데이터베이스, Cloud Storage의 데이터에 강력하고 완전한 맞춤설정 보호 기능을 제공합니다. 다음 단계에 따라 데이 firebase.google.com Realtime Database , Cloud Firestore 차이점 Firebase에서 database는 Realtime Database와 Cloud Firestore 두가지를 제공해주고 있습니다. 하나의 프로젝트로 두개 모두 사용할 수도 있고 하나만 선택해서 사용할수도 있습니다. 처음에는 realtime database가 먼저 서비스가 되었지만 여러 단점들 보완 및 성능이 개선되어 Cloud Firestore가 서비스되기 시작하였습니다. 데이터 모델 Realtime database에서는 데이터를 하나의 큰 JSON 트리로 저장합니다. 그렇기 때문에 복잡한 계층적 데이터를 정규화 시켜서 정리하기가 쉽지 않습니다. 이런점들 때문에 중복 데이터가 많이 발생하여 관리하기가 비교적 어렵습니다. Cloud Firestore는 문서와 컬렉션으로 이루어져 있습니다. 각 문서에는 키-.. 클라이언트에서 데이터 실시간 받기 state = { show: false, //초기값 모달안보이게 name:"", //초기값 방제목 description:"", //초기값 방설명 chatRoomsRef: firebase.database().ref("chatRooms"), //firebase database의 chatrooms 테이블 chatRooms: [] //firebase에서 가져온 chatroom을 client에 뿌리기위해 } Firebase에 채팅방 데이터 저장후 Firebase로부터 데이터 가져온뒤 화면에 나타내기 파일업로드, 파일정보수정 [storage,database저장] function UserPanel() { const user = useSelector(state => state.user.currentUser) const inputOpenImageRef = useRef() //드랍다운에 파일업로드 입히는법 const handleLogout = ()=>{ //firebase 로그아웃 firebase.auth().signOut() } const handleOpenImageRef = ()=>{ inputOpenImageRef.current.click(); //type 파일인 input도 같이 클릭되게함 } const handleUploadImage = async (event)=>{ //파일업로드(프로필사진변경) const file = event.target.files[0] .. Auth [회원가입,로그인] 설치 - npm install --save firebase@^7.24.0 import firebase from "firebase/app"; import "firebase/auth"; //인증기능 import "firebase/database"; //데이터베이스기능 import "firebase/storage"; //스토리지기능 // // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional var firebaseConfig = { apiKey: "AIzaSyBk7qzaczfXcTtfMgLxtgcclr1TWzAP5b4", authDomain: "chat-app-df8be... React+firebase설정 1. 파이어 베이스 준비 * 가입 - 파이어베이스는 현재 구글의 서비스이므로 구글에 로그인하여 파이어 베이스에 접근할 수 있다. - 시작하기 버튼을 눌러서 프로젝트에 접근하자. * 프로젝트 만들기 - 프로젝트 만들기를 클릭하여 첫 프로젝트를 만들 수 있다. - 프로젝트 이름을 적고, 다음으로 넘어가도록 하자. 약관에 동의하고 계속하면 프로젝트가 생성된다. 2. 리액트 준비 * CRA - SDK를 추가하기 전에 리액트 앱을 먼저 준비해보자. - CRA(Create-React-App)을 통해 리액트 앱을 만들었으므로, 기본적으로 npm과 node 환경이라고 볼 수 있다. * SDK 추가 - 이 부분은 파이어 베이스 문서에서 npm 을 사용한 방식을 보고 따라하면 손쉽게 가능하다. 설치 - npm instal.. 이전 1 다음
