우리들의 모임, WuMo 프로젝트 회고

총 4주의 기간 동안 프론트엔드 4명, 백엔드 3명으로 프로젝트를 진행하였다. 처음으로 백엔드와 함께 협업을 하면서 배려하며 소통하는 방법, 백엔드와 협의해야 할 점들에 대해 배울 수 있었다. 기획부터 개발까지 진행하면서 어려웠던 점, 느낀 점들에 대해 정리하고자 한다.

 

📌서비스  소개

서비스 명: WuMo

해당 서비스는 가족, 친구와 함께 모임에 대해 일정을 만들어서 기록할 수 있는 서비스이다.

카톡방에서 약속, 모임에 대해 이야기할 때 모임 내용과 관련없는 이야기가 섞여서 필요한 장소나 정보에 대해 찾기가 어렵다고 느껴서 모임에 대한 내용을 정리하고 기록할 수 있는 서비스를 만들게 되었다.

 

📱배포 사이트: https://5yes-wumo.vercel.app/

🛠️프로젝트 깃헙: https://github.com/prgrms-web-devcourse/Team-5YES-WuMo-FE

---

📖기획 단계

1) 주제

프로젝트 기간에 들어가기에 앞서 팀원들이 각자 2-3개의 주제를 생각해 왔고 피그잼을 이용해서 해당 아이디어를 기록하고 이야기를 나눈 후 선정하였다. 거의 만장일치로 일정 기록이라는 주제에 찬성하였고 빠르게 서비스 기획을 진행할 수 있었다.

 

2) 역할 선정

역할을 프론트엔드, 백엔드 따로 지정하였고 문서화의 경우 프론트엔드, 백엔드 담당자가 2주씩 맡아서 진행하였다.

프론트엔드에서 정한 역할은

- PM, 디자인, 초기세팅, 문서화 

이렇게 나누었고 여기서 나는 문서화를 맡게 되었다. 문서화할 내용은 매일 진행되는 오픈 스크럼과 클로즈 스크럼 내용과 간헐적으로 진행되는 회의 내용을 노션에 기록하였다. 

 

평소에 문서화를 꼼꼼히 하는 편은 아니라서 팀원들에게 민폐를 끼칠까 봐 더 자세하게 문서화하려고 했던 것 같다. 미숙한 점도 많았지만 이번 프로젝트를 통해서 문서화를 꼼꼼히 해두었을 때의 편리함을 느낄 수 있었던 것 같다. 그래서 앞으로는 개인적으로도 문서화를 꼼꼼히 진행하고 싶다.

 

3) 기술 스택

기술스택은 처음 기획 때 TypeScript, React, react-hook-form 같이 주요 기술을 정해두고 개발을 진행하면서 필요한 라이브러리 등을 추가하였다.

react vs nextjs

처음에는 nextJS를 써보려고 멘토님과의 커피챗을 진행하면서 TypeScript, React Query 등 익숙하지 않은 기술들이 있으니까 이 기술들을 좀 더 완성도 있게 사용하는 게 더 좋지 않을까 하는 피드백을 받았었다. 그래서 팀원들과의 상의 후에 여러 기술을 사용하는 것도 좋지만 일단 현재 미숙하게 사용하는 기술들을 좀 더 고도화하자는 의견에 모두 동의하여 next는 진행하지 않게 되었다.

 

TypeScript

타입스크립트는 모든 팀원들이 이전 프로젝트에서도 쓴 적이 있었다. 하지만 공통적으로 타입스크립트를 제대로 활용하지 못한 것 같다는 의견이 많았다. 그래서 이번 프로젝트의 목표 중 하나가 타입스크립트는 보다 효율적으로 활용하는 것이었다. const 등을 통한 타입 상수화, 타입 네로잉 등을 적극적으로 활용하려고 하였다.

 

React Query

이전 프로젝트에서 react query를 도입하고 axios 만으로 api를 호출할 때 api로 받아온 data를 useState에 저장하게 되면서 이전 데이터가 보였다가 사라진다거나 불필요한 useState가 늘어난다거나 하는 문제점이 있었다. 이러한 문제점을 해결하기 위해 react query를 도입하였다. react query를 도입함으로써 data를 쉽게 받아오고 캐시를 설정하여 데이터를 효율적으로 관리할 수 있었다.

 

React Hook Form

form을 관리할 때 input의 재렌더링 문제와 input 관리를 위한 useState 사용 등을 해결하기 위해 react-hook-form을 도입하였다. 

 

Recoil

기획단계에서 상태관리 기술로 recoil, mobx, redux 중 무엇을 사용할지가 가장 고민이었다. 팀원들이 각자 정보를 찾아오면서 내린 결론은 기간이 긴 프로젝트이기 때문에 러닝커브가 낮은 리코일이 적절할 것 같다는 것이었다. 실제로 프로젝트 전 짧은 기간 동안 리코일의 기본기 학습을 마무리할 수 있었다.

 

 

👩‍💻기능 상세 소개 및 문제 해결 과정

