[1人 프로젝트] 트위터 클론코딩 3회차

🎉 성과

완성한 부분

데이터베이스를 생성하고, 실시간으로 사용가능한 CRUD 기능을 모두 구현했다.

 

 

---

 

 

✨ 느낀점

👍 알게 된 점

Firebase를 이용하여 Cloud Database 생성완료

데이터베이스는 컬렉션, 문서, 필드 총 3가지로 나뉘어져있다. Collection는 폴더, Document는 파일, Field는 내용이며, 폴더안에 파일들이 있고, 파일안에는 내용으로 차있는 것이라고 생각하면 쉽게 이해가 가능하다. 

 

Database에 데이터 Create하기(CRUD)

//fbase파일
import { getFirestore } from "firebase/firestore";
export const dbService = getFirestore();


//HOME.js파일
import {dbService} from 'fbase';
import {addDoc, collection} from 'firebase/firestore';

const onSubmit = async(event) => {
    event.preventDefault();
    await addDoc(collection(dbService, 'tweets'), {content: tweet, created: Date.now()});
    setTweet('')
}

input태그와 form태그를 생성하고, form태그에 onSubmit 속성 값으로 onSubmit함수를 넣는다. onSubmit함수는 위의 코드와 같이 작성한다. 

event.preventDefault();는 input을 제출했을때, 새로고침이 되는것을 막아주는 역할을 한다.

addDoc함수를 이용해서 firebase에 있는 컬렉션이 tweets이고, content, created가 필드키이고, 필드값은 input값을 받은 tweet과 현재일자이다.

해당 데이터를 데이터베이스에 넣게되면, 자동으로 input이 빈칸으로 되게 setTweet('') 코드를 작성한다.

 

Database의 데이터를 Read하고, 화면에 출력하는 2가지 방법(CRUD)

//HOME.js
import {getDocs, query} from 'firebase/firestore';

const [getDB, setGetDB] = useState([]);
const gettweets = async() => {
    const q = query(collection(dbService, 'tweets'))
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach(doc => {
    	const tweetfield = {
       	    ...doc.data(),
            id: doc.id
        }
    setGetDB(prev => ...prev, tweetfield);
    });
};
.
.
.
return(
	{getDB.map(tweet => {
    	<>
        	<div key={tweet.id}>
            <h4> tweet.tweet </h4>
            </div>
        </>
    })}
)

첫번째 방법의 단점은 실시간으로 적용되지않아 사용자가 직접 새로고침을 해야한다. 그렇기때문에 컴퓨터 자원을 덜 소모한다는 장점이 있다.

getDB는 데이터베이스의 데이터를 전부 받을 배열이다.

query함수를 사용하여 collection이 tweets인 컬렉션을 q라는 변수에 저장한다. 그리고 getDocs()를 사용하여 q라는 컬렉션에서 모든 문서들을 querySnapshot이라는 변수에 저장한다. forEach함수를 사용하여 문서를 하나씩 실행하고, 해당 문서안에 있는 field의 데이터를 data()함수를 사용해 tweetfield라는 변수에 집어넣고, id값은 field에 없어 따로 집어 넣는다. 그리고 tweetfield를 setGetDB()를 이용해 getDB안에 배열로 넣는다.

//HOME.js
import {addDoc, collection, onSnapshot, query} from "firebase/firestore";
useEffect(() => {
    const q = query(collection(dbService, 'tweets'))
    onSnapshot(q, (snapshot) => {
        const tweetArray = snapshot.docs.map(doc => {
            ...doc.data(),
            id: doc.id,
        }));
        setGetDB(tweetArray);
    })
}, [])

두번째 방법의 장점은 실시간으로 적용이 된다.

query함수를 사용하여 collection이 tweets인 컬렉션을 q라는 변수에 저장한다.

수정될 collection값인 q를 onSnapshot의 첫번째 매개변수로 넣고, 두번째 매개변수로 함수를 사용한다. 함수는 map을 활용하여 문서의 field값과 id값을 tweetArray라는 변수에 배열로 넣는다. 그리고 setGetDB함수를 사용하여 getDB의 배열값을 추가한다.

 

Database의 데이터를 Delete하기(CRUD)

//Tweet.js
import {dbService} from 'fbase';
import {doc, deleteDoc} from 'firebase/firestore';

const onDelete = async() => {
    const message = window.confirm('정말로 삭제하시겠습니까?');
    const TweetTextRef = doc(dbService, 'tweets' `${tweetObj.id}`);
    if (message) {
        await deleteDoc(TweetTextRef)
    }
}

button의 클릭이벤트 발생시 onDelete함수가 실행되게 코드를 작성했다. onDelete함수는 실행되면 웹브라우저에 확인창이 뜨고, 확인창을 누르면 deleteDoc함수가 실행되어 TweetTextRef의 데이터가 삭제된다. 그렇다면 TweetTextRef는 무엇일까? TweetTextRef는 doc함수로 해당 컬렉션의 클릭되어진 id값을 찾고, 얻은 document이다.

 

Database의 데이터를 Update하기(CRUD)

import { updateDoc } from "firebase/firestore";
const [edit, setEdit] = useState(false);
const [newtweet, setNewtweet] = useState(tweetObj.text);

const ToggleEditing = () => {
    setEdit((prev) => !prev);
};

const onChange = (event) => {
    const { value } = event.target;
    setNewtweet(value);
};

const onSubmit = async (event) => {
    event.preventDefault();
    const TweetTextRef = doc(dbService, "tweets", `${tweetObj.id}`);
    await updateDoc(TweetTextRef, {
    	text: newtweet,
    });
    setEdit(false);
};

토글로 사용할 edit을 useState로 정의하고, 수정한 내용을 담을 newtweet도 useState로 정의한다. 수정하는 버튼이 눌러졌을경우 toogleEditing함수가 실행이 되는데 edit의 값을 반대로 바꿔주는 역할을 한다.

onChange변수는 수정버튼이 눌러졌을경우 수정하는 내용을 담을 input값을 setNewtweet 변수에 넣는다.

onSubmit함수는 데이터베이스에 update할때 실행되는 함수이다. 제출시에 event.preventDefault()로 새로고침을 막고, TweetTextRef는 doc함수로 해당 컬렉션의 클릭되어진 id값을 찾고, 얻은 document를 갖는 변수를 정의한다. 그리고 updateDoc함수를 사용하여 해당 document의 content를 새로 수정받은 newtweet값으로 교체해준다. 마지막으로 수정버튼이 눌러지기 전의 상태로 되돌려주는 setEdit(false) 코드를 작성해준다.