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

---

오늘 완료한 목록
1. uuid 에러 해결
2. 파이어베이스 스토리지에 사진 저장 및 불러오기
3. 트윗 삭제시 스토리지에서 삭제하기

---

1. uuid 에러 해결

먼저 uuid 라이브러리를 사용한 이유는,
스토리지는 파이어스토어와 다르게 문서에 아이디를 자동으로 만들어주지 않는다.
고유 식별자를 만들어 스토리지에 저장할 데이터에 짝을 지어줘야 하는데, 우리가 만들 고유식별자를
만들어주는 것을 uuid 라이브러리를 이용하려고 했다.

uuid는 버전에 따라 사용하는 방법이 다른데,

---

Create a UUID (ES6 module syntax)

import { v4 as uuidv4 } from 'uuid';
uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

(uuid 공식 문서 https://github.com/uuidjs/uuid)

---

공식 문서에 따르면 저런 식으로 사용해야한다고 되어있었다.
그래서 똑같이 import를 해줬지만, 에러가 발생하였고 처음에는 uuid 설치가 잘못됐다고 판단하여
이것 저것 건들다가 완전 노드모듈 전체가 엉켜버렸다..ㅎㅎ

결론적으로 내가 발견한 방법은 완전히 달랐다..

import {v4} from 'uuid';

v4();

아직까지 이게 왜 이렇게 작동된지는 정확히 모르겠지만, 공식 문서를 둘러봐도 답이 안 나와서
혼자 이것저것 건들이다 보니까 작동이 됐다...

뭐.. 일단 됐으니까 다음에 여유가 있을 때 uuid에 대해 더 자세하게 공부해봐야겠다.

---

2. 파이어베이스 스토리지에 사진 저장 및 불러오기

스토리지란?

스토리지는 쉽게 설명하면 컴퓨터 하드디스크랑 비슷하다.
하드디스크에 폴더를 만들고 파일을 저장하고 사용하는 메커니즘이다.
마찬가지로 스토리지에 사용자아이디(폴더)를 만들고 uuid(파일 이름)을 정해 저장하는 것이다.

먼저 스토리지를 사용하기 위해서는 파이어베이스 파일에서 스토리지를 import 해야했다.

fbase.js

import {getStorage} from "firebase/storage";

export const storageService = getStorage();

스토리지를 import 해주고 다른 파일에서 사용할 수 있게 export 처리해줬다.

Home.js

기존 코드

 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("");
    };

수정 후 코드

// 생략
import { storageService } from 'fbase';
const onSubmit = async (e) => {
        
        e.preventDefault();
        let attachmentUrl =""
        if(attachment !== ""){
            const attachmentRef = ref(storageService, `${userObj.uid}/${v4()}`);
            const response = await uploadString(attachmentRef, attachment, "data_url");
            console.log(getDownloadURL(response.ref));
            attachmentUrl = await getDownloadURL(response.ref);
        }
        const nweetObj = {
            nweet,
            createdAt: Date.now(),
            creatorId : userObj.uid, // db에 유저아이디 추가
            attachmentUrl
        }
        await addDoc(collection(dbService, "nweets"),(nweetObj)); 
        setNweet("");
        setAttachment("");

    };

스토리지에서 사진을 저장하고 불러오기 위해서는 기존의 코드에서 수정이 필요했다.

const attachmentRef = ref(storageService, `${userObj.uid}/${v4()}`);

위에 있는 코드는 스토리지, 레퍼런스를 호출하고 나서 사용자의 아이디를 폴더이름으로 설정한 후 파일 이름을 v4(uuid)로 처리했다.

이제 파일 폴더를 만들어줬으니 저장기능을 구현해야한다.

const response = await uploadString(attachmentRef, attachment, "data_url");

저장기능을 하기 위해서는 uploadString 함수를 이용했다.

이전 버전에서는 putString 함수를 사용했지만 버전이 업그레이드 되면서 사용하는 함수가 바뀌었다.
(사용문서 https://modularfirebase.web.app/common-use-cases/storage/#upload-a-string)

여기서 attachmentRef는 아까 만든 파일폴더이다. 사진파일의 URL은 attachment에 저장되어있기 때문에, 파일폴더와 파일URL을 넣어줘 파일에 사진을 저장했다.

다음은 사진을 불러오기다

사진을 불러오기 위해서 response.ref.getDownloadURL()함수를 사용해야한다.
그렇기 때문에 아까 사진 저장 코드를 response 변수에 넣어주고

attachmentUrl = await getDownloadURL(response.ref);

이렇게 사용했다. 그리고 attachmentUrl에 저장해줬다.

(사용법)

  const nweetObj = {
           nweet,
           createdAt: Date.now(),
           creatorId : userObj.uid, // db에 유저아이디 추가
           attachmentUrl
       }

그리고 데이터베이스에 저장하기위해 attachmentUrl을 추가해줬다.

이제 불러온 사진파일을 화면에 나타내주기 위해 img엘리먼트 속성에 nweetObj.attachmentUrl를 추가해줬다.

nweet.js

	 <>
          <h4>{nweetObj.nweet}</h4>
          {nweetObj.attachmentUrl &&(
               <img src  ={nweetObj.attachmentUrl} alt='~' width="50px" height="50px" />
          )}
          {isOwner && (
              <>
                  <button onClick={onDeleteClick}>Delete tweet</button>
                  <button onClick={toggleEditing}>Edit Nweet</button>            
              </>
          )}
          </>

이제 전체적인 코드를 다듬어줘야한다.

먼저

if(attachment !== ""){
            const attachmentRef = ref(storageService, `${userObj.uid}/${v4()}`);
            const response = await uploadString(attachmentRef, attachment, "data_url");
            console.log(getDownloadURL(response.ref));
            const attachmentUrl = await getDownloadURL(response.ref);
        }
        const nweetObj = {
            nweet,
            createdAt: Date.now(),
            creatorId : userObj.uid, // db에 유저아이디 추가
            attachmentUrl
        }

다음과 같은 상황에서 attachmentUrl을 if문 안에서 정의하게 되면 if문안에서만 참조되는 변수가 된다.
그렇기 때문에 let을 이용하여 if문 밖에서 따로 정의해줬다.

수정 후

 e.preventDefault();
        let attachmentUrl =""
        if(attachment !== ""){
            const attachmentRef = ref(storageService, `${userObj.uid}/${v4()}`);
            const response = await uploadString(attachmentRef, attachment, "data_url");
            console.log(getDownloadURL(response.ref));
            attachmentUrl = await getDownloadURL(response.ref);
        }

if문 전에 정의를 해줘 전체적으로 사용할 수 있게 코드를 바꿔줬다.

구현 짤

---

3. 트윗 삭제시 스토리지에서 삭제하기

현재 트윗 글은 파이어스토어에 있기 때문에 삭제해도 스토리지에 저장된 파일은 그대로 있다.
그렇기 때문에 우리는 파이어스토어에서 사용하는 deleteObject 함수를 이용했다.

nweet.js

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

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

먼저 이미지의 url을 찾아야했다. 그렇기 때문에 우리가 아까 이미지 url을 저장해놨던 attachmentUrl을 이용했다.
파이어베이스의 ref() 함수를 이용하여 이미지파일의 경로를 읽어 NweetImageRef에 저장해줬고,
deleteObject 함수에 넣어줬다.

구현 짤

---

오늘 결론

생각보다 오늘 한 기능들이 오래 걸렸다.. 이번 달 안에 만드는게 목표였지만 학교 과제랑 수업 등 이것저것으로 많이 밀린 것 같다!
빨리 부지런히 해서 끝내야겠다.