[MIL-5] 240129 ~ 240325 프론트엔드 데브코스 회고 / 두 번째 팀 프로젝트

🚀 들어가며

드디어 기대했던 마지막 프로젝트를 진행했다. 마지막 프로젝트는 백엔드 개발자와 협업하는 팀 프로젝트였고, 프론트엔드 개발자 뿐만 아니라 백엔드 개발자와 소통하면서 정말 많이 배우고 성장할 수 있었다.

이번 팀 프로젝트 기간 동안의 경험들을 회고해보려 한다.

 

 

✅ 프로젝트 기간(1.29 ~ 3.25) 동안의 경험들

😧 한 달 전의 나

• 이미 구현된 API으로 프로젝트를 진행한 경험밖에 없었다.

 

😎 현재의 나

• 백엔드 개발자들과의 협업으로 기획부터 프로덕트 배포까지의 전반적인 프로젝트 싸이클을 경험할 수 있었다.
• 아직 API 개발이 완료되지 않은 시점에서 MSW를 활용하여 API 모킹하는 것을 경험할 수 있었다.
• 백엔드와의 협업을 통해 프론트엔드 개발에 필요한 API를 설계하고 받은 데이터를 가공하는 역량을 향상시킬 수 있었다.

 

 

✅ 팀 프로젝트

 

 

📌 테오의 구글 스프린트 방식으로 프로젝트 기획하기 

 

프로그래머스 데브코스의 '테오의 스프린트' 특강에서 배운 부분을 프로젝트의 기획 단계에 적용했다. 특강에서 배운 것처럼 원활한 협업을 위해 필요한 마인드(배려, 존중)와 장치(피그잼)를 가지고 각자의 아이디어를 자유롭게 적어나갔고, 즐겁게 프로젝트를 기획할 수 있었다. 매우 인상 깊었던 특강이었는데, 특강에서 학습한 내용을 프로젝트에 곧바로 적용할 수 있어서 좋았다. 

 

 

📌 내가 맡은 개발 파트 

▪︎ Input 공용 컴포넌트 개발

이전 팀에서 폼을 관리하기 위해 react-hook-form 라이브러리를 사용했었다. react-hook-form 덕에 쉽게 validation 처리를 할 수 있었다. 이번 프로젝트에서는 내가 이를 위해 Input 공용 컴포넌트를 개발했다. 필요한 스타일 속성만을 props로 전달받고, register 옵션을 props로 전달받아 개발자가 input 값의 validation 처리를 간편하게 할 수 있도록 개발했다.

 

▪︎ 페이지네이션 컴포넌트 개발

페이지네이션 버튼들

페이지네이션 - 페이지 버튼을 누르면 각 페이지의 데이터를 GET 요청한다.

프로필 페이지에는 사용자가 참여한 프로젝트, 좋아요한 프로젝트, 댓글단 프로젝트를 조회할 수 있다. 우선, 이것을 각 탭으로 구분되도록 개발했고, 해당 탭의 프로젝트들을 렌더링하도록 설계했다.

또, 사용자가 찾으려는 프로젝트가 몇 페이지에 위치해있는지, 얼마나 많은 프로젝트들이 있는지 파악할 수 있도록 페이지네이션 방식을 활용하자는 의견이 기획 단계에서 나왔었다. 이 의견을 수용하여 리액트의 Context API를 활용하여 페이지네이션을 구현했다. 현재 페이지 정보와, 총 페이지 수, 페이지 이동 핸들러를 Context에서 관리하도록 했고, 각 페이지에 해당하는 프로젝트들을 API 요청을 통해 조회하도록 코드를 작성했다.

이후의 팀원의 코드리뷰에서, Tanstack Query를 활용하여 페이지네이션을 구현하는 방식도 알게 되었고, 다음엔 Tanstack Query를 활용하여 페이지네이션을 구현해볼 계획이다.

 

▪︎ 프로필 페이지 개발

모바일 - 프로필 페이지

