2021.09.19 개발 일지 (채팅방 목록 조회, 최신순 정렬, 로딩 화면 추가, Material UI)

채팅방 목록 띄우기

사용자가 속한 채팅방 목록을 조회하고, 최신순으로 정렬하는 것을 구현했다.

Firebase의 onValue를 두 번 사용해야해서 이번에도 함수형 컴포넌트를 클래스형 컴포넌트로 변경하는 과정이 필요했다.

 

첫번째 onValue는 사용자가 속한 채팅방 번호를 모두 불러와서 상태에 저장하고, 두번째 onValue를 호출한다.

두번째 onValue는 각 채팅방의 가장 마지막 메세지를 구해서 최신순으로 정렬하고 상태에 저장하는 것이다.

라이프 사이클 함수인 componentDidMount 안에서 첫번째 onValue를 호출하도록 했다.

 

채팅방 번호와 각 채팅방의 마지막 메세지를 모두 state로 관리하므로

새로운 채팅방이 생겼거나, 기존 채팅방에서 새로운 메세지가 온다면 re-rendering 하는 것이다.

 

전체 코드는 여기 👇

GitHub - askges20/messenger-web-react: React 개인 프로젝트 웹 메신저 만들기

 

크롬과 엣지에서 서로 다른 계정으로 접속해서 테스트를 해봤는데

아직 계정 2개까지만 테스트를 해봐서 그 이상은 오류가 발생할 수도 있다.

나중에 테스트해보고 오류가 있으면 수정할 예정!

 

---

 

채팅방 최신순 정렬

리액트로 구현한 채팅 시스템 코드를 참고하려고 구글링하다가 채팅방 최신순 정렬 코드를 발견했다.

그리고 약간 수정해서 적용했더니 다행히 잘 작동된다.

 

lastMessageFromFB.sort((a, b) => { return sortChatRoom(a, b)})

 

sortChatRoom 함수

export const sortChatRoom = (a, b) => {
  if (a && b) {
    const aDateTime = a.dateTime;
    const bDateTime = b.dateTime;

    if (aDateTime.slice(0, 8) === bDateTime.slice(0, 8)) {  //날짜
      if (aDateTime.slice(8, 10) === bDateTime.slice(8, 10)) {  //시
        if (aDateTime.slice(11, 13) === bDateTime.slice(11, 13)) {  //분
          return bDateTime.slice(14, 16) - aDateTime.slice(14, 16); //초
        }
        return bDateTime.slice(11, 13) - aDateTime.slice(11, 13);
      }
      return bDateTime.slice(8, 10) - aDateTime.slice(8, 10);
    }
    return bDateTime.slice(0, 8) - aDateTime.slice(0, 8);
  }
}

 

나는 전송 날짜, 시간을 하나의 문자열로 이어붙여서 계속 slice를 해주었는데

형식을 보자면 중첩 if문을 작성해서 연도부터 월, 일, 시, 분, 초 순서대로 비교해주면 된다.

 

자바스크립트에서 sort를 이용할 때 그 기준을 지정하는 방법을 알게 되었다.

 

---

 

디자인 개선

기능 개발만 계속 하다가 오랜만에 웹사이트 디자인을 개선해보았다.

일단 전체적인 색감은 핑크 -> 블루로 맞췄고, 리액트 Material UI의 TextField와 LinearProgress를 사용해보았다.

 

TextField 공식 문서 : https://mui.com/components/text-fields/

Text Field React component - MUI

LinearProgress 공식 문서 : https://mui.com/components/progress/

Circular, Linear progress React components - MUI

 

 

현재 폼 양식이 쓰이는 곳은 회원가입, 로그인 화면이 있어서 TextField를 적용해서 디자인을 개선했다.

같은 TextField 컴포넌트이지만 variant 속성을 다르게 해서 다른 디자인의 input을 만들 수 있었다.

 

폼은 Formik 라이브러리를 사용해서 에러 메세지를 출력했는데, 이것을 커스텀하기 위해 ErrorMessage 컴포넌트를 이용해서 글씨를 파란색으로 바꿨다.

공식 문서 : https://formik.org/docs/api/errormessage

| Formik

 

 

 

친구 검색 화면은 배경색과 버튼색만 바꿨다.

 

 

 

그리고 오늘 구현한 채팅 목록 화면~!

테스트 결과 실시간으로 채팅이 전송할/전송받을 때마다 최신순으로 정렬되는 것을 확인했다.

아직 안읽은 메세지 개수 구하는건 구현하지 않아서 일단 레이아웃만 잡고 숫자 2가 뜨도록 했다ㅋㅋ

 

 

 

채팅방 목록을 클릭해서 해당 채팅방으로 이동할 수 있다.

아직 참여자 이름 대신 아이디가 뜨도록 되어있는데 나중에 고치려고 한다.

 

---

로딩 화면 만들기

Material UI의 LinearProgress은 로딩 화면을 만들 때 사용했다.

App.js에서 리액트의 라우팅 처리로 사용자 정보가 없을 땐 (로그인하지 않았을 때) 웰컴 화면이, 사용자 정보를 불러왔을 땐 (로그인했을 때) 메인 화면이 뜨도록 코드를 작성했었다.

 

그런데 로그인한 사용자 정보를 redux로 저장해놓고 불러오다보니 로그인한 상태여도 웰컴 화면이 잠깐 떴다가 메인 화면이 뜨는 경우가 자주 발생했다.

따라서 redux에 저장된 사용자 정보를 조회하기 전에는 로딩 화면이, 그 이후엔 웰컴 or 메인 화면이 뜨도록 수정했다.

 

---

 

채팅방 목록 구현에 성공해서 일단 큰 고비(?)는 넘겼고

이제 프로필 수정 기능을 구현할지, 안읽은 메세지 개수 구하는 것을 구현할지 고민해봐야겠다.