[개발 기록] Fake Talk (4)

레포지토리 링크

github.com/degurii/fake-talk

 

요즘 몸이 별로 안 좋아 코딩을 많이 하진 못했다. 건강도 잘 챙겨야겠다.

 

1) User 객체를 직접 사용하는 대부분의 코드에 대해 User ID를 이용하도록 변경했다.

간단히 끝날 줄 알고 무작정 수정을 시작했는데, 중간중간 너무 헷갈려 컴포넌트 구조를 몇 번씩 확인하고 User가 어디서 사용되는지 메모장에 써가며 해결했다. 다음부터 이런 류의 수정은 더 체계적으로 시작해야 할 듯하다.

 

2) 시간 표시 기능을 조금 손봤다. 실제 카카오톡에선 채팅 중 시간이 바뀌면 타임스탬프가 한번 더 표시된다. 지금 내 코드에선 같은 유저가 연달아 채팅하는 경우 가장 마지막 톡에서만 타임스탬프를 표시하고 있다.

 

ChatItem 컴포넌트에 first, last를 인자로 주는데, first면 아바타와 이름을, last면 타임스탬프를 출력하도록 한다.

여기서 last를 판별하는 함수가 원래는 다음과 같았다.

const isLast = idx => {
  if (idx === chatItems.length - 1) return true;
  const curItem = chatItems[idx];
  const nextItem = chatItems[idx + 1];

  if (curItem.userId !== nextItem.userId) return true;
  return false;
};

끝 채팅이거나 다음 채팅과 유저가 다르면 true를 반환한다.

시간 표시 문제를 해결하기 위해 isLast()에서 다음 채팅과 타임스탬프가 다르면 true를 반환하도록 수정했다.

const isLast = idx => {
  if (idx === chatItems.length - 1) return true;
  const curItem = chatItems[idx];
  const nextItem = chatItems[idx + 1];

  if (curItem.userId !== nextItem.userId) return true;
  if (curItem.time !== nextItem.time) return true;
  return false;
};

잘 동작하는 걸 확인할 수 있었다!

 

3) 채팅 입력 시 자동으로 스크롤이 내려가도록 변경했다. 어떻게 할까 방법을 찾아보다가 채팅 목록 맨 밑에 dummy 태그를 두고 ref를 걸어 DOM API인 scrollIntoView()를 통해 스크롤하도록 했다.

처음엔 단순히 chatItems가 변경되면 스크롤을 내리도록 했는데, 이러면 채팅을 수정하거나 삭제하는 경우에도 화면 맨 밑으로 가기 때문에 불편함이 생겼다. 그래서 chatItems의 길이를 따로 저장하고, 그 길이가 늘어나는 순간에만 스크롤되도록 구현했다.

새로 추가된 부분만 보면 다음과 같다. 이런 식으로 구현하는 게 맞는진 모르겠다. Github에서 비슷한 기능을 하는 코드를 좀 찾아봐야 할 것 같다.

const Chat = ({ ... }) => {
  //...
    
  const chatEndRef = useRef();
  const chatLengthRef = useRef();
    
  useEffect(() => {
  chatLengthRef.current = 0;
  }, []);
  useEffect(() => {
    if (chatLengthRef.current < chatItems.length)
      chatEndRef.current.scrollIntoView();
    chatLengthRef.current = chatItems.length;
  }, [chatItems.length]);
  
  //...
  
  return (
  <StyledChat>
    <StyledChatList>
      {chatTIems.map((item, idx) => (<ChatItem ... />))}
      <div ref={chatEndRef} />
    </StyledChatList>
    
  ...      
};

 

 

4) 메시지, 유저 이름이 길어지는 경우 박스를 뚫고 나오는 현상을 해결했다. 해결하려고 검색해본 시간에 비해 해결법은 정말 간단했다.

word-wrap: break-word;

css에서 이 옵션을 추가해주면 된다고 한다. 근데 전혀 해결이 안 됐다... 더 찾아보니 

white-space: nowrap;

요게 있으면 적용이 안된다고 한다. 저런 건 없는데 뭐지?? 하고 찾아봤더니 할아버지 태그에 저 문법이 들어가 있었다. 아마 예전에 해결법을 찾다가 실험적으로 넣었나 보다..

근데 저걸 지워도 해결이 안 됐다. 

또또또 찾아보다 정말 정리가 잘된 글을 찾아 도움받았다.

word-break 속성과 word-wrap 속성 알아보기 - 김유리

word-break: break-word;

요걸 적용해서 해결할 수 있었다. css는 너무 어렵다.

 

5) 증가시킬 시간값과 두 수를 받아 그 사이의 랜덤한 톡 수마다 자연스럽게 시간이 증가하는 기능을 구현했다.

얘도 state가 여기저기 흩어져 있어서 너무 귀찮았다. 1차 목표가 마무리되면 꼭 redux를 적용해 리팩토링 하기로 마음먹었다..

잘 동작하는 걸 볼 수 있다. css는 나중에 손보고 일단 기능 구현한 데에 의의를 두자.

 

 

1차 목표가 얼마 남지 않았다. 기능 세 가지 정도와 1차적으로 입힌 css를 완벽히 마무리하면 끝날 듯하다. 빠르게 끝내야겠다.