메인 프로젝트 회고

Intro

부트캠프 파이널 프로젝트에 리액트 개발자로 참여했습니다. 4주 동안 제품 기획부터 디자인, 개발까지 전부 관여하다 보니 신경 쓸 부분이 많았어요. 하지만 FE 4명, BE 2명으로 이뤄진 팀원들과 각 분야에서 소통하는 법도 배우고 프로젝트의 라이프 사이클도 경험해볼 수 있었던 소중한 시간이었습니다.

Project: Tripagram - 🔗 배포, 깃헙

트리파그램은 인스타그램을 모티브로 한 여행 정보 공유 소셜앱입니다. 소개하고 싶은 여행지의 이미지, 주소, 관련 태그 등을 등록할 수 있어요. 사용자 편의 위주 UI/UX 디자인을 적용하기 위해 모바일 환경에도 대응할 수 있는 반응형 웹을 구축했습니다. Intersection Observer API를 활용해 데이터 fetching이 실시간으로 이뤄져 뷰포트 콘텐츠 전환도 자연스럽고 원하는 정보 검색도 가능합니다.

실제로 데모 데이때 많은 게스트분께서 저희 서비스를 즐기고 본인만의 꿀팁 정보를 직접 뽐내주기도 하셨어요.

저는 본 프로젝트에서 이미지 처리, 게시물/회원 정보 CRUD를 담당했습니다. 프로젝트를 마무리하면서 4주라는 기간 동안 느낀 점을 KPT 회고 방법론을 활용해 간략히 기록해보고자 합니다.

KEEP

• 기능을 직접 구현하며 얻은 자신감
  이미지 처리, 무한 스크롤 등 팀이 구현하기로 했던 주요 기능을 크리티컬한 버그 없이 완성했습니다. 팀원들 모두 처음 시도해보는 기능인만큼 버그 발생 범주를 최소화하고자 에디터 라이브러리 사용은 지양했는데요. 그 과정에서 createObject, fileReader, Intersection Observer 등 다양한 web API는 물론이고 Blob 타입, 옵저버 패턴과 같은 기초 개발 지식도 학습할 수 있었습니다. 부트캠프 과정에서는 알려주지 않았던 부분이라 기간 내에 끝낼 수 있을지 걱정되기도 했지만, 팀원들 모두 밤새 스터디하며 노력해 기능을 구현해낼 수 있어 뿌듯했네요. 앞으로도 계속 새로운 기능을 학습하고 적용하는 상황과 마주하게 될 텐데, 이번 경험이 앞으로의 개발 커리어에 큰 원동력이 될 것 같습니다.

• 이슈 공유를 통한 효율적인 작업 방식
  "업무 배분 - 깃헙 이슈 등록 - PR시 전원 리뷰 필수"를 기본 베이스로 각 팀원의 현재 진행 업무를 상시 파악할 수 있게 했습니다.
  사실 첫 프로젝트라 담당 파트만 작업하기에도 시간이 부족했던 게 사실입니다. 하지만 이런 부분이 없었다면? 각자 놓친 부분이 치명적인 버그를 유발했을 수도 있고, 시간에 쫓겨 맡은 부분만 개발하다 다른 파트는 전혀 모른 채 프로젝트가 끝날 수도 있진 않았을까 생각이 들기도 합니다. 그래서 이 부분은 추후 참여하게 될 프로젝트에도 꼭 적용하고 싶은 부분입니다.
  BE 팀원들과도 주 2회 전체 회의를 통해 각자 구현한 기능을 테스트해보며 프로젝트가 올바른 방향으로 나아가고 있는지 꾸준히 체크했습니다. 타임라인에 따라 잘 준비한 덕분에 과제 마감일 하루 전에 배포를 끝마칠 수 있었습니다.

PROBLEM

• 스파게티 코드로 인한 컴포넌트 분리의 어려움
  게시물 등록/수정 페이지에 이미지 처리 컴포넌트가 들어갑니다. 원래 이 부분이 설계 단계에서는 상향식 개발하는 거로 기획했었습니다. 하지만 잘 모르는 분야라 막개발 하다 보니 일단 하향식으로 개발 후 테스트를 거치며 컴포넌트를 분리해야 했습니다. 그러다 보니 forwardRef나 useImperativeHandle같이 예상치 못한 메서드를 많이 활용해야 했고 코드도 복잡해지고 개발 소요 기간도 예상보다 하루 이상 길어졌습니다.

• 잘 모르고 사용한 라이브러리로 인한 성능 저하
  key 값으로 랜덤한 id를 부여하기 위해 uuid를 사용했다가 불필요한 렌더링이 발생하는 문제가 있었습니다. 사실 마감일까지 원인을 발견하지 못했는데요. 특정 모니터 환경에서만 구별할 수 있는 깜빡임이 발생하는 문제라 (Elements 탭에서는 그냥 보임) 우선 기능만 완성한 채로 제출했습니다. 프로젝트 이후 팀원들과 따로 마련한 리팩토링 기간 동안 uuid는 http 요청이 있을 때마다 key가 새로 생성되므로 당연히 렌더링을 발생시킨다는 점을 처음 알게 되었습니다. 파일명을 활용해 고유 id를 지정해주니 깜빡임 현상이 사라졌습니다.

TRY

• 다양한 기술 스택 사용
  이번 프로젝트는 일정상 익숙한 Redux Toolkit과 styled-components만을 사용하는 것으로 의견이 모였습니다. 다음에는 기회가 된다면 recoil이나 tailwind CSS도 함께 사용해보려고 합니다. 그리고 TypeScript는 맡은 기능 구현만으로도 벅차서 학습할 겨를이 없었는데 앞으로는 작은 앱을 만들더라도 TypeScript로 개발해보는 습관을 지녀보려고 합니다.

마치며
이제 첫발을 내딛는 단계라 그런지 역시 부족한 부분이 정말 많았습니다. 특히 구글링하면 할수록 쏟아지는 정보를 보면서 배움에 끝이 없겠다는 걸 몸으로 느꼈습니다. 하지만 개념으로만 학습했던 부분을 팀원들과 머리 싸매며 실제 결과물로 만들어냈을 때의 성취감은 왜 개발이 재미있는지 알려주기에 충분헀습니다. 강사분들께서 왜 메인 프로젝트가 부트캠프의 꽃이라고 그렇게 강조하시는지 알 수 있었어요. 좋은 세상에 기여하는 개발자가 되는 그날까지 열심히 해보겠습니다 💪