[nwitter] #1 개발일지

오늘 새로 배운 내용

• Firebase Doc읽는 법.
• 에러 노트 작성하는 법
• 개발 일지 작성하는 법

고민한 내용

• 닉네임 변경 시 게시글 닉네임이 변경되지 않는 이슈가 있었다. 접근 방식이 잘못되었어서 많이 헤맸다. 
  최초 접근 방식은 이러했다. 게시글을 렌더링 하기 전 props로 전달받은 uid 값을 Firebase에 호출해서 UserInfo를 가져온다. UserInfo에 UserNickName을 가져다가 그려주려고 했다. 하지만 Firebase에서 auth에 user 정보를 가져오는 메서드를 제공해 주고 있지 않았다. 
  => 다른 개발자 분의 풀이를 보고 깨달았다. 닉네임을 변경할 때, 유저가 작성한 모든 게시글의 닉네임 값을 경신해주는 방법이 있었다. 데이터 양이 많아지면 이것 또 다른 문제가 발생할 거 같다. 
• profile page 이동시 자신이 작성한 게시글만 노출 onSnapShot을 사용하여 구현했다. 최초 구현한 방식은 getDocs를 이용하여 쿼리를 보내서 유저의 정보를 가져오는 방식이였다. 그러나 profile page에서 데이터를 삭제할 때 오류가 있었다. Error는 Can't perform a React state update on an unmounted component 로 https://velog.io/@ohgoodkim/-%EC%97%90%EB%9F%AC%EB%85%B8%ED%8A%B8-Cant-perform-a-React-state-update-on-an-unmounted-component 이 분꺼를 참조했지만.. 다른 관점인 거 같고, 어떻게 해결해야 될지 정확하게 떠오르지 않았다. 개인적인 생각으로 하위 컴포넌트에서 데이터가 갱신이 되었는데. 이 갱신 정보가 상위 컨포넌트에도 영향을 주기 때문에다. 즉 하위 컴포넌트에서 데이터가 삭제되었으면, 상위 컨포넌트 값은 그대로이기 때문에 상위 컨포넌트에서 리 렌더링을 해줘야 한다.
  => 데이터의 변경을 감지하는 onSnapShot을 사용하여 구현하였다. 유저의 고유 정보만 가져와야 하므로 filter를 사용하여 본인 게시물만 가져와 map 하여 데이터를 추출하였다.  

참고할 만한 내용

• 에러 노트를 작성하는 것! 에러에 대해 정리해 놓은 부분이 도전이 되었다. 나도 저렇게 해서 웹 개발에 기여하고 싶다. https://velog.io/@ohgoodkim/-%EC%97%90%EB%9F%AC%EB%85%B8%ED%8A%B8-Cant-perform-a-React-state-update-on-an-unmounted-component

❗️📚 에러노트 - Can't perform a React state update on an unmounted component

• 닉네임 변경 시에 유저가 작성한 모든 게시글의 닉네임을 갱신하는 방법을 알려준 github이다. 
  https://github.com/sleepyhood/nwitter/blob/master/src/routes/Profile.js#L63

GitHub - sleepyhood/nwitter: clone coding(reference by Nomad Coder lectures)

• 개발일지 작성하는 법 https://blog.outsider.ne.kr/1067

개발 일지 작성하기 :: Outsider's Dev Story

회고

• 잘못 접근하여 많은 시간을 허비했다. 하지만 다른 개발자 분의 풀이를 통해 해결 방법을 도출해냈고, 결국 해결해 낼 수 있었다. 
• 세상에는 나와 같은 문제를 겪고 있는 사람이 많다는 걸 알았다. 인터넷에 나의 문제를 정확하게 이해하고 질문하는 실력이 필요하다는 것을 새삼 깨달았다.
• 30분 코딩 10분 휴식으로 작업을 진행 중인데 생각 이상으로 효율적이다.

Today Commit

• https://github.com/ckdtjs505/nwitter/commit/6c8eaccd9f7a2367bfb4cbda12273a249c8800bd