프로젝트 회고록 👍

Steadystudy·2022년 6월 27일

팀프로젝트 프로그래머스 회고

내 생애 첫 팀 프로젝트를 진행하면서 실력적으로 정말 큰 성장을 하게 되었다. 팀의 필요성과 중요성을 많이 느꼈고 좋은 팀원분들을 만나서 프로젝트를 완성도있게 만들 수 있었다.

1. 프로젝트 소개

따봉(TTABONG) 👍

따봉은 사용자 간 칭찬 포스트를 공유하는 SNS 앱 어플리케이션입니다.

사용자는 다른 사용자에게 칭찬 및 감사를 전달하기 위해따봉을보낼 수 있습니다.
특정한 한 명의 사용자에게는 더 큰 칭찬 및 감사를 전달하기 위해 빅따봉을 보낼 수 있습니다.
사용자는 다른 사용자 간의 칭찬 및 감사 포스트에 댓글을 달거나 공감을 함으로써 상호작용할 수 있습니다.
사용자가 칭찬을 한 횟수를 따봉으로, 칭찬을 받은 횟수를 코인으로 계산하여 랭킹 시스템을 제공합니다.

진행기간

2022년 6월 7일 ~ 2022년 6월 22일 (15일)

개발 방법론

우리 팀은 아토믹 디자인으로 개발하기로 했다. (아토믹 디자인이란?)
먼저 작은 컴포넌트 단위로 나누고 상향식 접근을 통해 큰 컴포넌트를 구성했다.
하지만 5가지로 나눠서 하기엔 시간이 너무 오래걸리고 효율적이지 못하다고 판단해서 3가지로 나누었다.

components 폴더는 웹앱 전반적으로 재사용되는 base 컴포넌트
features 폴더는 각 page에 사용되는 컴포넌트
pages 폴더는 웹앱의 각 page를 components와 features에 있는 컴포넌트로 조합해서 만든 컴포넌트

기술 스택

js => 2주간 짧은 프로젝트였기 때문에 ts를 배우지 않은 팀원들이 있었고 프로그래머스에서 지금까지 js를 사용해 강의를 들어왔고 기초가 중요하다고 생각해 js를 선택했다.
react => vue나 angular를 사용한 팀원이 없고 react를 다들 사용해보거나 공부해서 react를 선택했다.
storybook => UI 테스팅을 할 수 있는 좋은 툴, 모든 팀원이 꼭 사용해보고 싶어서 사용했다.
figma => 같이 디자인을 만들고 협업하기 좋은 툴, css에 대한 부담도 줄어들게 해준다.

깃 레포와 팀 노션이 궁금하다면?
저희 팀이 만든 어플이 궁금하다면?

2. 나의 역할

아이디어 제공
- 데브코스 슬랙에서 사용하는 칭찬/감사합니다채널의 기능을 확장해서 만들면 어떨까해서 아이디어를 냈고 채택되었다.
생산성 높이기
- PR, Issue template을 깃헙에서 설정했다.
  PR review template도 설정하고 싶었지만 찾아보니 아직 그러한 기능이 없었다.
- storybook를 사용해 UI를 테스팅할 때 viewport가 한정적이서 아쉬웠던 부분을 storybook addons를 찾아 다양한 viewport가 보이게 설정했다.
동기부여 자극
- 의도치 않게 팀원들에게 자극을 주었다. 내가 부족해서 새벽까지 열심히 했을 뿐인데 나를 보고 열심히 하는 팀원도 있었다.

3. 나의 성과

생산성 관련 성과

Issue Template을 Feat, Bug 둘로만 설정하다가 Style, Refactor 관련 이슈도 Feat 템플릿으로 사용하니 혼동이 오는 부분이 있었다. 그래서 추가적으로 Style, Refactor 템플릿을 추가로 만들어서 통일성을 갖추게 했다.
Issue Label을 긴급, 보통, 천천히로 나누었지만 시간을 정확히 정하지 않아서 긴급이어도 코드 리뷰가 늦어지는 상황이 있었다. 2차 스프린트 회의에서 그동안 아쉬웠던 리뷰, label 관련 의견을 내어서 프로젝트를 빠르게 진행되었다. 예를 들어, 긴급인 경우 코어 타임 이내에 리뷰를 하고 수정해서 빠르게 머지시킨 후 다음 업무를 할 수 있게 했고 보통인 경우 다음 코어 타임 전까지 리뷰를 하는 룰을 정했다.

