3차 프로젝트- 버그수정 디벨롭 (navigate(-1) 등)

240207

오늘은 자바 들어갈 줄 알았는데 프로젝트 정리하는 시간을 주셨다.

그래서 콘솔이랑 다 지우려고 하는데, 이참에 어제 수정 못했던 에러를 수정하려고 했다.

일단 첨삭 페이지에서 첨삭 댓글을 올리는 함수를 실행하고 나서 navigate(-1)로 접근하기 때문에 수정사항이 반영되지 않는 오류부터 해결하려 했다.

그래서 navigate에 대해서 좀 구글링을 해봤는데, 어떠한 함수를 실행하고 실행 결과를 받아오거나 수정 사항을 반영할 때는 navigate를 이용하지 않는 걸 추천한다는 공식 문서가 되게 많았다.

 

그렇다고 한다.

 

그리고 로컬에서는 되었던 이유가 프록시 때문이었던 것 같다. 그때도 useNavigate는 똑같이 뒤로가기 역할을 수행하고 있었는데 혹시나 해서 다시 로컬에서 프록시를 적용하니까 문제가 해결되었다.

다만 배포 서버에서는 nginx가 프록시의 일을 대신해줘서 그런가 url을 프록시처럼 설정해도 똑같은 문제가 발생하였다.

 

일단 해결 방법은 3가지 정도를 생각했다.

1. 댓글을 올리고 나서 navigate(-1)이 아닌 이전 페이지로 새롭게 렌더링 해주기

2. 댓글을 올리고 나면 전 페이지로 가는데 그때 fetch 혹은 state 업데이트 해주기

3. 댓글을 올리고 나면 socket io를 이용해서 reload하라는 신호를 쏴주고 이를 통해서 fetch 해주기

 

1번은 만약 가능하다면 새로운 페이지를 렌더링 하는 것이기 때문에 브라우저에게 일을 더 시키는 것이 된다.

2번은 props로 받아줄 수 있다면 fetch를 하지 않고 state를 업데이트 해줄 수 있을 것이다. 하지만 아예 다른 컴포넌트라 좀 애매하고, 이거 하나만을 위해서 redux를 사용하기도 애매하다.

3번을 행하게 된다면 제일 쉽지만, 이것 하나만을 위해서 브라우저 페이지에 client측 socket을 넣어야 하고 컨트롤러도 마찬가지다.

 

그렇게 고심한 결과 어차피 fetch를 하나 재랜더링을 하나 비슷하지 않을까 싶어서 1번으로 해결하기로 했다.

 

만약 내가 이전 url을 받아올 수 있다면 쉽게 window.location.href 로 새롭게 랜더링할 수 있을거라 생각했다.

 하지만 이전 페이지의 url을 받아오는 기능은 react-dom의 이전 버전이었던 useHistory에는 있었지만, 최신 버전에서 사용할 수 있는 useNavigate에서는 지원하지 않는 기능이라는 비보를 들었다.

그렇게 된다면 내가 이전에 들어갔던 페이지에서 state를 받아오고 이를 통해서 직접 url의 조건을 만들어야 한다.

그래서 부모 요소에 postType이라는 새로운 프롭스를 만들어서 전달했다.

그리고 자식 요소에서는 postType에 따른 조건문을 걸어 문제를 해결할 수 있었다.

그리고 이 컴포넌트는 cul, lang만 사용하는 것이 아니고 채팅페이지에서도 사용하기 때문에 else의 navigate(-1)도 걸어주었다.

만약 props 값이 undefined라면 else문으로 걸릴 거니까.

이런 식으로

---

 

또 댓글 삭제가 cul page에서는 되는데 lang page에서는 안되는 오류도 해결하려고 노력했다.

그래서 로컬로 들어가서 실험해보니 이상하게 cul page에서는 제대로 삭제가 되는데 lang page에서 comment 삭제를 누르니까 node 오류가 뜨면서 아예 작동하지 않았다.

이상하다... 분명히 에러처리 핸들러는 다 설정해놨을건데 왜 안될까...?

라는 의심을 품고 가보니까 existingUserid를 다음 구문으로 받아오는데 existingUserid가 undefined가 나오는 오류였고, 여기에는 오류 핸들러가 없음을 확인했다.

뭐.. 소 뒷걸음 치다가 쥐 잡은 격이다. 에러 처리를 추가했다.

이렇게 수정

 

 