프로필 페이지는 앞서 개발했던 페이지네이션 컴포넌트를 활용했고, MVC 디자인 패턴을 적용했다. 리액트를 공부하며 컴포넌트 분리와 디자인 패턴에 대해 관심을 가지게 됐는데, 이전 프로젝트에서 배운 MVC 패턴을 이번 프로젝트에서 완벽하게 적용해보고 싶었고 성공적으로 MVC 패턴을 적용했다. 

또, PC에서 브라우저 창을 작게 띄울 때나 모바일에서도 화면이 무너지지 않도록 반응형으로 구현했다. 미디어 쿼리를 활용했고, 반응형에 공통적으로 사용되는 컴포넌트를 따로 분리하고, 화면 크기별로 폴더를 구분해서 관리했다. 개인적으로 개발 이후, 반응형과 컴포넌트 분리가 잘 되어있다고 생각했었는데, 코드리뷰할 때 팀원들도 칭찬을 해줘서 기분이 좋았다.    

 

▪︎ 프로필 수정 페이지 개발

프로필 수정 페이지의 모달들

프로필 수정 페이지는 많은 입력 필드가 필요했다. 어떤 방식을 활용해야 쾌적한 사용자 경험을 제공할 수 있을지 많이 고민했다. 
나는 닉네임 변경, 프로필 이미지 변경, 비밀번호 변경 기능은 모달을 띄우는 방식을 채택했다. 또, 백엔드와 회의를 통해 비밀번호 변경 API는 프로필 수정 API와 분리하는 방식으로 개발했다. 쾌적한 사용자 경험을 위해 고민하고 결정하는 과정에서 즐거움을 느꼈고, 완성된 결과물을 봤을 때는 내 의도대로 잘 개발이 된 것 같아 뿌듯했다.

또, 기존에는 상위 컴포넌트에 하나의 상태를 두고 기본 Input 태그만 사용하여 개발하다가, react-hook-form 라이브러리를 적용하여 리팩토링했다. react-hook-form을 사용했을 때, 리렌더링 효율과 편리한 validation 처리 등의 이점을 다시 한 번 체감할 수 있었다. 

 

 

📌 좋았던 점

사실, 백엔드와의 팀 프로젝트 이전에 걱정했던 부분 중 하나가 '개발 중 백엔드 팀과 트러블이 발생하게 되면 어떡할까?' 라는 걱정이었다. 주변 지인들한테 팀 프로젝트 진행 중에 감정이 상한 적이 많다고 들었었기 때문이다. 하지만, 프로젝트 초기에 '테오의 구글 스프린트' 방식을 적용하여 배려와 존중의 자세로서 프로젝트를 기획했고, 바쁜 와중에도 매일 아침 스크럼 때 서로의 헬스를 체크하며 단순하게 비즈니스 관계로만 대하지 않았다. 그 결과, 좋은 관계를 형성하게 되면서 프로젝트에도 더욱 시너지를 낼 수 있었다. 

힘들어도 배려와 존중의 자세로 무사히 팀 프로젝트를 완수한 우리 팀에게 고맙단 말을 전하며, 나에게도 스스로 칭찬할 부분을 3가지 정도만 골라서 써보려고 한다.

 

▪︎ 다양한 디자인 패턴 경험해보려고 노력한 점

MVC, HOC, Render Props, Custom Hook 등 다양한 디자인 패턴을 경험하려고 노력했다. 리액트를 공부하면서 깔끔하게 컴포넌트를 분리하는 것과 디자인 패턴을 적용하는 것에 관심이 생겼는데, 이전 팀에서 학습했던 MVC 패턴을 프로젝트에 적용했다. 또, 프로필 페이지 특성상 userId를 매 컴포넌트마다 전달 받았어야 했는데, 프로젝트 중간에 학습했던 HOC 패턴을 적용하여 리팩토링했다. 프로필 이미지 변경 모달에서는 이미지 드래그 앤 드롭 이벤트 핸들러, base64 파일 변환하는 로직을 커스텀 훅으로 분리했다.

