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

오늘 완료한 목록
1. 트윗 삭제 기능
2. 트윗 수정 기능
3. 트윗 이미지 첨부 및 삭제 기능
(알고리즘 아주 조금..)

1. 트윗 삭제 기능

Nweet.js

    const NweetTextRef = doc(dbService,"nweets", `${nweetObj.id}`); 
    // 데이터베이스에서 트윗의 아이디를 찾기 위한 코드.

    const onDeleteClick = async () => { // 트윗 삭제 함수
        const ok = window.confirm("Are you sure you want to delete this tweet?");        
        if(ok){
           await deleteDoc(NweetTextRef); // 트윗 삭제기능
        };
    }
    .
    .
    .
     <button onClick={onDeleteClick}>Delete tweet</button>

내가 쓴 트윗을 삭제하거나 수정하기 위해서는 먼저 파이어베이스에 내가 쓴 트윗의 아이디를 찾아야했다.
문서 아이디는 nweetObj.id에 있기 때문에 doc(dbService,"nweets", ${nweetObj.id})를 이용하여 트윗의 아이디를 받아와 변수에 저장했다.
변수에 넣은 이유는 트윗아이디를 받아오는 코드가 너무 길고 복잡하기 때문에 보기 쉽게 하기 위해서 변수를 이용했다.

트윗을 삭제(문서를 삭제)하는 함수는 deleteDoc()함수를 이용했는데 이 함수는 파이어베이스에서 사용하는 함수다. 버튼에 Onclick 속성을 줘서 버튼을 클릭하면 onDeleteClick 함수가 발동할 수 있게 만들었다.
그리고 버튼을 눌렀을 때 정말 삭제하시겠습니까?와 같은 창을 띄어 확인을 누르면 삭제가 될 수 있게 코드를 짰다.

참고 : https://firebase.google.com/docs/firestore/manage-data/delete-data?hl=ko

2. 트윗 수정 기능

nweet.js

const [editing, setEditing] = useState(false);
    // 이 코드는 수정 버튼을 클릭했을 때 입력란과 버튼이 뜨게하는 기준점임.
        const [newNweet, setNewNweet] = useState(nweetObj.nweet)
    // 수정할 때 입력란에 기존의 트윗을 나타내기 위한 state
    // .
    // .
    
const toggleEditing = () => {setEditing((prev) => !prev)}
    
