클론 코딩

이번 주차엔 velog를 클론 코딩하는 프로젝트를 진행했었다.

프로젝트 이름은... consolog다.

 

처음 코딩을 시작하고 남들 다 부트스트랩 쓰며 토이프로젝트를 만들 때 굳이 css만 쓰며 머리 깨졌었던 경험이 굉장히 큰 도움이 되었다.

개인적으론 똑같이 뷰따는 건 어렵지 않았는데, 디테일한 애니메이션을 넣는 작업들엔 어려움이 있었다.

 

갑자기 추워진 날씨 탓에 팀원들의 컨디션이 안 좋아져 비록 생각했었던 기능과 페이지를 구현하지 못한 부분들은 조금 아쉬웠지만, 만들고보니 제법 그럴싸해 만족스럽다.

 

---

이번 주차에 내가 구현한 기능들

• 메인, 상세페이지 만들기
• 분기별 헤더 변경 (로그인/비로그인, 메인/상세)
• 메인 페이지 트렌딩, 최신 GET / 상세페이지 R D / 댓글 CRUD
• axios 인스턴스화

 

---

트러블 슈팅

- 렌더링 이슈 -

상세 게시글을 들어가면 상세 정보를 GET 해오는 과정에서 useSelector로 가져온 상세 정보가 undefined로 찍히며 화면이 하얗게 되며 오류가 찍히는 문제가 발생

 

해결 과정 및 해결

(1) useEffect로 컴포넌트가 마운트될 때 dispatch를 날리는 방식을 취했었는데, useEffect로 useParams를 dispatch에 실어 보내는 사이에 렌더링이 먼저 일어나며 발생한 문제로 판단.

(2) useEffect의 의존성 배열에 useSelector로 가져온 detail을 넣어 undefined에서 값이 변경되면 리렌더링이 일어날 수 있도록 의도함 -> useEffect에 넣은 dispatch도 같이 재실행 되며 무한 렌더링 발생

(3) 상세 페이지가 마운트될 때 dispatch를 보내는 것이 아닌, 앞서 게시글을 누를 때 dispatch를 보내도록 로직을 짬 -> 변함없이 undefined로 찍히며 실패

(지금 생각해보니 이렇게하고 상세 페이지의 의존성 배열에 useSelector로 가져온 detail을 넣은 뒤 옵셔널 체이닝을 줘도 해결될 것 같다. 서버가 내려가서 실험 불가)

(4) 객체 분해 구조를 풀고 useSelector로 가져온 값에 옵셔널 체이닝 적용 -> 화면이 하얗게 나가는 것은 막았지만 여전히 값은 undefined로 들어옴(화면이 나가는 것만 막음)

(5) 결국 서버와 통신하는 시간아 문제인 것 같아 axios thunk함수에서 fulfillWithValue 리턴값으로 response가 아닌 payload를 리턴해 extraReducer에서 필터를 돌려 봤지만 실패 -> payload를 리턴하든 response를 리턴하든 서버와 통신이 실패했냐 안 했냐를 기다려야 한다는 점에서 같은 결과였음

(6) 옵셔널 체이닝을 주고 isLoding도 useSelector로 가져와 useEffect의 의존성 배열에 추가해주니 서버와 통신이 끝나고 로딩이 끝나는 순간 리렌더링이 일어나며 해결

 

- 작성자id와 userId 비교 이슈 -

새로고침을 하지 않으면 문제가 없지만, 상세 페이지에서 새로고침을 누르면 내가 쓴 글과 댓글의 수정/삭제 버튼이 사라지는 문제 발생

 

해결 과정 및 해결

(1) useSelector로 가져온 userId와 작성자의 id를 비교하는 방식의 코드였는데, 새로고침을 하면 initialState에 저장된 userId가 초기화되며 undefined가 되고 그 undefined와 비교하며 생긴 문제로 판단.

(2) 해당 페이지가 렌더링 될 때 initialState에 userId가 저장되도록 하는 방법을 찾기 시작.

userId는 로그인할 때 헤더 컴포넌트에서 response로 얻어오는 길밖에 없었기에 그때 그냥 로컬 스토리지나 쿠키에 저장하면 되지 않을까 하는 생각에 userId를 로컬 스토리지에 저장

(3) 그러나 로컬 스토리지에서 가져온 userId와 작성자id가 분명 같음에도 수정/삭제 버튼이 생기지 않는 문제가 발생

(4) 분명 같은 숫자임에도 useSelector로 가져온 userId만 같다고 인식하는 알 수 없는 상황에서 로컬 스토리지의 id, useSelector로 가져온 아이디, 작성자의 id를 대조해서 찍어보다가 콘솔창에 찍힌 색이 미묘하게 다르다는 것을 발견

(5) 알고보니 로컬스토리지에 담긴 userId는 Number가 아닌 String이었다!

(6) 로컬 스토리지에 저장된 userId를 숫자로 변환해 비교해주니 제대로 출력 됨.

(7) 저장할 때 아예 숫자로 저장되게 하려는 시도를 해보았지만 그건 안 된다는 것을 확인 함.