[트위터 클론코딩 챌랜지] firestorage활용 게시글 저장_13

이제 트윗을 저장할 Firestore를 활성화 할겁니다.

firebase홈으로 가서 Cloud Firestore를 클릭합니다.
데이터베이스 만들기를 눌러서 위치를 가까운 곳으로 선택해줍니다.
저같은 경우는 seoul이 되겠네요. 다음단계에서 Test Mode를 선택해줍니다.(30일 후 정지됩니다.)
그러면 데이터베이스가 만들어집니다.
이후 좌측 네브바에서 빌드 -> Storage로 가줍니다.
똑같이 Test Mode로 선택하고 진행해주면 됩니다.

만들어지는 동안, vscode로 돌아와 firebase.tsx로 가줍니다. 이제 데이터베이스와 스토리지에 대한 액세스 권한을 얻을겁니다.

export const storage = getStorage(app);

export const db = getFirestore(app);

auth 밑에 위 코드를 작성하여 권한을 얻습니다.

Posr-tweet-form.tsx로 갑니다. 코드로 데이터를 추가해볼겁니다.

export default function PostTweetFrom() {
---------중략--------
    const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const user = auth.currentUser;
        if (!user || isLoading || tweet === "" || tweet.length > 200) return;
        try {
            setLoading(true);
            await addDoc(collection(db, "tweets"), {
                tweet,
                createdAT: Date.now(),
                username: user.displayName || "Anonymous", userId: user.uid,
            });
        } catch (e) {
            console.log(e);
        } finally {
            setLoading(false);
        }
    };
    return (
        <Form onSubmit={onSubmit}>
            <TextArea required rows={5} maxLength={200} onChange={onChange} placeholder="What is happening" />
                <AttachFileButton htmlFor="file">{file ? "Photo added✅":"Add photo"}</AttachFileButton>
                <AttachFileInput onChange={onFileChange} type="file" id="file" accept="image/*" />
                <SubmitBtn type="submit" value="Post Tweet" />
        </Form>
    )
}

onSubmit을 작성할겁니다. 현재 접속한 user를 저장하고 조건문을 사용합니다.
user가 비어있거나 로딩중이거나 게시글이 공란이거나 200자 이상을 넘으면 걸러지게 해줍니다.
try-catch문을 이용해서 Loading을 true로 초기화 해주고 addDoc을 이용해서 firestorage에 데이터를 넣어줄겁니다.
위와 같이 작성하고 저장 후 브라우저로 가서 게시글 하나를 작성해보면

데이터가 올바르게 저장되었습니다. 또한 글을 수정, 삭제 하려면 사용자ID를 저장해둬야 하기에 userId: user.uid 를 반드시 작성해줘야 합니다. 
게시글이 있을때 트윗을 해야하기 때문에 TextArea에 required도 필수입니다.

이제 이미지를 첨부한 게시글을 트윗하는 코드를 추가할겁니다.
우선, 파일이 있는지 확인해야하기 때문에 조건문을 걸어주고 저장될 위치를 정해줍니다.
트윗과 이미지는 연결되어야하기 때문에 id저장이 필수입니다.

const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const user = auth.currentUser;
        if (!user || isLoading || tweet === "" || tweet.length > 200) return;
        try {
            setLoading(true);
            const doc = await addDoc(collection(db, "tweets"), {
                tweet,
                createdAT: Date.now(),
                username: user.displayName || "Anonymous", userId: user.uid,
            });
            if (file) {
                const locationRef = ref(storage, `tweets/${user.uid}-${user.displayName}/${doc.id}`);
                await uploadBytes(locationRef, file);
            }
        } catch (e) {
            console.log(e);
        } finally {
            setLoading(false);
        }

브라우저로 돌아가 이미지를 업로드 해보면,

storage에 tweets란 폴더가 만들어졌고 id값으로 저장된걸 볼 수 있습니다. 
이제 이미지를 URL로 받아 documents에 저장하기위해 만들어진 폴더는 삭제해줍니다.

if (file) {
                const locationRef = ref(storage, `tweets/${user.uid}-${user.displayName}/${doc.id}`);
                const result = await uploadBytes(locationRef, file);
                const url = await getDownloadURL(result.ref);
                await updateDoc(doc, {
                    photo: url,
                })
            }

result로 값을 저장하고 url에 result에 담긴 url값을 넣어줍니다.
이후 저장될 데이터에 Photo라는 키값으로 url데이터를 넣어줍니다.
브라우저에서 사진을 업로드하고 데이터베이스를 확인해보면,

Photo값으로 url이 저장된걸 볼 수 있습니다.
트윗 후 초기상태로 만들어주기위해 try구문 아래에

      setTweet("");
      setFile(null);

초기화 구문을 넣어줍니다.