Post View CSS
post view css 1차 완성이다. 댓글 기능은 아직 구현되지 않은 상태라 확인용으로 임시로 작성해 놓은 상태이다.
<view 남은 기능>
1. 조회수 누적, 추천하기
2. 댓글 기능 (작성, 수정, 삭제)
3. userID에 따라 수정/삭제 버튼 show 여부 결정
그리고 수정할 사항이 생겼는데, 로그인한 유저 정보를 하나의 state에 담아 필요한 속성(user.userId, user.userName 등) 을 꺼내 써야 되는데 userID 따로, userName 따로, profileImgURL 따로 유저 정보를 하나 하나 개별 state로 관리하고 있었다. 관련 함수와 해당 함수를 사용하고 있는 컴포넌트를 전체적으로 손봐야겠다.
조회수 증가
firebase realtime database 문서의 데이터 저장 부분을 참고하여 해당 게시물을 클릭했을 때 기존 view 값에서 1씩 추가해주는 방식으로 조회수를 업데이트 해주는 함수를 작성하고 테스트했다.
postKey값으로 접근하여 해당 포스트의 기존 view 값을 받아오는 방식이었는데.. 조회수가 늘어나긴 늘어나는데 문제는 2985씩 늘어난다는 점이었다.
두 번 눌렀더니 조회수가 5972이 된 놀라운 모습!
대체 무엇이 문제인지 원인 파악이 필요했다. 그래서 일단 view값이 제대로 불러와지는지부터 확인했다.
일단 view값에는 문제가 없다. 그러면 ref.update부분에서 뭔가가 잘못 작동해서 view+1이 이상치로 찍히게 된다는 건데.. 흠.. value+1이 아닌 view에 3이나 4 등의 정수 값을 할당하면 또 제대로 업데이트가 된다. 하단 캡쳐에는 추가하지는 않았지만 ref.update 외부에서 console.log(value+1) 했을 때도 정상적으로 1씩 증가해서 콘솔에 찍히는 걸 확인할 수 있었다.
결과적으로 ref.update 내에서만 value+1 값이 이상하게 업데이트 된다. 이것저것 시도하다 보니 대충 짐작가는 원인을 찾았는데 계속해서 콜백 함수를 요청하고 있었다. 즉, ref.on에서 ref.update를 통해 view값이 1 증가한 걸 확인하고 상태가 변화했으니 또 콜백을 요청한다는 거다.
ref.on : 어? view 값이 변화했네? 데이터 바뀌었으니까 바뀐 값으로 다시 요청해서 받아올게! (무한반복...)
그래서 무한대로 증가하다 메모리가 초과되면 멈추게 되는 거였다...
끔찍한 모습.
해결 방법은 아주 간단하다. ref.on을 ref.once로 바꾸면 끝이다.
정상적으로 1씩 증가하는 모습
그냥 갖다 쓰는게 아니라 api와 함수가 어떤 식으로 작동하는지 잘 파악하는게 중요하다는 걸 다시 한 번 느꼈다.
추천하기
같은 사용자가 추천하기를 한 번 이상 클릭했을 때 이미 추천한 게시물이라는 경고창을 띄우면서 return해줘야 한다. 추천한 사람의 userID를 해당 게시물의 vote 속성으로 push해주고(중복해서 추천했는지 판단), vote 속성의 length(몇 명이 추천했는지 판단)를 받아와서 추천 수를 보여줬다.
추천했을 때
이미 추천한 게시물인 경우
삭제하기
원인을 파악할 수가 없어 제일 삽질을 많이한 부분이다. 어찌저찌 해결은 하긴 했는데 문제는 아래와 같았다. 일단 로직은 이랬다.
- 게시물 삭제 버튼 클릭
- db에서 해당 게시물이 삭제됨
- 사용자에게 게시물 삭제 alert를 보여주고 게시판 메인으로 이동
- 게시판 메인이 렌더링 됐을 때 useEffect로 업데이트 된 게시물 db 불러오기
- 업데이트된 게시물 리스트 노출
문제는 4번에서 발생했다. 게시물이 한 개 이상일 때는 쭉쭉 잘 삭제되다 한 개가 남았을 때 그 남은 한 개의 게시물이 db에서는 삭제된 상태인데 state에는 그대로 남아 화면에 노출되는 현상이 발생했다.
실제 db : 게시물이 모두 삭제돼서 null인 상태임
react state : 마지막 게시물이 삭제가 안 된 상태임
(비동기성 문제인 줄 알았는데 게시물이 2개 이상일 때는 문제가 없다. 게시물이 하나일 때만 이런 현상이 발생함.)
강제로 새로고침을 하면 state에서도 제거가 되긴 하는데 강제 새로고침 이벤트를 추가하면 페이지 이동 시 부자연스러운 느낌을 줬다.
이런 식으로 게시물이 하나 남았을 때 실제 db에는 해당 데이터가 없음에도 state에는 유령처럼 남아있어 화면에 계속해서 노출된다 흑흑... 최대한 uesEffect와 state 관리 선에서 해결해보려고 했지만 답이 없었다. 그래서 내가 이 문제를 해결하기 위해 선택한 방법은 다음과 같다.
데이터를 불러올 때 db가 null인 경우(게시물이 하나도 없을 때)를 체크하여 true이면 state를 초기화 한다.
db에서 삭제되는 건 문제가 없으니까 애초에 불러올 때부터 비었는지 안 비었는지를 확인하고 비어있으면 state를 초기화했다. 이렇게 하니 게시글이 정상적으로 다 삭제가 된다.
