항해99 클론 프로젝트 13조

FE: 조형민, 신희제 BE: 조우필, 김지승, 김현준, 김근보

작업 공간

https://cut-need-d6c.notion.site/006b7583cbd24e4aa0388b9619389d60

⌚프로젝트 기간

23.05.12 ~ 23.05.18

프로젝트 소개

Tinder 클론 프로젝트

FE Project Architecture 🛠

사용한 기술 스택

주요 기능 및 서비스 이미지

회원가입 + 로그인

매칭 페이지

채팅 페이지(채팅목록 + 채팅방)

Trouble Shooting

FRONTEND

• 채팅방에 진입했을 때 포커스가 맨 밑부터 시작하지 않고 맨 위에서부터 시작하는 문제
  원인	채팅방에서 위로 스크롤 했을 때 scrollTop의 높이가 0이 되면 이전의 채팅 기록을 한 페이지 불러오도록 설계하였음. 그러나 진입하자마자 맨 위로 포커스가 맞춰져 있어서 이전 채팅 목록을 여러 번 불러오는 현상이 있었음
  시도	useEffect 문 안에 ScrollTo를 이용하여 진입 시 맨 바닥으로 옮기려는 시도를 했으나, 여전히 이전 채팅 목록을 불러와서 실패.
  해결	flex-direction: column-reverse 라는 속성을 통해서 진입 했을 때 포커스를 맨 밑부터 시작할 수 있었습니다.

• 소켓으로 최신 데이터는 가져왔으나 렌더링이 되지 않는 문제가 있었습니다.
  원인	객체의 depth를 고려하지 않고 spread 문법을 사용해서 얕은 복사를 하였기 때문에 참조형 데이터의 변수 영역이 바뀌지 않아 렌더링이 되지 않았던 것이었습니다.
  시도	새로운 변수를 만들어서 response.data.chatMessages를 spread 연산자를 이용해 얕은 복사를 하여 넣었으나 여전히 완전한 복사가 아니었기 때문에 렌더링이 발생하지 않았습니다.
  해결	state 배열에 push 메서드를 통해서 새로 받아온 채팅을 넣고 그 후에 얕은 복사를 하여서 변수영역을 갈아끼워 새로운 채팅에 대한 렌더링을 발생시킬 수 있었습니다.