내가 편하기 위해서 정리해둔다.
필요한것
파이어 베이스 apikey 등 각종 key
파이어 베이스에 로그인 하고 설정하면 고유 key 값을 준다.
설정하기 1
firebase.js 혹은 firebase.ts 를 만들어둔다.
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: process.env.REACT_APP_firebase_apiKey,
authDomain: process.env.REACT_APP_firebase_authDomain,
projectId: process.env.REACT_APP_firebase_projectId,
storageBucket: process.env.REACT_APP_firebase_storageBucket,
messagingSenderId: process.env.REACT_APP_firebase_messagingSenderId,
appId: process.env.REACT_APP_firebase_appId,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
각 key 들은 env 환경에 넣어두었다.
//firebase 기본
firestore에 들어가면 데이터 베이스에 접근이 가능하다.
각 써진대로 컬렉션 /문서(도큐먼트)/ 필드 이런 순서이다.
필드에서 컬렉션 값을 가져오는 방법
firebase/firestore 에서 query, collection 을 가져온다.
query(collection(db,컬렉션이름))
데이터 베이스에서 켈렉션 부분을 가져오는 방법이다.
db 는 아까 설정해둔 firebase.ts 에서 가져온다.
where 조건을 두번째 파라미터로 사용해서 세부적으로 필터를 걸어줄수가 있다.
where 구문
where 파라미터 값으로
첫번째 파라미터는 도큐먼트의 키값을 받는것 같다.
(‘도큐먼트의 키’ , ‘조건’ , ‘값’)
조건 값으로는 == 이거나 등호가 들어가고 ‘in ‘ ‘array contatined’ 등의 조건 값이 들어간다.
세번째 파라미터 값으로는 비교할 값을 써주면 된다.
도큐먼트 전체를 비교하기 위해서는 첫번째 파라미터 값에 documentId() 함수를 써주면 된다.
query 값을 가져와서 변수에 담아주고
onSnapshot 훅을 통해서 데이터 정보를 뿌려줄수가 있다.
q는 query를 담아준 변수 이름이다.
onSnapshot(q,(query) => {
query.forEach((doc) => { console.log(doc.data())})
})이런 식으로 사용하면 된다.
예시는 아래와 같다.
const q = query(
collection(db, getCookies("clientUuid")),
where("client", "==", getCookies("clientUuid"))
);
// 필드에서 가져오는 방법
// const q = query(
// collection(db, "privatechat"),
// where(documentId(), "==", "stefan")
// );
console.log(q, "q");
const unsubscribe = onSnapshot(q, (QuerySnapshot) => {
let messages: any = [];
QuerySnapshot.forEach((doc) => {
messages.push({ ...doc.data(), id: doc.id });
});
setMessages(messages);
});
데이터 삽입 방법
데이터 베이스에 데이터를 삽입한다.
addDoc 훅과 setDoc 훅을 사용할수가 있다.
차이점은 addDoc은 도큐먼트 이름을 auto로 정해서 저장이 되고
setDoc은 도큐먼트 이름을 내가 정해줄수 있다.
firebase/firestore 에서 addDoc,soc,setDoc ,collection 등을 임폴트 해준다.
addDoc 은 컬렉션 에서 값을 정해주고
setDoc은 Doc값을 선택해서 옮겨 줄수 있다.
예시는 아래와 같다.
addDoc(collection(db, getCookies("clientUuid")), data)
.then((docRef) => {
console.log(docRef.id); //p4eZcO5QV43IYnigxALJ
})
.catch((error) => {
console.log(error);
});위의 데이터를 가져온것 처럼 컬렉션에서 가져오고 싶은 컬렉션을 선택한다음에 data로 저장하고 싶은 data값을 할당해주면 된다.
then 을 이용해서 어떤 이름이 자동으로 설정되었는지 확인이 가능하다.
setDoc 일경우에는 doc훅을 사용해주는데
doc(데이터베이스, 컬렉션이름, 도큐먼트이름) 으로 도큐먼트 값을 가져온다.
그리고 setDoc에서는 (가져온 doc 값, 커스텀 이름, 데이터) 로 데이터를 저장할수 있다.
이렇게 저장하면 커스텀된 이름으로 데이터를 doc값위치에 저장한다.
add의 기능으로 추가가 되었으면 좋겠지만 도큐먼트값은 고유 id 값을 가져야해서 커스텀이름이 같으면
값이 새로 update가 되어버린다.
출처는 공식페이지 같은데 공부하면서 정리해본다.
출처 : https://softauthor.com/firebase-firestore-add-document-data-using-adddoc/
