[데브코스] 최종 프로젝트 회고
프로젝트
회고
JavaScript
TypeScript
React
Next
2022-09-13

들어가며

데브코스에서의 최종 프로젝트가 끝이 났다. 물론 프로젝트가 끝난지 벌써 한 달이 다 돼 간다. 어쩌다 보니 회고 작성까지 너무 오래 걸린 것 같다. 최종 프로젝트 시작 전에 번아웃이 와서 글 작성하는 걸 중단했었는데, 최종 프로젝트가 바로 시작되면서 거의 한 달 넘게 글을 쓰지 않았다. 그래서 그런지 다시 글을 쓰는 데 까지 시간이 좀 걸렸던 것 같다.
이번 프로젝트는 개인적으로 아쉬움이 남는다. 그렇기 때문에 프로젝트 진행 과정, 내가 기여한 부분, 어떤 점이 아쉬웠는지, 앞으로 어떻게 개선할 것인지를 중심으로 작성하고자 한다.

프로젝트 시작

2022년 7월 21일에 공식적인 프로젝트 기간이 시작됐다. 백엔드 팀원분들과 만나서 인사하고 바로 프로젝트 주제를 선정하기 시작했다. 브레인스토밍을 위해 피그잼을 사용했는데 주제 선정하는 과정 자체가 재미있었고, 순조롭게 주제를 선정할 수 있었던 것 같다.
figjam

주제는 내 근처 스포츠 경기 매칭 서비스였다. 내 팀은 있는데 경기 상대를 찾을 수 없는 경우, 같이 할 팀이 없는 경우에 팀을 구하고 상대를 구할 수 있는 서비스이다. 기존에도 비슷한 서비스가 있지만 대부분의 경우 풋살 종목에만 한정하고 있었기 때문에 다양한 스포츠 종목으로 서비스를 확장해보고 싶었다.

디자인

세부적인 기획이 나오고, 다른 팀원 한 분과 같이 피그마를 사용해 디자인을 진행했다. 디자인을 맡아서 해본 적이 없어서 잘 할 수 있을까 걱정했는데 모바일 화면이라 그런지 필요한 요소가 많지 않아서 무난하게? 진행했던 것 같다. 물론 애초에 엄청 예쁜 디자인을 할 수 없을 거란 생각이기도 했다...
figma

개발

디자인 완료 후 페이지 별로 맡아서 개발을 시작했다. 먼저 기술 스택을 정했는데, 스택은 아래와 같다.

  • TypeScript
  • React
  • Next.js
  • Emotion
  • Axios
  • Recoil

기술 스택을 위와 같이 선정한 이유는 한 마디로 써보고 싶었던 기술이기 때문이었다. 내 경우 타입스크립트와 Next는 제대로 사용해 본 적이 없었고, Recoil 또한 러닝 커브가 낮고 요즘 유행하는 상태관리 라이브러리였기 때문에 이것 또한 사용해보고 싶었다. 전체적으로 다른 팀원 분들의 의견도 비슷해서 기술 스택을 정했는데, 아래에서 얘기하겠지만 선택의 이유가 매우 빈약 했던 것 같다.

로그인/회원가입 페이지

기술 스택을 정하고 난 후 각자 페이지를 나눠 페이지 단위로 개발을 시작했다. 나는 이전 프로젝트에서 해보지 못했던 로그인과 회원가입 페이지를 맡았다. 로그인 페이지와 회원가입 페이지의 공통 기능은 다음과 같다.

  • 입력 폼에 데이터를 입력 받는다.
  • 프론트엔드에서 유효성 검사를 진행해서 유효성 검사가 통과되면 입력 값을 백엔드 서버에 전송하고 해당 값에 따른 응답을 받는다.

위의 기능을 위해 useForm 이라는 커스텀 훅을 만들어 사용했다. 커스텀 훅을 처음 만들어 봤는데 반복되는 코드를 하나의 훅으로 간편하게 사용할 수 있다는 점이 좋았다.

무한 스크롤 구현

