<<firebase.js>>
import {initializeApp} from "firebase/app";
import {getAuth} from "firebase/auth";
const firebaseConfig ={apikey...};
firebase 웹페이지에서 새로운 프로젝트를 만들어 apikey를 받고 복붙
const app = initiailizeApp(firebaseConfig};
const authService = getAuth();
export const dbService = getFirestore(); - 여러번 사용하므로 export
<<firebase 인증(auth)>>
https://firebase.google.com/docs/auth/web/manage-users#web-version-9
createAccount or login -> firebase는 처음에 userlogin한 것을 인지 못함
그렇기 때문에 observer를 둬야함
onAuthStateChanged(authService, (user) => {
if (user) {
const uid = user.uid;
} else {
}
});
이것은 firebase가 초기화될때, 로그인할때, 로그아웃할때 전부 trigger가 됨
useEffect와 useState를 사용
useEffect(() => {
onAuthStateChanged(authService, (user) => {
if (user) {
setIsLoggedIn(true);
} else {
setIsLoggedIn(false);
}
setInit(true);
});
}, []);
<소셜로그인>
*firebase자체적으로 google, github등 소셜로그인 가능(백엔드 구축 필요없음)
https://firebase.google.com/docs/auth/web/google-signin
<<firestore database>>
firebase 웹페이지의 프로젝트에서 firestore생성후 collection 생성
import { collection, addDoc, getDocs } from "firebase/firestore";
<input에 내용 작성후 데이터베이스로 보내기>
const getNweets = async () => {
try {
const dbNweets = await getDocs(collection(dbService, "nweets"));
dbNweets.forEach((doc) => {
const nweetObject = {
...doc.data(),
id: doc.id, //작성되는 하나의 객체 설정
};
setNweets((prev) => [nweetObject, ...prev]); //예전 data들도 가져옴
});
} catch{
}
};
useEffect(() => {
getNweets();
}, []); //component build될 때 실행
const onSubmit = async (e) => {
e.preventDefault();
try {
await addDoc(collection(dbService, "nweets"), {
text: nweet,
createdAt: Date.now(), //nweets라는 콜렉션에 데이터 저장
});
setNweet(""); //완료 후 공백으로 설정
} catch{
}
};