📨 유저 선택형 웹 메신저

📝 과제 설명

• Redux로 채팅 메세지 상태 (추가, 수정, 삭제) 를 관리하고
  실시간으로 firebase로 만든 데이터베이스에 전송하여 업데이트 시켰다.

• 첫 페이지에 유저를 선택한 뒤에 채팅장으로 넘어가는 형식으로 제작했다.

⚙️ 기술 스택

• React, Redux
• Typescript, JavaScript, Styled-Component
• Git & GitHub, Build Tool (Create React App)

💻 기능 구현

• 메세지 데이터 연동 및 삭제 기능 구현

📤 메세지 데이터 연동 및 삭제 기능 구현

• 첫 Redux 사용이라 흐름을 이해하는데 많은 시간이 걸렸다.

// 삭제 기능을 위한 action
  export const removeContent = (content: Content[]) => ({
  type: REMOVE_CONTENT,
  payload: content,
});

// 삭제 기능 action을 적용한 reducer
 export default function content(
  state: ContentState = initialState,
  action: ContentAction
) {
  switch (action.type) {
    case REMOVE_CONTENT:
      return { ...state, content: action.payload };
    default:
      return state;
  }
}

• 위의 과정을 거쳐 state를 메시지를 관리하는 컴포넌트로 보내준 뒤에
  삭제 이모지에 아래와 같은 기능을 추가했다.

  const showRemoveText = (): void | string => {
    if (message.text.length >= 10) {
      return message.text.substr(0, 10) + '...';
    }
  };

  const handleRemove = () => {
    if (
      window.confirm(showRemoveText() + '메시지를 삭제하시겠습니까??') === true
    ) {
      const newContents = content.filter(
        (data: Content) => data.uuid !== message.uuid
      );
      dispatch(removeContent(newContents));
      removeContentData(newContents);
    } else {
      return false;
    }
  };

• 삭제 버튼 시 alert창 확인 / 취소 버튼을 활용한 확인 기능과 삭제하려는
  메시지를 최대 10글자 까지 표현해주는 기능을 구현.
• 처음엔 view에서만 메세지를 삭제하는 부분만 생각했다가 DB에서도 삭제를 해야 한다는 부분을 뒤늦게 상기시키고 코드를 재작성했다.

🌅 최종 구현

Redux와 FireBase를 처음 사용하면서 잘 알고있는 팀원분들의 설명을 들어가며 작업을 진행했는데, 프로젝트를 하면서 매순간 새로운 것을 배우고 성장하고 있다는 것을 느껴서 좋으면서도 반복숙달의 중요성을 체감할 수 있었다.
이 과제가 끝난 후로 계속해서 새롭게 배운 것을 공부해서 내것으로 만들어야겠다고 새각했던 시간이다.🎁