Feat 관련 성과

api 초안 만들기, base 컴포넌트, rank Page, 칭찬하기 page 등 구현했지만 제일 기억에 남는 건 rank Page 구현이다.

문제

모든 User를 받아와서 각자 가지고 있는 코인(or 따봉)수로 정렬해서 보여주면 되지만 각 User 객체에 코인 수를 알 수 없었다.
api를 커스텀할 수 없기 때문에 있는 api로 구현을 해야 했다.

해결법

따봉 수(칭찬 횟수) = 해당 유저의 포스트 갯수
코인 수(칭찬 받은 횟수) 로직
- 모든 유저와 포스트 목록를 불러온다.
- 각 유저를 {id, fullname, 따봉수, 코인수, rank} 객체로 만들어 새로운 배열을 만든다.
- 포스트 목록을 돌면서 receiver id를 확인해 따봉일 경우 코인 수를 1, 빅 따봉일 경우 코인 수를 2씩 올려준다.

  const sortUsers = useCallback(async () => {
    const allUsers = await getAllUsers();
    const channelPosts = await getChannelPosts(channelId);
    const allUserInfo = allUsers.map(({ image, fullName, _id, posts }) => {
      return { _id, image, fullName, [TTABONG]: posts.length, [COIN]: 0 };
    });

    channelPosts.forEach(({ title }) => {
      const { type, receiver } = JSON.parse(title);

      for (let i = 0; i < allUserInfo.length; i += 1) {
        const { _id, coinCount } = allUserInfo[i];
        if (receiver._id === _id) {
          const count = type === 'TTaBong' ? coinCount + 1 : coinCount + 2;
          allUserInfo[i].coinCount = count;
          break;
        }
      }
    });
    return allUserInfo;
  }, []);

분류하는 로직
- 갯수에 따라 높은 순서로 앞에서 정렬
- 갯수가 같다면 id 낮은 순서대로 정렬(먼저 만든 사람 우선)

만약 코인(따봉)수가 각 User 객체 내에 받아오면 굳이 이렇게 구현할 필요는 없었지만
어떻게든 구현을 해야하기 때문에 있는 api로 로직을 만들었는데 나에게는 꽤 즐거운 경험이었다.
api를 어떻게 사용해야 할지 생각도 많이 하게 되고 고민도 많이 할 수 있었다.

4. 잘한 점

코드 리뷰
- 다른 사람들의 코드를 보고 많이 배울 수 있어서 최대한 많이 코드리뷰를 했고 덕분에 내가 코드를 짜는 데에 도움을 많이 받을 수 있었다. 왜 그렇게 짰는지 또 이해가 안되는 부분이 있으면 물어보면서 의견을 맞출 수 있었고 전체적인 코드 통일성을 맞추는 데에도 도움이 되었다.
적극적인 태도와 소통
- 우리 팀 문화에는 1시간 동안 혼자서 해결 되지 않는다면 팀원에게 물어보는 문화가 있었다. 그래서 모든 팀원이 열린 마음으로 문제를 같이 생각해주고 해결했다. 그러면서 서로 많은 소통을 할 수 있어서 좋았다. 나는 적극적으로 도움을 청했고 응했다. 그 외에도 discord, slack을 통해 소통을 많이 시도했다.
문서화
- 내가 하려는 일에 대해 문서를 작성하려고 노력했다. issue나 notion에 내가 무슨 일을 하려는지 어떻게 구현하려는지 구체적으로 적으려고 했다. 하지만 시간이 갈수록 촉박해서 문서를 제대로 작성하지 못한 거 같다.