중간 발표

코딩만하느라 바빴던 주차였다.

생각보다 오류들도 많이 있었고... 그것들을 해결하느라 mvp로 잡았던 기능들도 미처 다 못했고... 

개인적으로는  만족스럽지 못한 결과물이었기에 더욱 아쉬움이 남은 중간 발표였던 것 같다.

 

---

이번 주의 작업

 

• 회원가입 페이지 뷰 작업
• 메인 페이지 CRUD 기능 구현
• 다이어리 북마크 기능 구현
• 설정 페이지들 뷰 작업

 

---

트러블 슈팅

- 모달이 다이어리 하나일 땐 되고 두 개 이상 땐 안 됨 -

다이어리 전체 조회에서 다이어리의 수정/삭제를 위한 모달을 열면 버튼의 클릭이 다이어리가 하나일 땐 되지만, 두 개 이상이면 버튼 클릭 시 기능이 작동되지 않는 버그 발생

 

해결 과정 및 해결

(1) 다이어리의 수정/삭제를 위해 props로 넘어오는 다이어리 id를 콘솔로 찍어보면 같은 id가 현재 다이어리 개수만큼 콘솔이 찍힘.

팀원의 라이브러리 이슈 문제로 strict mode를 삭제한 상황임에도 id가 두번 연속으로 찍혀서 이에 관련된 문제인 건가 싶어 redux의 initialState에 배열로 쌓아 배열의 0번째 요소를 뽑아 사용해보려 시도.

(2) id값 하나의 요소만 들어있는 배열을 리턴 받음. 그것으로도 여전히 적용이 되지 않음.

(3) 리액트 쿼리에 setqueryData를 이용해 저장 -> 마찬가지로 실패.

(4) 로컬 스토리지에 저장 후 뽑아서 정수로 전환 후 사용 -> 실패

(5) id와 관련해 버튼의 기능이 제대로 작동하지 않는 것이 아니라, 버튼을 누르면 모달이 곧바로 닫히는 문제라는 것을 깨달음. props로 넘겨받는 .다이어리의 개수만큼 콘솔이 찍히는 것으로 보아 props로 넘겨받을 때마다 화면이 리렌더링 일어난다는 사실이 기억남.

(6) 렌더링이 일어나면서 useState로 관리하던 모달의 boolen값도 초기화 되는 건가하는 생각에 props로 넘겨주던 다이어리의 데이터를 redux를 통해 전역 관리로 뽑아옴. -> 실패

(7) 생각해보니 모달창이 클릭 이벤트로 열리고 닫힌다는 점에서부터 useState가 초기화되는 문제가 아니었음. 이로써 모달창 로직 자체에 문제가 있겠다라고 접근 방식을 바꿈

(8) 팀원이 createPortal을 사용해 만들어 놓은 모달 컴포넌트를 뜯어봤으나 원인을 찾지 못 함

(9) redux로 관리되는 전역 모달을 하나 만들어 적용하니 수정/삭제 기능이 정상적으로 작동됨. 원인은 결국 찾지 못 함..

 

- useQuery의 onError에서 status 코드에 따른 모달창이 컨트롤 되지 않는 문제 -

alert창으로 처리하면 바로 뜨는데 dispatch로 날린 전역 모달은 리패치가 되어야만 나타나는 현상 발생

 

해결 과정 및 해결

(1) 태그에 isError를 이용해 삼항연산자와 논리곱으로 dispatch를 날려봄 -> 실패

(2) dispatch 대신 태그를 붙이면 정상적으로 태그가 렌더링 됨.
(3) onError에서 처리되는 alert창과 isError로 붙는 태그는 정상 작동되는 걸로 보아 리패치를 시켜 모달창이 뜨도록 하는 방향으로 선회

(4) onError에 dispatch 후 리패칭을 추가 -> 적상 작동되나 useQuery 요청이 계속감 -> 결국 무한 리패칭 지옥에 빠짐

(5) 리패치가 아니라 화면이 렌더링되어도 적용되지 않을까라는 생각에 onError에 dispatch를 날리고 컴포넌트 return 값으로 isError를 이용해 태그를 렌더링해주니 그제야 모달창이 뜨면서 해결