Ming's develop story

Permit.js import React from "react"; import { useSelector } from "react-redux"; import { apiKey } from "./firebase"; const Permit = (props) => { const is_login = useSelector((state) => state.user.is_login); const _session_key = `firebase:authUser:${apiKey}:[DEFAULT]`; const is_session = sessionStorage.getItem(_session_key) ? true : false; if (is_session && is_login) { return {props.children}; } ..

데이터 가져오기 import { collection, getDoc, getDocs } from "firebase/firestore"; App.js에서 collection, getDoc, getDocs를 import 해준다. React.useEffect(() => { console.log(db); const query = getDocs(collection(db, "bucket")); //getDocs는 어떤콜렉션인지? 이고 db, bucket은 데이터와 콜렉션 이름) console.log(query); }, []); 이후 전 시간에 만들어 두었던 useEffect 안에 query 변수를 선언해서 콜렉션 정보를 가져오고 콘솔로 찍어 확인해 보자 위와 같이 볼수 있다. 보통은 데이터를 가져오라 하면 즉각 가져..

1. 파이어배이스 패키지 설치 2. Firestore 프로젝트 대쉬보드 우측 상단 '문서로 이동' 클릭 3. '웹 시작하기' 클릭 4. 연동하는 방법이 잘 설명되어 있다. (Firebase Document) 5. 다시 대쉬보드로 돌아가 '프로젝트 개요' -> '웹 아이콘' 클릭 6. 닉네임 설정 후 '앱 등록' 호스팅은 나중에 설정 가능하다. 7. 복사하기 ( apiKey는 내 프로젝트에 접근 가능한 key이기 때문에 중요하다! ) 8. VScode 내 프로젝트의 src 폴더에 firebase.js 를 만들어주고 붙여넣기를 한다. 9. 아까 Firebase Document에서 쭉 내려보면 사용 가능한 서비스가 있는데 그곳에서 Firestore Document로 이동 10. 밑으로 내려보면 개발 환경 설정..

파이어스토어란? Firebase에 포함되어 있는 서비스 중 하나로 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스이다! 구조 : 1. Collection: 문서(다큐먼트)의 집합 2. Document: JSON 형식으로 데이터를 저장할 수 있음 설정하기 1. 만들어 두었던 프로젝트를 선택한다. 2. 좌측의 빌드에서 Firestore Database 클릭! 3. 데이터 베이스 만들기! 4. 필요에 따라 선택 5. 어디로 설정하던 지금 시점에선 크게 상관 없다 6. 컬렉션 시작 7. 임의로 추가해보면 8. 끝!

1. 콘솔로 이동 클릭하기! 2. 프로젝트 만들기 3. 이름 짓기 4. 5. 6. 잠시뒤 다 만들어 진 것을 확인할 수 있다. 7. 프로젝트 대쉬보드로 넘어오면 설정 끝!