01. 구현

✅ 결과.

1. 파이어베이스의 파이어스토어 데이터베이스를 통하여 다이어리에 글을 작성할 수 있다.
2. useEffect를 통하여 컴포넌트 마운트 시, 데이터를 펫칭하여 글 목록을 불러올 수 있다.
3. 펫칭된 데이터에 id를 추가하고 query를 통해 시간순으로 정렬할 수 있다.
4. 달력 블럭 칸에, 그 날짜의 가장 최근 감정을 표시할 수 있다.
5. dayjs의 플러그인을 통해 글 작성시간을 상대시간으로 표기할 수 있다.
6. 다이어리 데이터의 타입을 정의할 수 있다.

✅ 스크린샷.

↓ 달력 페이지 ↓

↓ 날짜 페이지 ↓

↓ 피드 페이지 ↓

02. 기억할 점

✅ 파이어베이스 셋팅

1. firebase.google.com 가입
2. 시작하기를 통해 새 프로젝트 생성.
3. 구글 애널리틱스 지금은 사용하지 않지만, 나중에는 사용해서 이용해보고싶다.
4. 빌드 탭의 Firestore Database에서 데이터 베이스 생성 (테스트 모드, 위치는 northeast3 서울)
5. 웹 앱 등록 후 CLI에서 yarn add firebase 하여 모듈 설치.
6. 안내받은 명령어를 _app.tsx 파일에 입력. (const firebaseapp ~ )
7. app과 db는 다른 파일에서도 사용할 수 있게 export.
8. firebaseConfig는 별도의 파일로 분리하여 .gitignore로 제외시키기.

✅ 파이어베이스 적용

addDoc - Diary 컬렉션에 데이터를 삽입 (무드, 내용, 날짜,생성일을 삽입하였다.)
에러가 없으면 글 작성 후 글을 볼 수 있게 상위 페이지로 이동하게 된다. // router.push()

const onSubmit = async () => {
        try {
            await addDoc(collection(db, "Diary"), {
                mood,
                contents,
                date: thisDay.format("YYYY-MM-DD"),
                createdAt: dayjs().format()
            });
            router.push(`/${router.query.year}/${router.query.date}`)
        } catch (e) {
        }
    }

getDoc - useEffect를 통해 컬렉션에 저장된 내용을 펫칭.

• query를 통해 콜렉션을 최신순으로 정렬하였다.
• 결과들이 담긴 doc은 DocumentData라는 타입을 가지고있다. (파이어베이스에 포함됨.)
• doc은 data()함수를 통해서 우리가 이용 가능한 데이터로 변환된다.
• 스프레드 연산자를 통해 data 내에 id를 추가하였다.

const petchDiary = async () => {
    const dataArray: Data[] = [];
    const result = await getDocs(
        query(collection(db, "Diary"), orderBy("createdAt", "desc")));
    result.docs.map((doc: DocumentData) => { 
        dataArray.push({ ...doc.data(), id: doc.id }) });
    setDiaryData(dataArray)
}

03. 느낀 점

✅ 궁금한 점.

• 다이어리 글 작성시, 각각의 글에 모든 고유 글 번호를 지정하려면 어떻게 해야할까? (지금의 글 마다 담긴 id값은 파이어베이스가 기본으로 제공하는 무작위 id를 부여받는다.)
• 콜렉션 내 모든 글 갯수를 파악하려면, 모든 데이터를 불러와서 세야할까? (백엔드가 있는 프로젝트라면 백엔드 개발자가 해당 API를 구현해줄 수 있는 것으로 알고있다.)

✅ 최소한의 골자가 잡히다.

현재까지 앱의 최소한의 골자는 만들었다는 느낌이 든다. 아직 스타일링과 기능구현을 진행해야할 부분도 많이 남아있고, 기획을 확정하지 않은 부분도 있어서, 내가 인지하지 못한 보안적 혹은 속도 관련 효율성을 포함한 개선점이 있으리라 짐작은 하고있다. 또한 로그인 관련 기능 고도화를 통해 어디까지 정교해져야할지도 궁금하다. 이제 점점 다른 어플리케이션을 벤치마킹에 속도를 붙여 내가 구현해보고 싶은 부분을 적용하여 개선점을 찾아야 할 때라고 느낀다.

✅ 블로그엔 기술을 적지 않고 오답노트를 적자.

블로그에 글을 남기고 있자니, 다른 기술 블로그들처럼 내가 적용하는 기술에 대해서 상세하게 안내해주는 글을 작성해야하나 고민해보았는데, 그렇게 되면 내가 내 블로그를 공식문서를 번역하고 복붙하는 것과 다를 바가 없어서 (게다가 공식 문서는 계속 바뀐다), 이 때 무엇에 대해 고민했고 어떤 기술을 기억하려고 했는지 정도로만 남기면 좋다고 생각했다. 더욱 나 스스로가 보고싶어하는 블로그로 만들어가자.

✅ 이전 오류 해결.

• textarea 관련 오류는 일시적인 오류였고, 지금은 해결된 상태. (오타였지 싶다.)

✅ 다음 적용사항.

기능구현

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

스타일

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

리팩토링

• 홈, 피드, 작성 페이지 상단 UI가 통일되었다. 이 컴포넌트를 분리하여 앞으로 남은 페이지에서도 계속 사용할 수 있다.
• 현재 컴포넌트는 라우팅(페이지)+기능+UI+타입으로 코드가 합쳐져 있으나, 차후 이를 분리할 예정.