01. 구현

✅ 결과.

• 수정 : 파이어베이스의 updateDoc() 함수를 통해 수정을 구현하였다.
• 삭제 : 게시글에 삭제시간을 기록(업데이트)하여 삭제를 구현하였다.
• 리스트 : 게시글의 삭제시간이 존재하는 게시글을 query로 조건을 달아 숨겼다.

✅ 스크린샷.

• 글 하나에 들어오는 데이터.
  

• 수정 페이지 진입 시, ID를 조회하여 기존 데이터를 미리 불러온다.
  

02. 파이어베이스 CRUD

✅ updateDoc()을 이용한 수정 및 삭제.

• 수정

const onUpdate = async () => {
    if (!id) { return }
    if (!contents) { Modal.error({ content: "내용이 없습니다." }); return; }

    const docRef = doc(db, 'Diary', id);
    try {
        await updateDoc(docRef, {
            imageUrl,
            mood,
            contents,
            date: thisDay.format("YYYY-MM-DD"),
            updatedAt: dayjs().format(),
            deletedAt: null
        });
        router.push(`/${router.query.year}/${router.query.date}`)
    } catch (e) {
        console.log(e)
    }
}

• 삭제

const onDelete = async () => {
    if (!id) { return }

    const docRef = doc(db, 'Diary', id);
    try {
        await updateDoc(docRef, {
            deletedAt: dayjs().format()
        });
        router.push(`/${router.query.year}/${router.query.date}`)
    } catch (e) {
        console.log(e)
    }
}

✅ 파이어베이스 query 복합색인을 이용하여 게시글 불러오기.

where를 통해 조회 조건을 달았는데, 만약 날짜가 존재하는 페이지라면 그 날짜만 해당하는 데이터를 query로 불러오고, 날짜가 존재하지 않는 feed 페이지에서는 모두 불러온다.

또한 데이터는 limit 인자를 통해 10개만 불러오며, deletedAt이 null인 게시물만 불러온다.

    const petchDiary = async () => {

        const dataArray: Data[] = []

        if (props.thisDay) {
            try {
                const result = await getDocs(query(collection(db, "Diary"), where("deletedAt", "==", null), where("date", "==", props.thisDay.format("YYYY-MM-DD")), orderBy("createdAt", "desc"), limit(10)));
                result.docs.map((doc: DocumentData) => { dataArray.push({ ...doc.data(), id: doc.id }) });
                setDiaryData(dataArray)
            } catch (error) {
                console.log(error)
            }
        }
        else {
            try {
                const result = await getDocs(query(collection(db, "Diary"), where("deletedAt", "==", null), orderBy("createdAt", "desc"), limit(10)));
                result.docs.map((doc: DocumentData) => { dataArray.push({ ...doc.data(), id: doc.id }) });
                setDiaryData(dataArray)
            } catch (error) {
                console.log(error)
            }
        }
    }

03. 느낀점

✅ CRUD를 구현하였다.

다이어리의 1차적인 기능은 모두 구현하였고, 이제 포트폴리오를 위하여 디자인과 사이드기능을 다듬을 일만 남았다. 실제 서비스에서 트래픽을 얼마나 감당할 수 있는지 궁금하지만, 지금 단계에서는 이 정도로 구현하는 것이 학습 목표였기 때문에 만족하고 있다. 이후 Auth 관련 고도화에 관한 학습을 이어하고 이 앱에 적용하고 싶다.

✅ 다음 적용사항.

• 기능구현

피드 페이지에서 검색 기능 추가.(디바운싱 이용)
피드 페이지 무한 스크롤 추가.
통계, 설정 페이지 구현.
날짜 페이지에 공휴일 정보를 표기.(api 이용)
앱 소개(안내) 페이지 추가.
달력 페이지에서 2개 이상 작성된 날짜에 마우스 오버 시, 글 갯수 보여주는 팝업 표시.

• 스타일

날짜 페이지에서 오늘 날짜, 전날, 다음날로 이동하는 버튼 추가.
전체적인 스타일링 개선 (현재는 너무 antd 바닐라 => 영감을 받은 쿠르츠게작트 감성을 살리고 싶다).
스타일링 컨셉 기획 후 다크모드 구현.
로딩시, 로딩 컴포넌트 삽입.
모바일 환경에서 레이아웃 @media 반응형 구현.