담당한 기능 

• 메인페이지
• 모임 일정 페이지
• 모임 초대 기능
• 모임 일정 댓글 기능

 

메인 페이지

: 메인 페이지의 캐러셀은 처음엔 라이브러리 사용하지 않고 구현하려 하였으나 기간 내에 기능 구현을 위해서는 빠른 작업이 필요하다고 느껴 react slick이라는 라이브러리를 도입하게 되었다.

베스트 모임루트와 내 모임 목록에 라이브러리를 적용하였고 베스트 모임 루트는 5초마다 자동으로 넘어가도록 하였다. 처음엔 내 모임 목록도 자동으로 넘어가고 무한으로 이어지도록 설정하였는데 오히려 사용자 입장에서 똑같은 모임 리스트가 반복되는 게 사용자 경험을 떨어뜨리는 것 같아 설정을 바꾸게 되었다.

 

드래그할 때 클릭되는 현상 막기

  const settings = {

   ...

    beforeChange: () => setDragging(true),

    afterChange: () => setDragging(false),

   ...

  };

각 아이템마다 클릭 이벤트로 해당 모임 루트 상세 페이지로 이동하도록 하였다. 그런데 드래그를 할 때 클릭 이벤트도 같이 인식되어 페이지가 계속 이동되는 현상이 생겼다. 이것을 막기 위해 드래그 여부를 확인할 수 있도록 useState를 만들고 해당 라이브러리의 option을 이용해서 드래그하는 동안 true로 설정되도록 하였다.

 

 

모임 정보

모임 정보 탭

: 관련된 api 통신을 통해서 화면에 그려주는 부분이었다. 스크롤을 내려서 정보 탭을 벗어날 경우 상단 nav bar에 해당 모임 명이 뜨도록 하기 위해 스크롤 위치를 감지하는 커스텀 훅을 제작하였다.

 

const useScrollEvent = (y: number) => {

  const [scrollActive, setScrollActive] = useState(false);

  const onScroll = () => {

    if (window.scrollY > y) {

      setScrollActive(true);

      return;

    }

    setScrollActive(false);

  };

...};

 

인자로 받는 y 값 이상으로 스크롤을 할 경우 scrollAcitve 가 true로 변하도록 하였다. 현재는 스크롤을 하면서 모임 명이 상단에 생길 경우 전체 컴포넌트가 리렌더링 되는데 이후 리팩토링 하면서 스크롤 시 변경사항이 있는 상단 nav bar만 리렌더링 되도록 할 예정이다.

 

사용 금액 영수증

: 사용자가 일정에서 사용한 금액을 입력하면 영수증으로 사용한 금액 리스트와 총액, 1/n 금액을 보여주는 기능이다. api get 요청만으로 만들 수 있는 간단한 기능이지만 버튼을 누르기 전에 api 통신이 되면서 데이터가 없을 때는 400 에러가 뜨기 때문에 버튼을 눌렀을 때 아무 반응이 없는 버그가 있었다. 그래서 버튼을 눌렀을 때 api 통신을 하고 데이터가 없는 경우의 에러 핸들링을 할 수 있도록 리팩토링하였다.

 

     

  const { data: scheduleList, refetch } = useQuery<ScheduleType>(

    ['ReceiptScheduleList', partyId],

    () => fetchScheduleList(Number(partyId), false),

    {

      enabled: false,

      onError: () => {

        Toast.show({

          title: '등록된 일정이 없어요',

          message: '일정을 등록하고 사용금액을 설정해주세요.',

          type: 'warning',

        });

      },

    }

  );

 

...

 

         <Button

            colorScheme='teal'

            size='xs'

            marginRight='0.625rem'

            onClick={() => {

              refetch();

              receiptOnOpen();

            }}>

            영수증

          </Button>

원래 api 통신을 영수증 컴포넌트에서 하고 있었고 영수증 버튼은 파티 정보 컴포넌트에 있는 상태였다. 그래서 해당 로직을 구현하기 위해 영수증 컴포넌트에 있던 api 통신을 파티 정보 컴포넌트로 옮긴 후 로직을 추가해 주었다.

 

모임 초대

- 초대코드 생성 api를 활용해서 초대링크를 만들기 위해서 react router의 동적 라우팅을 활용하였다. 초대 코드 생성 api 통신 후 서비스 url에 초대코드를 query로 붙여서 전달한다. 그래서 사용자가 해당 링크로 접속한 경우 useParams로 query를 받아오도록 하였다. 

만약 로그인을 안 한 유저라면 초대코드를 로컬스토리지에 저장하고 랜딩페이지로 리다이렉션 시킨다. 그 뒤 사용자가 로그인 후 메인페이지에 진입했을 때 로컬스토리지에 초대코드가 있는 경우 모임초대 페이지로 리다이렉션을 시킨다. 그리고 모임 초대를 수락하는 경우엔 해당 모임 페이지로 이동시키고 거절하는 경우 메인 페이지로 이동시킨다. 그 뒤에 로컬 스토리지의 초대 코드를 remove 하도록 하였다.