공고 조회 페이지, 대결 신청 목록 페이지 등에서 사용되는 무한 스크롤을 구현했다. Intersection Observer 를 사용해 구현했다. 서버에서 받아온 데이터를 지역 상태로 저장하고 마지막 요소를 observe 한다. 마지막 요소가 뷰포트 내로 들어오면 커서 페이징을 사용해 서버에서 데이터를 불러오고 지역 상태에 추가한다. 이 때, useEffect로 해당 지역 상태의 길이가 변경되었을 때 observe 하던 요소를 unobserve 하고 추가된 데이터의 마지막 요소를 observe 하도록 구현했다.
테스트 했을 때 의도한 대로 동작해서 PR을 작성해서 올렸다. 그런데 공고 조회의 경우 스포츠 카테고리 별로 선택해서 필터링 된 공고를 볼 수 있다. 이 때, 현재 선택된 카테고리의 공고 개수와 다른 카테고리를 선택했을 때의 공고 개수가 같을 경우 Intersection Observer 가 새로운 요소를 observe 하는 문제가 있었다. 이 문제는 useEffect 의존성 배열에 category 변수를 넣어주는 걸로 해결했다. 해결은 했지만 코드가 지저분해서 이 부분은 리팩토링이 필요할 것 같다.

1  useEffect(() => {
2    if (state.values?.length && observerRef.current !== null && state.hasNext) {
3      const lastItem =
4        observerRef.current.children[observerRef.current.children.length - 1];
5      const io = new IntersectionObserver(
6        (entries) => {
7          entries.forEach((entry) => {
8            if (!isLoading && entry.isIntersecting) {
9              getMoreMatchList();
10              io.unobserve(lastItem);
11            }
12          });
13        },
14        { threshold: 1 }
15      );
16      io.observe(lastItem);
17    }
18  }, [state.values?.length, category, filter]);

버그 픽스

프로젝트 후반부에 다른 팀원 분들은 기능 구현을 하고 내가 버그를 수정하기로 했다. 생각보다 더 버그가 많이 나왔다. 간단하게 수정할 수 있는 버그도 있었고, 수정에 시간이 걸리는 버그도 있었다.

  • 회원가입 중복 확인 버튼 버그
    회원가입 페이지에는 아이디와 닉네임의 중복 검사를 하는 버튼과 회원가입을 하는 버튼이 있다. 중복 검사 버튼을 눌렀을 때 중복 검사 이후에 전체 폼에 대한 유효성 검사를 진행하는 버그가 있었다. 알고 보니 중복 검사 버튼에 타입을 지정하지 않아서 기본값인 submit 으로 설정되어 onSubmit 이벤트가 발생하는 문제였다.
  • 페이지 접근 버그
    기획 단계에서 인증되지 않은 사용자는 서비스를 이용할 수 없도록 하자는 얘기가 나와서 로그인 되지 않은 사용자가 인증이 필요한 페이지에 접근하면 페이지를 뒤로 이동하도록 구현했다. 그랬더니 외부 링크에서 접근했을 경우 로그인이 되어 있지 않을 때 흰 배경만 뜨는 버그가 있었다. 이 문제는 document.referrer 속성을 사용해 해결했다. document.referrer 는 이전 페이지의 URL을 반환한다. 이전 페이지에 서비스의 URL이 존재하지 않으면 랜딩 페이지로 이동하도록 구현했다.
    1  if (!publicPath.includes(router.pathname) && user.id === undefined) {
    2    await router.replace("/");
    3  } else if (publicPath.includes(router.pathname) && user.id !== undefined) {
    4    await new Promise(() => {
    5      if (
    6        document.referrer &&
    7        (document.referrer.indexOf("dongkyurami.link") !== -1 ||
    8          document.referrer.indexOf("localhost"))
    9      ) {
    10        router.back();
    11      } else {
    12        router.replace("/matches");
    13      }
    14    });
    15  } else if (
    16    user.id !== undefined &&
    17    router.pathname !== `/user/[id]` &&
    18    (user.latitude === null ||
    19      user.longitude === null ||
    20      user.searchDistance === null)
    21  ) {
    22    await router.replace(`/user/${user.id}/location`);
    23  }
  • 검색 거리 설정 버그
    슬라이더 컴포넌트를 사용해 검색 거리를 설정하는 기능이 있었다. 대부분의 상황에서는 제대로 동작했는데 가끔씩 거리 설정이 안되는 버그가 있었다. 콘솔로 확인해보니 버그가 발생하는 상황에서는 onChange 이벤트가 발생하지 않았다. 관련 키워드로 검색해보니 onchange event on input type=range is not triggering in Firefox while dragging 라는 스택오버플로우 질문글이 있었다. 해당 글에서 continuous update를 위해서는 onInput 이벤트를 사용해야 한다고 해서 onChange와 onInput 이벤트 핸들러를 둘 다 달아주는 것으로 문제를 해결했다. 그런데 이렇게 해결했을 때 이벤트가 두 번 발생하는 문제는 나중에 성능에 문제가 있을 것 같다는 생각이 들었다. 답변에도 두 이벤트를 둘 다 추가했는데 더 좋은 방법이 있는지 찾아볼 필요는 있을 것 같다.

