[React] Timer 만들기 오류 해결, 앞으로의 계획, 느낀 점

2021. 7. 28. 21:24·Project/Timer Project
반응형

오류

DB에 있는 id값과 현재 로그인 중인 user의 id값을 비교하던 중, map을 사용하니 조건에 맞지 않는 값들은 undefined
로 출력이 되었다.

undefined 상태로 DB에 넣으려 했더니 'FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined' 오류가 나왔다.

undefined를 없애기 위해 이런저런 시도를 하다가 filter를 통해 다시 돌려주었고 undefined를 지울 수 있었다.

아래 코드는 해결이 된 코드이다.
    useEffect(() => {
        dbService.collection("currentTime").onSnapshot(snapshot => {
            const contentMap = snapshot.docs.map(doc => {
                if (doc.data().creatorId === userObj.uid) {
                return { id: doc.id, ...doc.data() }
                // }
            })
            const contentTimeArray = contentMap.filter(doc => {
                if (doc !== undefined) {
                    const returnValue = {
                        time: doc.saveTime,
                        text: doc.text,
                    }
                    return returnValue
                }
            })
            setContent(contentMap)
        })
    }, [])

계획

프로젝트를 이번 주 내로 끝낼 예정이다.

내가 기록한 시간과 내용을 DB에 저장해서 Contents에서 볼 수 있도록 해주었는데, 다른 계정에서 확인이 안 되는 것을 먼저 수정해야 한다.

호스팅도 해볼 계획이다.

느낀 점

확실히 이론 공부보다는 도움이 된다고 생각한다.

내 자신이 생각 없이 코딩을 하고 있다는 것을 느낄 수 있었다.
-> 다음 프로젝트는 구체적인 목표와 계획을 갖고 해야겠다.

알고 있는 내용으로만 활용하는 것이 아니라 새로운 것을 찾아보고 활용하는 능력도 길러야 할 것 같다.

 

반응형
저작자표시 비영리 변경금지 (새창열림)
'Project/Timer Project' 카테고리의 다른 글
  • [React] Timer 만들기 - Project 마무리 및 회고
  • [React] Timer 만들기 - flat() 사용하여 DB내용 불러오기
  • [React] Timer 만들기 / 저장한 데이터 수정(Update), 삭제 기능(Delete)
  • [React] Firebase 활용하여 로그인(Authentication), SetTimer 분할
꾸매코더
꾸매코더
웹 / 앱 개발자
  • 꾸매코더
    꾸매코딩
    꾸매코더
  • 전체
    오늘
    어제
    • 분류 전체보기 (96)
      • JavaScript (18)
        • Deep Dive (0)
      • React (5)
      • React-Native (9)
      • CSS (3)
      • TypeScript (1)
      • CS (10)
      • GitHub (4)
      • Clone Coding (15)
        • Kakaotalk [HTML + CSS] (10)
        • Momentum [JavaScript] (5)
      • Project (30)
        • Timer Project (14)
        • Netflix [React + Hooks] (12)
        • ToDoList [React-Native] (4)
      • 회고 (1)
  • 링크

    • Github
  • hELLO· Designed By정상우.v4.10.3
꾸매코더
[React] Timer 만들기 오류 해결, 앞으로의 계획, 느낀 점
상단으로

티스토리툴바