FIREBASE
노마더 코드에서 무료로 제공하는 간단한 프로젝트중에 파이어베이스를 관련하여 만드는 트위터 클론코딩 찍먹버전이 있기에 일명 NWEET 만들기 해봤습니다.
나도 둘이서 하는 작은 프로젝트에 파이어베이스를 도입해서 만들어보고싶어서 공부를 해야겠다는 계기로 하게 됐습니다.
Auth에 대해서는 나중에 추가로 올리고 이번엔 crud에 대해서 한번 먼저 써보려고 합니다.
우선 파이어베이스는 뭘까요???
모바일 서버를 개발하기 위해서는 인증, 데이터베이스, 푸시 알람, 스토리지, API 등 모든것을 개발해야 했습니다. 하지만 모바일 서버는 이런 모든 것을 구성하는데 구성하는 범위가 매번 새로운 앱들과 차이 나지 않기 때문에 리눅스를 설치하고, FTP를 설치하고, 데이터베이스를 설치하고, 노드 서버나 스프링 서버를 올리고, 방화벽을 올리고, 도메인을 구입하는 등 이런 반복적인 작업을 앱 개발 할 대마다 하는 것은 엄청난 시간낭비입니다.
FireBase는 이 모든 플렛폼을 프로젝트 구축 시 자동적으로 만들어 줍니다. 또한 서버를 구축하기 위해서 리눅스 명령어를 알 필요도 없으며 도메인을 구입할 필요도 없고 개발하는 동안에는 서버를 구입할 필요도 없습니다.
CRUD
우선 이 영상은 니코샘의 영상 기반으로 코딩을 한것이며,
우선 기록식으로 내가 배운거를 바로바로 기록한거라 조금은 코드의 상태가 좋지 않을겁니다..!!!
FIREBASE / FIRESTORE를 이용해서 만들었습니다.
만들어놓은 FIreBase Instance부분에서
import { initializeApp } from "firebase/app";
import {getAuth} from "firebase/auth"
import { getFirestore } from 'firebase/firestore'
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId:process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId:process.env.REACT_APP_API_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID
};
const app = initializeApp(firebaseConfig)
export const authService = getAuth(app);
export const dbService = getFirestore(app)
{getFirestore}을 임포트 해오면 firestore관련 기능들을 사용할수가 있었습니다.
이것을 이용해서 crud로 트위터처럼 포스트글도 올리고 지우고 하게끔 했습니다.
import { collection,addDoc,query,DocumentData, orderBy, onSnapshot, QuerySnapshot} from 'firebase/firestore';
import React,{useEffect, useState} from 'react';
import Nweet from '../components/Nweet';
import { dbService } from '../fbase';
interface SnapShotData {
id?: string;
data?:DocumentData;
}
const Home = ({userObj}:{userObj:any}) => {
const [nweet, setNweet] = useState('');
const [nweets, setNweets] = useState<any[]>([])
useEffect(()=>{
const q1 = query(collection(dbService,"nweets"),orderBy("createdAt","desc"));
onSnapshot(q1,(snapshot)=>{
const nweetArr = snapshot.docs.map((doc:any) =>({
id:doc.id,
...doc.data()
}));
setNweets(nweetArr)
})
},[])
const onSubmit = async (event:React.FormEvent<HTMLFormElement>) =>{
event.preventDefault();
await addDoc(collection(dbService,"nweets"),{
nweet,
createdAt:Date.now(),
creatorId:userObj.uid
});
setNweet(" ")
}
const onChange = (event:React.ChangeEvent<HTMLInputElement>) =>{
const {currentTarget:{value}} = event
setNweet(value)
}
return (
<div>
<form onSubmit={onSubmit}>
<input type="text" placeholder='글을 입력해요' maxLength={120} onChange={onChange} />
<input type="submit" value="Ntweet" />
</form>
<div>
{nweets.map((nweet)=> (
<Nweet
key={nweet.id}
nweetObj={nweet}
isOwner={nweet.creatorId === userObj.uid}
/>
))}
</div>
</div>
);
};
export default Home;이건 Home.tsx입니다.
이 부분은 Create,Read 하는 부분의 코드입니다..
영상을 보면서 따라치는 느낌으로 만들어보았구요.
강의는 js로 만들었지만 저는 ts으로 만들었습니다. 그래서 그런가 되게 힘들더라고요..
CREATE:
Await addDoc(collection(dbService,”nweet”,{
nweet,
createdAt:Date.now()
creatorId: userObj.uid;
}
이 부분이다.
우선 파이어베이스에서 Create하는 부분은 addDoc이라는 메서드를 이용하는 방법이다.
collection을 만들고 컬렉션 안에 연결해놓은 db에 “nweet”이라는 이름으로
Nweet이라는 텍스트 내용과 createdAt 시간, 그리고 nweet을 만든 creator가 자기 자신인지에 대한 uid를 DB에 컬랙션을 추가하라는 명령어입니다.
추가적으로 공식 홈페이지에 나온 내용 입니다.
참조하기 좋을거 같아서 가져왔습니다.
import { collection, addDoc } from "firebase/firestore";
const docRef = await addDoc(collection(db, "cities"), {
name: "Tokyo",
country: "Japan"
});
console.log("Document written with ID: ", docRef.id);
READ:
useEffect(()=>{
const q1 = query(collection(dbService,"nweets"),orderBy("createdAt","desc"));
onSnapshot(q1,(snapshot)=>{
const nweetArr = snapshot.docs.map((doc:any) =>({
id:doc.id,
...doc.data()
}));
setNweets(nweetArr)
})
},[])query라는 메서드를 이용하여 collection에 있는 nweets를 orderby를 통해서 시간 순으로 가져오고 onSnapshot으로 실시간으로 DB에 있는 데이터를 읽어오게 만드는 함수이다.
그래서 이 코드로 인해서 내가 nweet글을 포스트하면 화면에 바로바로 읽어오게끔 만들어진다.
굉장히 짧은 코드로 굉장한 기능을 하는거같다. 이런것이 파이어베이스의 장점같다.
