[회고]'푸디로그' 프로젝트를 마치고...

sangsang·2024년 4월 10일

푸디로그 프로젝트

목록 보기

4/5

📝 푸디로그 노션
프로젝트 소개 및 과정, 문서 등을 보실 수 있습니다.

'푸디로그' 프로젝트

작년 7월~10월 진행했던 '푸디로그'가 새롭게 리뉴얼 시도하면서 다시금 프로젝트를 재개하였다. 보통의 프로젝트는 단기간 작업 후 새로운 프로젝트를 작업하는 데 바빠 코드 리팩토링을 신경쓰지 못했었다. 하지만, 푸디로그는 사이드 프로젝트로 진행했던 프로젝트라 팀원들의 열정이 남달랐다. 기존 프론트엔드 팀원의 건강의 이유로 나가게 되어 새로운 팀원들을 뽑아 프로젝트 리뉴얼에 진행하게 되었다.

프로젝트 목표

기존 코드 리팩 + 웹 표준/웹 접근성 반영 (디자인 작업 기간 동안)
새로운 추가 기능 화면 구현 (+ 관리자 페이지)
전반적인 디자인 수정으로 인한 HTML, CSS 수정
테스트 코드 작성

팀원 선정

이전에는 백엔드와 프론트엔드가 기획,디자인까지 모두 담당하였는데, 본격적으로 앱을 리뉴얼하기 위해 디자이너 2명과 프론트엔드 3명을 뽑기로 했다. 프로젝트 팀원 공고를 올렸을 때 많은 분들이 지원해주셨다. 취준생부터 경력자까지 다양한 분들이 지원해주셔서 감사했다. 보내주신 깃허브와 포트폴리오를 세세하게 살펴보면서 프로젝트 스택과 방향성에 맞는 분을 총 3분 선정했다. 그러나, 본격적으로 프로젝트가 시작하고 일주일 뒤, 두 명의 팀원의 개인 사정으로 나가게 되셨다. 그렇게 팀원 한 분과 프로젝트를 진행하게 되었다.

기한 내 프로젝트를 해내기 위해선 최소 1명의 팀원이 더 필요하다고 판단했다. 부트캠프 동기 중 프로젝트 스택을 사용해본 사람을 찾아보았고, 다행히 적합한 분이 계셔서 함께 프로젝트를 진행하기로 했다.

역할 분담

푸디로그 기획부터 참여했기 때문에 푸디로그 앱에 대한 이해도가 높은 내가 팀장을 맡기로 했다. 리팩토링 목적으로 프로젝트르 진행해본 적이 없어서 어떻게 역할 분담을 할지 고민이 있었다. 가장 중요한 점은 '부트캠프'라는 테두리가 없는 사이드 프로젝트이기 때문에 팀원들이 끝까지 프로젝트에 참여하도록 이끄는 게 중요했다. 프로젝트의 참여도를 높이기 위해선 이 프로젝트를 통해서 팀원들이 얻어가고자 하는 것이 무엇인지가 중요했다. 그것은 대부분 프로젝트 경험을 통해 성과를 경험하는 것일 것이다.

그렇기 때문에 팀원들에게 담당 페이지를 자율적으로 선택하도록 하되, 주요한 페이지가 한 사람에게 쏠리지 않도록 분배했다. 다음으로 기존 코드 리팩토링 상황을 고려하여 서로 연관성 높은 페이지 단위로 담당을 나눴다. 처음부터 새롭게 프로젝트를 구현하는 게 아니기 때문에 누군가 작성한 코드를 이해하는 시간이 필요하고, 연관성이 높은 페이지를 맡으면 코드 이해가 더 쉽다고 판단했기 때문이다.

프로젝트 작업

웹 표준과 웹 접근성 반영
- WCAG(웹 콘텐츠 접근성 가이드라인)과 같은 접근성 표준을 배우게 됐고, 장애를 가진 사용자들이 웹사이트를 사용하는 방식에 대해 깊이 있게 이해함
기존의 데이터 패칭을 리액트 쿼리로 마이그레이션
- useQuery와 useMutation 훅을 별도의 훅 폴더에서 독립적으로 관리
  ► 코드의 재사용성과 유지보수성 향상
- 팔로우 기능을 useMutation으로 구현하여 자동으로 Query 무효화
  ► 적절한 시점에 자동으로 UI 업데이트
커스텀 훅을 사용해서 상태 로직이나 사이드 이펙트 관리
- useDebounce라는 커스텀 훅을 정의하여 자동완성 기능에 적용
  ► 사용자의 입력에 따른 서버 요청 줄임

느낀점

좋았던 점

전부터 적용해보고 싶었던 웹 표준과 웹 접근성을 반영해볼 수 있어서 좋았다. 또한, 데이터 패칭을 React Query로 마이그레이션하면서 직접 자동화 데이터 관리를 경험해볼 수 있었다.

아쉬웠던 점

프로젝트 초기에 팀원들의 개인 사정으로 인한 인원 이탈이 있었다. 이로 인해 작업 분배와 일정 조정에 어려움을 겪었고, 프로젝트의 효율성이 다소 저하되었다.
이러한 상황으로 인해 테스트 코드를 적용해보지 못한 부분이 아쉽다. 테스트 코드 더 공부해서 프로젝트에 적용하고 싶다.