초대코드 생성

const PartyInformation = () => {

...

  const copyPartyInvitationCode = async (url: string) => {

    const body = {

      partyId: Number(partyId),

      expiredDate: partyInformation.endDate,

    };

    const invitationCode = await createInvitationCode(body);

    setInvitationCode(`${url}/${invitationCode.code}`);

    invitationOnOpen();

  };

 

...

  return (

    <Box>

     ...

          <Button

            bg='transparent'

            size='xs'

            onClick={() =>

              copyPartyInvitationCode(`${window.location.origin}/invitation`)

            }>

            <BsFillShareFill />

          </Button>

     ...

      <InvitationCodeModal

        invitationCode={invitationCode}

        isOpen={invitationIsOpen}

        onClose={invitationOnClose}

      />

    </Box>

  );

};

 

모임 일정 페이지

- 후보지에서 일정으로 등록된 장소들을 타임라인 형태로 보여주는데 해당 컴포넌트를 다른 곳에서 재사용했어야 했다. 어디서 사용하느냐에 따라 달라지는 점은 api params, 장소를 클릭했을 때의 클릭 이벤트, 클릭 아이콘이다. 그래서 해당 요소를 props로 받아서 재사용할 수 있도록 하였다.

- 루트 공개 토글을 이용해서 다른 사람들이 루트를 볼 수 있도록 공개할 수 있다. 루트를 공개할 때 루트의 이름을 따로 설정할 수 있다.

 

모임 댓글 페이지

- 해당 장소에 대한 사용금액을 설정할 수 있다.

- 플로팅 버튼을 통해 댓글을 생성할 수 있고 생성한 댓글을 수정 삭제할 수 있다. 댓글 생성, 수정할 때 이미지 미리 보기 컴포넌트를 분리하고 싶어서

- 생성 수정에서 이미지 컴포넌트를 분리하기 위해 고민하면서 이미지 컴포넌트를 부모에서 react-hook-form의 useController를 이용해서 관리하였다.

 

const CommentImageInput = <T extends FieldValues>({

  name,

  control,

  imageURL,

  setCurrentImageUrl,

}: ImageProps<T>) => {

  const inputRef = useRef<HTMLInputElement | null>(null);

  const [value, setValue] = useState('');

  const [imageBase64, setImageBase64] = useState<string>(imageURL || '');

  const { field } = useController({

    name,

    control,

  });

  ...

  return (

    <Flex flexDirection='column' align='center'>

      ...

      <Input

        type='file'

        hidden

        accept='image/jpg, image/jpeg, image/png'

        {...field}

        value={value}

        ref={inputRef}

        onChange={(e) => {

          field.onChange(e.target.files?.[0]);

          onFileChange(e);

          setValue(e.target.value);

        }}

      />

     ...

    </Flex>

  );

};

 

 

🎉마무리하며 

처음으로 백엔드와 함께하는 협업 프로젝트라 어떤 식으로 진행할 수 있을지 고민이 많았다. 그런데 실제로 진행하면서 백엔드도 프론트엔드도 서로의 시간과 상황을 먼저 배려하면서 협업을 진행하여 즐겁게 프로젝트 진행할 수 있었다. 

기획할 땐 4주 프로젝트에서 기능이 많다는 것을 잘 체감하지 못했었는데 해도 해도 끝나지 않는 api 연결을 진행하면서 기능을 많이 쳐냈는데도 안정화하는 데까지 시간이 빠듯해서 아쉬웠다. 기간 내에 주요 기능 구현 및 안정화까지 진행하려면 기능을 좀 더 줄였었으면 좋았겠다고 생각하였다.

건강관리나 멘탈관리에 실패한 부분도 있지만... 개인적으로 너무 애정이 가는 프로젝트이다. 팀원들과의 협업과정도 너무 좋았고 배운 것도 많았었다. 

 

 

아쉬운 점

 

일정

일정이 조금씩 딜레이 됐었던 게 아쉽다. 스프린트 기간에 맞춰서 개발을 진행했는데 설정했던 목표와 달리 api 연동이 늦어져서 백엔드와 이슈 공유가 늦어지거나 qa가 늦어져서 버그를 개발 기간 막바지에 하게 되어 촉박하게 진행했던 것 같아 아쉽다.

 

사파리에선 작동 안 하던 초대코드 생성

초대코드를 처음엔 버튼을 누르자마자 초대코드를 생성하고 초대링크를 복사하였다. 하지만 사파리에서는 api 통신이 있을 때 clipboard api가 실행되지 않았다. 그래서 이후에 버튼을 누르면 초대링크를 생성하고 복사할 수 있는 모달을 하나 더 띄워서 사파리에서도 가능하도록 하였다. 이러한 과정을 개발 기간에 다양한 브라우저와 기기로 테스트해보지 못한 것이 아쉽다.

 

 

앞으로 리팩토링할 점

• 무한 스크롤 구현
• 알림/채팅 기능 추가하기
• 코드 리팩토링
• 기타 최적화