[회고] 원티드 프리온보딩 프론트엔드 - 3차 과제

더블엔씨

3차 과제로 더블엔씨를 진행하였습니다.

기술스택

React, Emotion, Recoil을 사용하였습니다.

Emotion CSS-in-JS 라이브러리를 기반으로하여 문자열 또는 객체 스타일로 앱의 스타일을 빠르게 지정할 수 있습니다. styled component보다 파일 사이즈가 작고, ssr시 서버 작업이 필요 없습니다.
Recoil은 러닝커브가 적고 hook을 사용하는 방식이 익숙한 리액트 개발자들에게 쉽게 다가올 수 있습니다. redux는 상태 한개만 처리해도 수많은 보일러 플레이트 코드가 필요했으나, recoil은 적은 코드로 작업이 가능합니다.

맡은 역할

유저가 저장, 삭제, 수정등을 할때 피드백을 줄 UI를 구현하였습니다.

const msgList = {
  save: '확인 되었습니다.',
  remove: '삭제 되었습니다.',
  write: '메모를 작성해주세요.',
};

  const handleToast = (select) => {
    if (!toastStatus) {
      setToastStatus(true);
      setToastMsg(msgList[select]);
    }
  };

  useEffect(() => {
    if (toastStatus) {
      setTimeout(() => {
        setToastStatus(false);
        setToastMsg('');
      }, 3000);
    }
  }, [toastStatus]);

useState를 사용하여 버튼 클릭 시 handleToast 함수를 통해 setToastStatus(true)를 적용하여 모달창에서 수정, 삭제 클릭 시 Toast UI가 화면에 보이게 하였습니다. 또한 삭제, 작성, 저장의 문구가 보일 메세지를 객체로 따로 관리하여 state로 같이 관리 할 수 있게 구현하였습니다.
setTimeout을 사용하여 toastStatus가 true인 경우 3초 뒤 자동으로 닫히게 하고, setToastMsg를 빈 문자열로 해주었습니다.
이 때, Toast UI가 서서히 생기고 사라지는 효과를 주기 위해 keyframe 속성을 사용하여 fadeIn, fadeout을 주어 사라지는 효과를 주었습니다.

어려웠던 점 (에러 핸들링)

Toast UI를 modal창의 수정, 삭제 버튼 클릭 시 그에 맞는 피드백 메세지를 화면에 보여주려 했습니다. 피드백 메세지를 배열, 객체 등 어떤 식으로 구현을 해야 할지 고민하다 객체로 만들고 state로 같이 관리하게 해주었습니다. handleToast함수를 통해 setToastState(true), setToastMsg(msgLisg[select])로 모달창에서 버튼 클릭 시 그에 맞는 메세지 Toast UI를 구현하였습니다.

느낀점

유저의 피드백에 맞춰 Toast UI 구현하는 것이 어렵지 않을 것이라고 생각했는데, 생각보다 정말 많은 시간이 소요되었습니다. 팀원들의 도움 덕분에 완성할 수 있었습니다.