▪︎ 쾌적한 UX를 위해 항상 고민한 점

미디어 쿼리를 이용하여 반응형 웹으로 구현했고, 사용자의 관점에서 생각하려고 고민했다.

반응형 웹으로 구현하기 위해 공통적으로 사용되는 컴포넌트를 따로 분리하고, 브라우저 크기별로 폴더를 구분해서 관리했다. 깔끔하게 반응형이 구현되어서 팀원들에게 좋은 피드백을 받을 수 있었고, 내 스스로도 만족한다.

프로필 수정 페이지의 경우 입력 필드가 많기 때문에 사용자의 관점에서 많이 고민했다. 고민 끝에 닉네임 변경, 프로필 이미지 변경, 비밀번호 변경 기능은 모달을 띄우는 방식을 채택했고, 한 페이지에 입력 필드가 밀집되지 않고 분산시킬 수 있었다. 

▪︎ 트러블 슈팅, 배운 것을 즉시 블로그에 정리한 점

이번 프로젝트에서 경험한 것들이 매우 소중했다. 특히, Context API를 활용하여 페이지네이션을 구현한 것과, Tanstack Query의 훅과 메서드를 학습한 것이 기억에 많이 남는다.

프로젝트를 진행하며 배웠던 내용들을 꾸준하게 블로그에 기록했던 덕에 더욱 성장할 수 있었다.  

 

 

📌 아쉬웠던 점

개발 일정을 너무 느슨하게 잡았던 탓에 마지막에 많은 작업을 하느라 고생했다. 다행히 요구사항을 모두 구현했지만, 다음에는 일정 관리를 더욱 타이트하게 하고, 기본 요구사항은 ASAP하게 개발해야겠다는 교훈을 얻었다.

또, 시간이 남는다면 MVC 패턴에서 FLUX 패턴으로 리팩토링해보려 했는데 하지 못했다. 디자인 패턴에 대한 공부를 더 하고 포스팅도 올리고 싶었으나 이것도 하지 못했다. 앞으로 프로젝트를 리팩토링하면서 차차 해볼 계획이다. 

 

 

 

✅ 블로그 포스팅 (ft. 트러블 슈팅)

프로젝트를 진행하면서 배울 수 있었던 것이 정말 많았다. 새롭게 알게 된 내용에 대해서는 개발하면서 블로그에 메모해두고, 시간이 날 때 내가 배웠던 것들을 복기하며 블로그 포스팅을 했다.

▪︎ [React] Context API와 상태 관리 라이브러리의 차이점

[React] Context API와 상태 관리 라이브러리 / Context API로 페이지네이션 구현하기

▪︎ [Tanstack Query] InvalidateQueries로 쿼리 무효화하기

[Tanstack Query / 트러블 슈팅] invalidateQueries로 쿼리 무효화 하기, new QueryClient()와 useQueryClient() 차이

▪︎ [Tanstack Query] useSuspenseQuery로 로딩 상태 처리하기

[Tanstack Query / 트러블 슈팅] useSuspenseQuery로 데이터 로딩 상태 처리하기

 

 

 

🛸 마치며

이번 팀 프로젝트를 끝으로 프로그래머스 웹 프론트엔드 데브코스 5기에서의 6개월 생활이 끝이 났다. 데브코스에서 과제를 수행하고, 프로젝트를 진행하면서 굉장히 많은 성장을 했고, 무엇보다 함께 동고동락하며 매일 함께했던 동료들과 늘 감사했던 멘토님들, 매니저님과 좋은 인연을 쌓은 것이 가장 큰 자산이 아닐까 싶다. 

앞으로는 그동안 진행했던 프로젝트들을 리팩토링하고, 블로그나 깃허브에 기록한 것들을 복기하는 시간을 가지고 본격적인 취업전선에 뛰어들려고 한다. 약 1년 넘게 준비하며 노력한만큼, 좋은 성과가 있길 바라며 회고를 마친다.