MasonTALK 개인 프로젝트 2일차(2023.04.27.)

🕹 2일차 구현 사항

프론트엔드

1. 로그인/로그아웃 유틸리티 함수 생성
2. Chat Context 생성: 로그인 한 유저의 채팅 목록 불러오기, 아직 채팅을 개시하지 않은 유저 목록
3. 커스텀훅(useFetchReceiverUser) 생성: 일대일 채팅에서 상대방 정보 불러오기

백엔드

1. 채팅방 관리를 위한 MVC 작성: Chat 스키마, 라우트(경로), 컨트롤러 함수
2. 채팅 메시지 관리를 위한 MVC 작성: Message 스키마, 라우트(경로), 컨트롤러 함수

🚀 트러블슈팅

1. 유저 채팅 목록 불러오기

• WHAT? 복잡해진 Chat 페이지 코드
• HOW? 코드 가독성을 높이기 위한 커스텀훅 생성

유저의 채팅 목록을 불러오는 로직을 구상하면서 코드 가독성이 떨어지는 문제를 발견했습니다.

서버로 GET 요청을 보내는 코드, 에러 처리 코드가 덧붙여져 컴포넌트 내부가 복잡해졌기 때문입니다.

어떻게 리팩토링할지 고민하다가 커스텀훅을 생성해서 문제를 해결해보기로 했습니다.

결과적으로 정보를 display한다는 컴포넌트 본연의 역할에 충실한 코드를 생각해냈다는 생각에 기분이 좋습니다!

아래는 그 디테일한 과정을 정리했습니다.

 

1. ChatContext가 렌더링 되면 우선적으로 userChats 상태 변수에 현재 로그인한 유저의 채팅 목록 배열을 할당합니다. 이때 채팅 목록의 요소는 하나의 채팅방을 의미합니다. 이후 Chat 페이지에서 userChats 상태변수를 불러옵니다.
2. Chat 페이지에서 userChats 상태변수내 각 요소에 대해 UserChat 컴포넌트로 매핑합니다. 이때 UserChat 컴포넌트에 현재 로그인한 유저의 정보와 채팅방 정보를 전달합니다. 채팅방 정보에는 채팅방 id, 채팅에 참여한 members, timestamps 정보들이 담깁니다.
3. UserChat 컴포넌트에서 채팅에 참여한 본인을 제외한 나머지 유저의 정보를 불러오기 위해 useFetchReceiverUser 커스텀훅을 생성했습니다. 코드를 분리한 결과, UserChat 컴포넌트 내 코드량이 감소해 가독성이 높아지는 효과가 있었습니다.