const onSubmit =  async (event) => {
        event.preventDefault();
        await updateDoc(NweetTextRef,{
        nweet: newNweet,
        });

        setEditing(false);
    }
 const onChange = (event) => {
        const {
            target : {value},
        } = event;
        setNewNweet(value);
   }
    .
    .
     {editing ? (
            <>
            <form onSubmit={onSubmit}>
                <input onChange={onChange} type="text" placeholder ="Edit you tweet!" value={newNweet} required />
                <input type ="submit" value="Update tweet"/>
            </form>
            <button onClick={toggleEditing}>Cancel</button>
            </>
        ) :
    .
    .
    <button onClick={toggleEditing}>Edit Nweet</button>      

트윗 수정기능은 삭제보다 더 복잡했다. 수정버튼을 누르면 글을 입력할 수 있게 submit을 입력했다.
수정 버튼을 누르면 submit과 수정버튼, 취소버튼이 나올 수 있게 하고 싶었다.
그렇기 때문에 기준점을 만들어야 했다. 그래서 useState를 이용하여 setEditing이라는 함수를 만들어
입력란과 버튼이 나오는 기준점을 만들었다.
그리고 수정하기 전에 기존의 트윗 글이 나타나게 하기 위해 setNewNweet도 만들었다.

그리고 onChange함수를 만들었는데 입력란에 택스트를 입력해야하는 경우 onchange프롭스, 함수 작업을 해야하기 때문에 만들었다. 만약 onChange가 없으면 입력란에 글을 입력할 수 없게 된다.

onChange 함수 안에 setNewNweet(value);가 써있는데, 이는 키보드 입력할 때 함수의 value인자로 입력값이 넘어가고 value값을 newNweet에 반영해서 입력란에 입력한 텍스트가 보이게 했다.

const toggleEditing = () => {setEditing((prev) => !prev)} 

이 코드는 이전 상태를 setEditing에 넘겨준 첫번째 인자로 받은 다음 !연산자를 이용하여 이전상태를 관리 하기 위해 사용했다.

{editing ? (
           <>
           <form onSubmit={onSubmit}>
               <input onChange={onChange} type="text" placeholder ="Edit you tweet!" value={newNweet} required />
               <input type ="submit" value="Update tweet"/>
           </form>
           <button onClick={toggleEditing}>Cancel</button>
           </>
       ) :

수정 버튼을 누르면 editing이 false에서 true로 바뀌면서 입력란과 버튼이 나올 수 있게 했다.

const onSubmit =  async (event) => {
       event.preventDefault();
       await updateDoc(NweetTextRef,{
       nweet: newNweet,
       });

       setEditing(false);
   }

난 onSubmit이 핵심이라고 생각한다, 먼저 event.preventDefault();는 submit을 했을 때 새로고침이 되지 않게 넣었고 updateDoc라는 함수를 이용하여 수정을 했다.

파이어베이스에 나와있는 사용법이다.
NweetTextRef는 아까 위에서 설명한 것 처럼 데이터베이스에서 트윗 아이디를 찾기 위한 변수다.
nweet : newNweet를 입력한 것은 입력란에 새로운 트윗을 입력하기 위해 상태관리를 위한 newNweet 업데이트를 시켜줘 수정을 할 수 있게 했다.
그리고 submit이 완료가 되면 입력란과 수정버튼이 사라지게 setEditing을 false로 만들어줬다.

3. 트윗 이미지 첨부 및 삭제 기능

트윗 이미지 첨부

home.js

const [attachment, setAttachment] = useState("");
const onFileChange = (event) =>{
       const {target : {files},
       } = event;
       const theFile = files[0];
       const reader = new FileReader(); 
       reader.onloadend = (finishedEvent) => { 
           const {
               currentTarget  : {result},
           } = finishedEvent;
           setAttachment(result);
       };
       reader.readAsDataURL(theFile); 
   }; 
   .
   .
   .
   <input type="file" accept="image/*" onChange={onFileChange}/>

이미지를 첨부하게 하기 위해 input 타입을 파일로 받아 이미지를 받아올 수 있게 코드를 먼저 짰다.
이미지를 나타내기 위해서는 이미지 파일의 정확한 target을 알아야했다. 그렇기 때문에
console.log로 files배열이 타겟이라는 것을 알았다.
files 배열을 theFile 변수에 저장해놨다.
하지만 파일을 웹브라우저에 출력하려면 브라우저 API를 사용해야한다는 것을 알았다.
그래서 FileReader 함수를 이용했다.
(사용법 https://developer.mozilla.org/ko/docs/Web/API/FileReader)
그 후 reader 변수에 넣어준 후 readAsDataURL()함수를 이용하여 파일 정보를 인자로 받아 파일 위치를 url로 반환해줬다.
이 함수는 단순하게 사용할 수는 없고 웹브라우저가 파일을 인식하고 인식이 끝나는 시점을 포함하고 있어 그 시점을 함께 관리해줘야 url을 얻을 수 있다.

(FileReader.readAsDataURL()
지정된 의 내용 읽기를 시작합니다. Blob완료되면 result속성 data:에 파일 데이터를 나타내는 URL이 포함 됩니다.)

그리고 onloadend함수를 이용하여 결과 값이 나온 이후 인식이 끝나는 시점 이후의 이벤트 값을 사용할 수 있게 해줬다. 이 함수를 이용하여 파일의 url이 있는 result라는 타겟을 찾았다.

const [attachment, setAttachment] = useState("");

사진의 Url을 관리하기 위한 상태가 있어야 했기 때문에 useState를 이용해 setAttachment 함수를 만들어 result(url)를 저장했다.

{attachment && (
          <div>
            <img src={attachment} width="50px" height="50px" />
          </div>
        )}

그래서 이미지 url이 있을 때만 이미지를 첨부할 수 있게 src에 attachment를 넣어줬다.

이미지 삭제 기능

import {useRef} from React;

const fileInput = useRef(); 
const onClearPhoto= () =>{
        setAttachment("");
        fileInput.current.value = "";
    }

 <input type="file" accept="image/*" onChange={onFileChange} ref={fileInput} />
 <button onClick={onClearPhoto}>Clear</button>

이미지 삭제를 하기 위해 삭제 함수를 만들어줬는데, 간단하게 설명하자면 이미지 url를 저장하는 setAttachment함수에 Null값을 넣어 url을 없게 했다.
하지만 삭제 이후에 이미지 파일명이 남아있어 지우기 위해 useRef()훅을 이용하여 fileInput변수를 만들고
clear을 눌렀을 때 fileInput안에 있는 current.value의 값을 가져와서 비워주게 했다.

(사용법 : https://ko.reactjs.org/docs/hooks-reference.html#useref)

전체 코드

home.js

import { dbService } from 'fbase';
import React,{useState, useEffect, useRef} from "react";
import {addDoc, collection,query, onSnapshot,orderBy} from "firebase/firestore";
import Nweet from "components/Nweet"

const Home = ({userObj}) => {
    const [nweet, setNweet] = useState("");
    const [nweets, setNweets] = useState([]); //  트윗들을  상태로 받아서 보관해야하기 때문에 배열로 usestate 생성
    const [attachment, setAttachment] = useState(""); // 사진파일 url을 관리하기 위한 state
    useEffect(() => {
        onSnapshot( // OnSnapshot 함수를 이용하여 모든 스냅샷을 반환함.
        query(collection(dbService, "nweets"), orderBy("createdAt", "desc")),
        (snapshot) => {
        const nweetArray = snapshot.docs.map((doc) => ({
        id: doc.id, // map 함수를 이용하여 스냅샷에서 원하는 데이터만 뽑아서 배열화 시킨 후 화면에 나타냄.
        ...doc.data(), // 전에 사용했던 Foreach함수는 매 순회마다 setNweets를 사용해야하지만, map함수는 순회하면서 만든 배열을 반환하므로
                        // 반환한 배열을 1번만 setNweet함수에 전달하면 되기 때문에 훨씬 효율적이다.
        }));
        setNweets(nweetArray);
        }
        );
        }, []);


    const onSubmit = async (e) => {
        try{
        e.preventDefault();
        const docRef = await addDoc(collection(dbService, "nweets"),
            {
            nweet,
            createdAt: Date.now(),
            creatorId : userObj.uid, // db에 유저아이디 추가
        }); // 데이터베이스 생성 
        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);
    };
    const onFileChange = (event) =>{
        const {target : {files},
        } = event;
        const theFile = files[0];
        const reader = new FileReader(); 
        reader.onloadend = (finishedEvent) => { 
            const {
                currentTarget  : {result},
            } = finishedEvent;ㅇ
            setAttachment(result);
        };
        reader.readAsDataURL(theFile); // 파일 정보를 인자로 받아 파일 위치를 url로 반환해줌.
    }; // 사진 파일 업로드 코드
    
    const fileInput = useRef(); //  이미지 파일명을 지우기 위해 useRef 훅 사용

    const onClearPhoto= () =>{
        setAttachment("");
        fileInput.current.value = "";
    } 
    



return (
 <>   
<div>
    <form onSubmit={onSubmit}>
        <input value={nweet} onChange={onChange} type = "text" placeholder ="what's on your mind" maxLength={120} />
        <input type="file" accept="image/*" onChange={onFileChange} ref={fileInput} />
        <input type="submit" value="nweet"/>
        
         {attachment && (
          <div>
            <img src={attachment} width="50px" height="50px" />
            <button onClick={onClearPhoto}>Clear</button>
          </div>
        )}

    </form>
    <div> 
        {nweets.map((nweet) => (
// map 함수를 이용하여 nweets 배열을 순회하면서 jsx를 반환하게 만들어서 트윗 배열들을 웹에 나타냄.
        <Nweet 
        key={nweet.id} 
        nweetObj={nweet}
        isOwner={nweet.creatorId === userObj.uid}
         // isOwner  nweet.creatorId === userObj.uid가 같아야 권한을 줄 수 있게 설정.
        />
            ))}
    </div>
</div>
</>
    );
};



export default Home;

nweet.js

import React ,{useState}from "react";
import { dbService } from 'fbase';
import {doc,deleteDoc,updateDoc} from "firebase/firestore";



const Nweet = ({nweetObj, isOwner}) =>{
    const [editing, setEditing] = useState(false);
    // 이 코드는 수정 버튼을 클릭했을 때 입력란과 버튼이 뜨게하는 기준점임.
    const [newNweet, setNewNweet] = useState(nweetObj.nweet)
    // 수정할 때 입력란에 기존의 트윗을 나타내기 위한 state
    const NweetTextRef = doc(dbService,"nweets", `${nweetObj.id}`); 
    // 데이터베이스에서 트윗의 아이디를 찾기 위한 코드.

    const onDeleteClick = async () => { // 트윗 삭제 함수
        const ok = window.confirm("Are you sure you want to delete this tweet?");        
        if(ok){
           await deleteDoc(NweetTextRef); // 트윗 삭제기능
        };
    }

    const toggleEditing = () => {setEditing((prev) => !prev)}
    
    const onSubmit =  async (event) => {
        event.preventDefault();
        await updateDoc(NweetTextRef,{
        nweet: newNweet,
        });

        setEditing(false);
        console.log(nweetObj.id, newNweet);
    }
    const onChange = (event) => {
        const {
            target : {value},
        } = event;
        setNewNweet(value);
    } // 입력란에 택스트를 입력해야하는 경우 onchange프롭스, 함수 작업을 해야한다.


    return (
    <div>
        {editing ? (
            <>
            <form onSubmit={onSubmit}>
                <input onChange={onChange} type="text" placeholder ="Edit you tweet!" value={newNweet} required />
                <input type ="submit" value="Update tweet"/>
            </form>
            <button onClick={toggleEditing}>Cancel</button>
            </>
        ) : (
            <>
            <h4>{nweetObj.nweet}</h4>
            {isOwner && (
                <>
                    <button onClick={onDeleteClick}>Delete tweet</button>
                    <button onClick={toggleEditing}>Edit Nweet</button>            
                </>
            )}
            </>
        )}
    </div>
    );
};

export default Nweet;

오늘 결론

공부할 수록 useState의 중요함을 느낀다.. 처음 사용할 때는 무슨 말인지 도저히 이해가 안 갔는데
사용해볼 수록 어느정도 감이 온다, 빨리 트위터 클론코딩을 끝내고 es6랑 리액트를 더 공부하고싶다..

수정기능에서 에러가 많아서 너무 많은 시간을 소모했다..🥲
집중력을 높이기 위해 내일은 카페에서 공부하려고 한다!