hard mode 개발 3

오늘 한 내용

• 컴포넌트 삭제
• firebase real time database 쓰기, 읽기

오늘 배운 내용

• 컴포넌트 삭제

• const deleteHardBox = (hardBox) => {
      setHardBoxes((hardBoxes) => {
        const updated = { ...hardBoxes };
        delete updated[hardBox.id];
        return updated;
      });
    };
  

캡쳐

소감

눈물 좔좔. 너무나 고난의 시간이었다. 이거 해결한다고 다른 것도 다 미루고 뛰어들었다. 밤 12시 넘어서 컴퓨터 끄는 것도 다반사. 하지만 해 결할 때 그 짜릿함은 말로 못한다. 조금 더 발전한 내가 된 것 같아 자랑스럽다. 어제보다 한 걸음만 더 나가자!

오류 일지

• firebase 쓰기

• 이렇게 뒤에 default-rtdb라는 것이 붙어버려서 안 읽히는 것이였다. database URL을 추가해줌으로서 해결할 수 있었다.
• realtime database에 쓰기가 불가능했다. 오류가 딱히 나는 것도 아니여서 문제점을 알 수가 없었다. 무려 다섯시간동안 검색한 결과 이름이 문제라는 것을 깨달았다.

 

• 컴포넌트 언마운트 시 불필요한 네트워크 사용 최소화
  • 파이어베이스 읽기 기능을 하면서 useEffect를 사용해 컴포넌트 언마운트 시 불필요한 네트워크 사용 최소화 했다. 이 과정에서 color 값이 undefined로 뜨는 것이었다. 처음에는 color가 다른 컴포넌트보다 안쪽에 들어있기 때문에 값이 읽혀지기 전에 useEffect가 실행되는 것이라고 생각했다. 그래서 try ~ catch문도 써보고 then도 써보고 시도를 수없이 했다. 그런데 알고보니 다른 문제 때문이었다. console.log를 다 찍어보았는데 hardbox 자체 값이 전달되지 않는 것이었다. 그럼 왜 전달되지 않을까 또 고민을 했더니 firebase 경로가 한꺼풀 더 있어서 그랬던 것이다. 전체적인 경로는 hardBoxes - 박스 고유 id - item 이런 식이라면 잘못된 경로는 hardBoxes - 박스 고유 id -hardbox - item 이렇게 되어있던 것이다. 그래서 읽기 기능만 켜면 얘가 값을 못 읽어오고 undefined가 나왔던 것이다.

• 쓰기 할 때 경로자체가 잘못으로 받아들여지구나를 깨닫고 쓰기 함수를 살펴보았다. 여기서 아무리봐도 경로에는 hardbox가 없는데 도대체 어디서 날아온 것이지? 그냥 눈에 보이는 hardBox를 지웠다가 다시 적었다. 아무리 생각해도 저거랑 상관없는데? 하고 저장을 눌렀는데.. 고쳐졌다... 뭐지...?? 내가 실수를 했나 싶어서 되돌리기를 하고 원래 있던 코드랑 비교를 해봤는데 똑같았다. 장난하나...?? 어이가 없어서 눈물이 날 거 같았다. 도대체 왜 그런 것인지 코드 멱살을 털고 싶었다.

 

• startDate, endDate firebase 쓰기
  • 나의 startDate는 UTC 형태로 받아졌다. 3주 기간을 계산하는 함수때문이었는데 그 함수가 UTC 형태일때만 계산을 가능하게 했기 때문이다. new Date()로 하면 UTC 형태를 출력할 수 있다. 그런데 typeof를 해보면 놀랍게도 object 형태이다. Date()를 하면 UTC형태로 받을 수 있으나 그것은 type이 string이기때문에 날짜 계산을 할 수 없었다. firebase의 timestamp도 사용해보고 moment도 사용해보고 별별 방법을 다 쓰고 좌절하며 뜨개질을 하다가 문득 퐉!하고 떠올랐다. hardbox의 startDate에서는 string 형태로 전송하고 함수 부분에서 형태를 변형시키면 되는 것이 아닌가? 하고 말이다. 찾아보니 moment를 이용해 두 날짜 사이의 날짜들을 반환하는 함수를 찾을 수 있었다. 그래서 startDate를 Date()로 전송하고 함수에서 그것을 moment를 이용해 형태를 변환시켜 계산하는것이다. 여기까지 생각한 나 자신에게 감동했다. ㅠ 근데 이제 endDate가 문제였다. 원래 형태에서는 new Date를 이용해 21일 지난 시점을 계산하고 값을 보냈는데 Date()로 날짜 계산을 어떻게 하는 건지 모르겠는거... 아무리 구글링을 해봐도 new Date()로 계산한 사람들밖에 보이지 않았다. 그러다 문득 생각이 났다. 굳이 endDate값을 db에 보내야하나? 그래! 함수 밖에서 그냥 endDate를 선언하고 바로 보내주면 안되는건가!! 두근거리는 마음으로 moment 계산을 이용해 21일 지난 시점을 endDate로 선언하고 바로 함수를 실행해보았다. 성. 공. 적. 소리를 질렀다.
  • 남들이보면 정말 별거 아닌걸로 오래 시간을 끌었군 생각할 수 있으나 이 과정에서 정말 많은 지식을 얻었다. 역시 혼자 공부하면서 직접 부딪쳐보는게 실력이 빨리 늘어난다.