21.10.23 공부기록🧑‍💻

FireBase, React를 활용한 트위터 클론코딩🧑‍💻

---

오늘 완료한 목록
1. 트윗 생성 및 트윗 목록출력
2. 전공 수업 팀플 과제..ing

---

const [nweet, setNweet] = useState("");
    const [nweets, setNweets] = useState([]); //  트윗들을  상태로 받아서 보관해야하기 때문에 배열로 usestate 생성
    const getNweets = async ()=> {
        const q = query(collection(dbService,"nweets"));
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
        const nweetObj = { //nweetObj => 트윗 내용 
            ...doc.data(), 
            id:doc.id,
        } 
         setNweets(prev => [nweetObj,...prev]);   
        });

트윗 데이터들을 화면에 나타내기 위해서는 상태로 관리해야한다.
그렇기 때문에 useState()을 이용하여 트윗 데이터들을 배열로 받아 저장했다.

파이어베이스에 저장된 트윗 데이터를 받아오기 위해서 querySnapshot을 이용했는데, 여기 안에 있는 index중 doc가 트윗 데이터이기 때문에 doc로 받아왔다.

const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
        const nweetObj = { //nweetObj => 트윗 내용 
            ...doc.data(), 
            id:doc.id,
        } 

여기서 doc(트윗갯수)가 만약 5개면 forEach함수는 5번이 순회가 된다.
이때 우리가 위에서 트윗데이터를 상태로 보관하기 위해 만든 nweets에 데이터를 쌓기 위해서 순회 이전의 nweets와 순회중인 데이터를[nweetObj,...prev]처럼 합쳤다.

setNweets(prev => [nweetObj,...prev]);   
        });

그렇기 때문에 순회 이전의 nweets는 setNweet에 인자로 전달된 함수의 첫번째 인자로 넘어오게 되서 nweetobj(트윗 데이터)에는 최신 트윗이 0번째 배열로 위치하고 이전에 온 트윗은 1번째 배열에 위치하게 된다.

 const nweetObj = { //nweetObj => 트윗 내용 
            ...doc.data(), 
            id:doc.id,
        } 

또한 nweetObj이라는 변수를 만들어 querySnapshot에서 불러온 데이터를 보관했는데 ...이 doc.data()앞에 붙은 이유는 ES6 전개구문을 이용했다.

---

전개구문이란?

전개구문이 아직 익숙하지 않아 예제를 찾아보았는데

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));
// expected output: 6

쉽게 정의하자면 배열이나 객체를 펼쳐주는 것이다.

만약 펼칠 대상이 객체인 경우

const myObject1 = {
    laptop: 'MacBook Pro',
    tablet: 'iPad Pro 11'
}

const myObject2 = {...myObject1};

console.log(myObject1); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}
console.log(myObject2); // {laptop: "MacBook Pro", tablet: "iPad Pro 11"}

console.log(myObject1 === myObject2); // false

{...myObject1}를 보면 전개구문을 사용한 것을 알 수 있다.

펼칠 대상이 배열인 경우

const myArray1 = ['Canna', 'Cuzz', 'Faker', 'Teddy', 'Effort'];

const myArray2 = [...myArray1];

console.log(myArray1); // ["Canna", "Cuzz", "Faker", "Teddy", "Effort"]
console.log(myArray2); // ["Canna", "Cuzz", "Faker", "Teddy", "Effort"]

console.log(myArray1 === myArray2); // false

배열을 펼쳐 새로운 배열을 만들 수 있다는 것을 알 수 있다.

출처 : https://bigtop.tistory.com/62 (BigTop_Log님)

---

다시 본론으로 돌아와서

<div> 
        {nweets.map((nweet) => (
// map 함수를 이용하여 nweets 배열을 순회하면서 jsx를 반환하게 만들어서 트윗 배열들을 웹에 나타냄.
        <div key={nweet.id}>
            <h4>{nweet.nweet}</h4>
        </div>
            ))}
    </div>

위 코드를 이용하여 트윗목록들을 화면에 출력시켜줬다.

결과 화면

---

참고

파이어베이스 querySnapshot 사용법(https://firebase.google.com/docs/reference/node/firebase.firestore.QuerySnapshot)

---

전체 코드

import { dbService } from 'fbase';
import React,{useState, useEffect} from "react";
import {addDoc, collection,getDocs,query} from "firebase/firestore";

const Home = () => {
    const [nweet, setNweet] = useState("");
    const [nweets, setNweets] = useState([]); //  트윗들을  상태로 받아서 보관해야하기 때문에 배열로 usestate 생성
    const getNweets = async ()=> {
        const q = query(collection(dbService,"nweets"));
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
        const nweetObj = { //nweetObj => 트윗 내용 
            ...doc.data(), // ES6 spread attribute 기능(전개구문)
            id:doc.id,
        } // 중요!!) querySnapShot에 있는 doc(트윗 갯수)가 5개면 forEach함수는 5번 순회가 됨.
        // 이때 nweets에 트윗 데이터를 쌓고 싶으면 순회 이전의 nweets와 순회중인 데이터를 [nweetObj,...prev]처럼 합침.
         setNweets(prev => [nweetObj,...prev]);   
         // 그렇기 때문에 순회 이전의 nweets는 setNweet에 인자로 전달된 함수의 첫번째 인자로 넘어오게됨.
         // 즉 nweetobj에는 최신 트윗이 0번째 배열로 위치하고 이전에 온 트윗은 1번째 배열에 위치하게 됨.
        });
    };
    useEffect(() => {
        getNweets();
    
    }, [])
    const onSubmit = async (e) => {
        try{
        e.preventDefault();
        const docRef = await addDoc(collection(dbService, "nweets"),
            {
            nweet,
            createdAt: Date.now(),
        }); // 데이터베이스 생성 
        console.log("Document Written with Id:", docRef.id);
        }catch(error){
            console.log("Error adding document", error)
        }

        setNweet("");
    };
    const onChange = (event) =>{
        const {target : {value},
        }= event;
        setNweet(value);
    };
    console.log(nweets);

return (
 <>   
<div>
    <form onSubmit={onSubmit}>
        <input value={nweet} onChange={onChange} type = "text" placeholder ="what's on your mind" maxLength={120} />
        <input type="submit" value="nweet"/>
    </form>
    <div> 
        {nweets.map((nweet) => (
// map 함수를 이용하여 nweets 배열을 순회하면서 jsx를 반환하게 만들어서 트윗 배열들을 웹에 나타냄.
        <div key={nweet.id}>
            <h4>{nweet.nweet}</h4>
        </div>
            ))}
    </div>
</div>
</>
    );
};



export default Home;

---

이번 주는 학교 전공수업 팀 프로젝트 덕분에 개인 웹 공부를 많이 못했다.. 내일은 주말이니까 개인 중간 보고서 과제를 얼른 끝내고 리액트 공부를 해야겠다..

처음으로 텐서플로우를 건들여보니 정말 어렵고 어지러운 학문이라는 것을 알게 됐다.. 나는 머신러닝쪽이랑은 완전히 안 맞는다는 것을 이번 학기동안 내내 느끼고 있다..😵

리액트를 공부하면서 ES6 문법을 조금 더 익히고 공부했으면 더 좋았을 것 같다는 생각이 들었다.. 공부할게 산더미인데 큰일이다 ㅎㅎ,,