앙골라(Angola)

By Yoon

2023-09-28

한 주제에 대해 사용자들이 A와 B 중 하나를 선택하여 각자의 의견을 공유하는 밸런스 게임 커뮤니티 플랫폼

프로젝트 소개

앙골라(Angola)는 한 주제에 대해 사용자들이 A와 B 중 하나를 선택하여 각자의 의견을 공유하는 밸런스 게임 커뮤니티 플랫폼입니다.

팀 구성: FE 5명
작업 기간: 2023.09.01 ~ 2023.09.27
기술 스택: React.js, TypeScript, Emotion, Recoil, React Query
핵심 기능

밸런스 게임 열람 및 작성 기능
자신의 의견 댓글 작성 및 포스트 좋아요, 유저 팔로우 기능
알림 및 검색 기능
마이 페이지와 유저 페이지 기능
유저의 기여도에 따른 레벨 기능

링크: 깃허브, 배포, 시연 및 발표

담당 역할

팀 리더(Team Leader)로 활동

프로젝트 기획, 디자인, 기능 개발에 적극적으로 참여하였으며, 전체적인 일정을 체계적으로 관리하여 정해진 기간 내에 기획했던 기능들을 구현 완료했습니다.

노션을 통해 프로젝트 자료들을 관리하고, 데일리 스크럼을 통해 팀원들의 업무 진행 현황이나 이슈들에 대해 지속해서 확인했습니다.

좋은 팀 문화 환경을 만들려고 노력했습니다.
프로젝트 기간 동기부여를 주기 위해 팀 목표와 개인 목표를 설정했습니다.
문제 상황 대처 규칙을 세워 문제 상황을 공유하는 것에 부담감을 느끼지 않도록 하고, 빠르게 대처할 수 있도록 했습니다.

담당 기능

1. 프로젝트 세팅

라이브러리 설치를 통해 dependencies 와 devDependencies 차이를 명확히 구분했습니다.

프로젝트에 Eslint와 Prettier를 적용하기 위해 공식 문서를 직접 공부 하면서 프로젝트 환경 설정을 했습니다.

폴더 구조 가독성을 위해 절대 경로를 설정했습니다.

2. User, Profile api 연동

useQuery와 useMutation을 직접 API에 결합하여 API를 사용하는 곳에서 서비스 로직을 분리했습니다.

LinkButton 공통 컴포넌트의 Props 들에 대한 고민을 하면서 구현했습니다.

현재 페이지를 감지하여 공통 메뉴, 로그인 사용자 메뉴, 비로그인 사용자 메뉴를 나누어 조건부 렌더링을 구현했습니다.

4. 유저 페이지, 마이 페이지 구현

유저 페이지

프로필, 닉네임, 레벨, 받은 좋아요 수, 팔로워 수, 팔로잉 수, 작성한 포스트 보여주고, 팔로우 추가 / 취소 기능을 구현했습니다.

마이 페이지

비밀번호 변경, 닉네임 변경, 프로필 이미지 변경, 로그아웃 기능, 포스트 삭제 기능을 구현했습니다.

React Router Dom 이용해 User Id와 로그인 User Id 가 같으면 마이페이지로 이동되고, "replace: true"를 사용해 뒤로가기 접근을 방지했습니다.

useEffect와 refetch를 이용해 사용자 데이터를 갱신했습니다.

새로운 유저 페이지 진입 시에 전 유저 페이지에 대한 잔상 처리를 Id 값의 비교를 통해 early return으로 Id 값이 같으면 페이지 렌더링, 다르면 Loading 스켈레톤을 보여주게 구현했습니다.

느낀점

처음으로 FE 팀원들과 팀 프로젝트를 진행했습니다.

프로젝트를 진행하면서 처음으로 팀원들과 함께 의사소통하면서 협업이라는 것을 배우게 됐습니다.

또한 팀장이라는 중요 직책을 갖게 되면서 리더십과 책임감을 기를 수 있었습니다.

팀 규칙과 코드 컨벤션 등 같이 의논 하면서 5명이지만 1명인 것처럼 코드 작성을 하려고 노력했습니다.

비밀번호, 닉네임에 대한 유효성 검사 함수를 작성해 보면서 예외 처리에 대한 고민을 깊게 해보는 시간을 가졌습니다.

컴포넌트 내부의 비즈니스 로직을 훅으로 분리하여 관심사를 분리 하는 방법을 배웠습니다.

앙골라 프로젝트를 진행하면서 부족했던 점을 회고해 다음 프로젝트에 개선해 보고자 합니다.

개선점

1. 고려하지 못한 API 명세

API같이 팀원들이 공통으로 사용하는 코드에 실수하면 팀원들도 같이 다시 코드를 변경해야 합니다.
React Query의 useQuery에 select 옵션이 있는데, queryFn을 통해 반환받은 값을 가공, 정제할 수 있는 옵션입니다.
User API를 구현하는데, 특정 data가 필요 없다고 느껴서 select 옵션을 사용해 필요한 data만 받아 올 수 있게 구현하고 싶었습니다.
이는 성급한 판단이었습니다. 다른 팀원은 그 특정 data가 필요했습니다.
의사소통이 제대로 안 된 것도 있지만 어떤 data를 받게 될지 모르기 때문에 API 명세는 맘대로 건들면 안 되겠다고 느꼈습니다.
이런 실수가 반복되면 개발을 진행하는 데 있어서 블로킹이 될 수 있기 때문에 다시 한번 경각심을 가지게 되었습니다.

2. QA를 통해 배운점

이번 프로젝트를 진행하면서 가장 배운 점이 많은 부분입니다.
팀원들과 대략적인 구현을 끝내고 1차 QA를 진행했습니다.
각자 맡은 부분을 제외한 나머지 부분을 분배받아 유저스토리 작성한 것을 기반으로 QA를 진행했습니다.
생각보다 발견하지 못하거나 인지하지 못한 부분이 많았습니다.
이러한 엣지 케이스를 수정하다 보니 새롭게 공부한 내용도 많았고, 어떤 부분도 고려하면 좋을지 배우게 된 것 같습니다.
배포 기간까지 얼마 남지 않아서 조급한 마음도 들긴 했지만, 하나씩 수정 사항들을 해결하면서 뿌듯함도 느꼈습니다.