이 외에도 다양한 버그를 수정하면서 어떻게 하면 버그가 없는 코드를 작성할 수 있을까 생각할 수 있었고, 다른 사람의 코드를 보면서 이해하는 속도도 조금 빨라진 것 같다.

좋았던 점

프로젝트의 처음부터 끝까지 설명하자면 훨씬 내용이 많겠지만 내가 했던 것 위주로 정리해봤다. 프로젝트를 진행하면서 내가 부족하다는 점을 느꼈지만, 또 많이 배우게 된 계기가 된 것 같다. 코드 리뷰를 진행하면서 팀원으로부터 더 좋은 코드를 작성하는 방법을 배웠다. 또, 새로운 기술을 사용하면서 평소에 사용하고 싶었지만, 무서워서 사용하지 않았던 기술에 적응할 수 있었다. 기술 외적으로는 문서화의 중요성에 대해 느낄 수 있었다. 백엔드 팀원 분들이 문서화를 엄청 빡세게 진행하셨는데 처음에는 하나하나 문서화 해야 하는 점이 힘들었다. 그런데 시간이 지날수록 회의 때 나눴던 얘기를 잊어버리기도 하는 등의 문제가 생기면서 문서화 해둔 게 빛을 본 것 같다. 물론 아직도 혼자 문서화 하는 건 힘들지만 문서화 해야겠다는 생각이 생긴 건 매우 좋다.

아쉬웠던 점

앞에서도 설명했지만 아쉬운 점이 많았다.

  1. 다양한 기술에 도전하는 건 좋았지만 프로젝트의 마감 기한을 고려했어야 했다.
    배우고자 하는 의지는 좋았지만 프로젝트의 퀄리티는 떨어진 것 같다. 타입스크립트를 처음 사용하면서 타입 에러가 많이 발생했다. 기능 구현은 끝났는데 타입 에러를 해결하느라 시간이 많이 지연된 것 같다. 또, Next.js의 경우 SSR을 위해 Next 서버에서 백엔드 서버로 데이터를 요청하고 응답 받은 데이터로 HTML 파일을 구성해야 하는데, 쿠키의 도메인과 프론트엔드의 도메인이 달라서 Next 서버로 인증 토큰을 전송할 수 없었다. 이 문제를 해결할 수 없다고 판단하고 CSR만을 사용했다. 반대로 도입했으면 좋았을 것 같은데 도입하지 않아서 아쉬웠던 기술도 있다. Material UI, Ant Design 같은 UI 라이브러리인데, 커스텀 디자인이 어렵다고 판단해서 해당 라이브러리를 사용하지 않았다. 마감기한이 있는 프로젝트에서는 기한 내에 최대의 효율을 낼 수 있는 기술을 찾아 적용하는 게 중요한 것 같다.
  2. 기술적, 기술 외적으로 문제가 발생했을 때 회피하려고 했다.
    이 부분은 프로젝트가 끝나고 멘토님께도 지적 받았던 부분인데, 문제가 발생 했을 때 회피하려고 했던 것 같다. 사실 팀원 간 불화 아닌 불화? 가 있었다. 누가 잘못했다기 보단 성향이 달라서 발생했던 문제 같다. 이를 초반에 해결하기 위해 노력했어야 했는데 괜히 얘기를 꺼냈을 때 팀이 오히려 더 안좋은 방향으로 흘러갈까봐 그냥 참고 있었다. 결과적으로는 이 문제를 해결하지 못해서 팀 전체적인 개발 효율이 떨어졌던 것 같다. 다음에 비슷한 문제가 발생한다면 무조건 어떻게든 문제를 해결하도록 해야겠다.

마무리

어찌저찌 데브코스 최종 프로젝트가 끝이 났다. 5개월 동안 공부한 걸 전부 보여준다는 면에서는 아쉬움이 있는 프로젝트였지만, 5개월 전의 나와 비교했을 때는 발전했다는 걸 느낄 수 있는 프로젝트였다.
오랜만에 글을 작성하다보니 회고를 위한 회고가 된 느낌이 없지 않아 있는데 그래도 회고를 했다는 것 자체에 의미를 두고 다음번 회고 때는 좀 더 나를 위한 회고가 될 수 있으면 좋겠다.


프로젝트 배포 링크: https://www.dongkyurami.link/
프로젝트 깃허브 링크: https://github.com/prgrms-web-devcourse/Team_04_SFam_FE

Loading script...
copyright 2021-2022. Jeongki.dev