근데 에러 핸들러가 등장하면 안되는 게, postId는 현재 이미 db에서 가져온 comment의 index를 기준으로 다시 db에서 찾는 거기 때문에 어떤 버그를 쓰지 않는 한 찾지 못할 수가 없다. 

 

다만 머리 속을 스친 한 가지 생각이 있었다.

누군가에게는 db는 langComment와 postComment가 구분되어 있기 때문에, 거기에서 index가 혼동이 오지 않았을까?

예상은 적중했다. 아마 팀원 분이 그냥 복붙을 하시다가 이거 수정을 못하신 것 같다.

그렇게 무사히 댓글 삭제 오류도 고칠 수 있었다.

 

---

 

나를 팔로우 한 사람이 나와야 하는데 내 이름이 나오던 버그도 수정했다.

처음에는 당연히 프론트에서 잘못 가져온 거라고 생각해서 프론트를 뒤져봤는데 이렇다 할 문제는 없었다.

그렇다면 백엔드 쪽에서 문제가 생겼을 거라고 생각했다.

다만 이쪽 로직 짜신 분이 변수를 계속 재사용하고 있어서 알아보기가 좀 힘들었다. 

원래는 나를 팔로우 하고 있는 사람을 구하려면 테이블에서 userid가 내 아이디인 레코드 정보에서 followerId 컬럼의 정보를 가져와야 한다. 하지만 그렇지 않았다.

지금은 수정 되었지만 밑줄친 followerId가 userid로 되어있었다.

근데 그 전에 이걸 굳이 이렇게 안돌려도 include를 쓰면 좀 더 효율적인 코드가 되지 않을까 라는 생각이 든다.

(참고로 여기서 tempObj는 findAll을 돌려서 나온 객체의 배열이다.)

 

 

데이터베이스 구조

 

결과는 성공

 

 

흠... 오늘 원래 readme 파일도 만들려고 했는데 오류 수정하다가 시간이 다갔다...

뭐 이제 보이는 오류 모두 수정했으니까 된건가. 그래도 내 로직에서는 오류가 안떠서 다행이다.

 

 

---

03/06

강의 듣다가 내 프로젝트 리팩토링 할거 있던 것 같아서 다시 들어가봤다.

app.ts에서 함수들 그대로 나와있던 게 생각나서 이거 MVC좀 할까 하고 좀 뒤져보니

다른 백엔드 담당하신 팀원 분이 app.ts 파일에서 로컬 변수 만들어놓고 그걸 함수에서 이용하셨던 것 때문에 MVC 나중에 하자고 미뤄놨었던 게 생각났다. 

 

그때 당시에 이거 해결하려고 함수 호출할 때 빈 ArrayList를 만들고 참조값을 이용해서 결과값을 받아오는 방식을 통해서 return 없이도 해결했었는데 다른 분이 쓴 로직이라서 건들기가 좀 그랬다.

코드가 내가 사용하는 방식이랑 좀 다르기도 해서... 좀 애매했다.

어차피 이젠 별로 안만지시는거 같으니까 고치기로 했다.

깜빡하고 고치기 전 스크린샷을 안찍었다.

원래는 ```roomNumArr[roomNumArr.length -1]```가 들어가는 곳이 완전 위에서 정의된 지역변수(함수 바깥, js는 이래도 도되니까) roomNum이 들어갈 자리였다. 저렇게 createRoomDb 함수들을 통해서 roomNumArr에다가 룸 넘버를 add해주고 이걸 그대로 프론트 단에 Socket을 이용해서 쏴주는 식으로 지역변수를 없앨 수 있었다.

내 생각으로는 on요청이 들어갈 때마다 실행되는 함수라서 roomNumArr가 빈 배열로 초기화 될거라고 생각했지만 혹시 모르니까 그냥 마지막 Index로 했다. 이러면 length가 1이어도 알아서 0으로 되고 성능이 달라지지도 않으니까말이다.

 

 

이후에는 이 함수들 죄다 utils 패키지에다가 넣어버렸다.

이제야 속이 시원하다.

근데 이사람.... app.ts에다가 get method까지 넣어놨었네..? 

그때는 또 이게 지역변수랑 연관되어있다고 생각해서 안건들었던 것 같다.

근데 다시 살펴보니까 프론트단에서 안쓰는 method인 것같다. 나중에 확인해보고 이상 없으면 삭제하자.

 

app.ts의 import 단