🕹 2일차 구현 사항
- 프론트엔드
- 로그인/로그아웃 유틸리티 함수 생성
- Chat Context 생성
- (로그인 한 유저의) 채팅 목록 불러오기
- (로그인 한 유저와 채팅을 시작하지 않은) 유저 목록 불러오기
- 커스텀 훅(useFetchReceiverUser) 생성
- 채팅에 참여한 두 유저 중 본인을 제외한 나머지 1명의 유저 정보 불러오기
- 백엔드
- 채팅방 관리를 위한 MVC 작성
- Chat 스키마, 라우트(경로), 컨트롤러
- 채팅 메시지 관리를 위한 MVC 작성
- Message 스키마, 라우트(경로), 컨트롤러
- 채팅방 관리를 위한 MVC 작성
🚀 트러블슈팅
유저 채팅 목록 불러오기
- 👉🏻 WHAT? 복잡해진 Chat 페이지 내부 코드
- 👉🏻 HOW? 코드 가독성을 높이기 위한 커스텀훅 생성
유저의 채팅 목록을 불러오는 로직을 짜면서 코드의 가독성이 떨어지는 문제가 발생했습니다.
서버로 GET 요청을 보내는 코드, 에러 처리 코드가 덧붙여져 컴포넌트 내부가 복잡해졌기 때문입니다.
어떻게 리팩토링 할지 고민하다가 커스텀 훅을 생성해서 문제를 해결해보기로 생각했습니다.
정보를 display 하는 컴포넌트 본연의 역할에 충실한 코드를 만들어 냈다는 생각에 기분이 좋습니다!! 😊
아래는 그 디테일한 과정입니다.
- Chat Context가 렌더링 되면 우선적으로 userChats 상태 변수에 현재 로그인한 유저의 채팅 목록(배열)을 할당합니다. 이때 채팅 목록의 요소는 하나의 채팅방을 의미합니다. (Chat 스키마 참고). 이후 Chat 페이지에서 userChats 상태 변수를 불러옵니다.
- Chat 페이지에서 userChats 상태 변수 내 각각의 요소에 대해 UserChat 컴포넌트로 매핑합니다. 이때 UserChat 컴포넌트에 현재 로그인한 유저의 정보(user)와 채팅방 정보(chat)를 전달합니다. 채팅방 정보에는 채팅방 id, 채팅에 참여한 members, timestamps 정보들이 담깁니다.
- 🔥 UserChat 컴포넌트에서 채팅에 참여한 본인을 제외한 나머지 유저의 정보를 불러오기 위해 useFetchReceiverUser 커스텀 훅을 생성했습니다. 코드 분리를 실행한 결과, UserChat 컴포넌트의 코드량이 감소해 가독성이 높아지는 효과를 보았습니다.
기록해서 남길래요