한 달간의 팀 프로젝트가 끝났다! 🥳
기획부터 디자인, 개발, 배포까지 제대로 된 프로젝트를 처음 경험해본 한 달이었다. 특히, 프론트 개발자들과의 협업이라니!
어떤 프로젝트를 만들었는가?
Brewers
모각코를 하기 좋은 카페를 공유하고, 모각코 인원을 모집할 수 있는 커뮤니티 서비스를 계획하고 개발했다.
기획
브레인스토밍으로 각자 다양한 아이디어들을 적어보았다. 마지막에는 IT 관련 자료 추천 SNS, 밴드 모집 SNS, 노마드코더 SNS, 프롱이 친밀도 SNS로 추려졌는데 각 주제에 대한 한계점과 주요 기능들을 정리해보면서 가장 우리에게 적합하다고 생각되는 노마드코더(카공족) SNS를 주제로 정하게 되었다.
디자인
이전에 논의한 대표 기능들과 페이지를 기반으로 디자인을 해보신 팀원분께서 큰 틀을 잡아주셨다. 각자 원하는 대표 색상을 정해와서 투표를 통해 메인 색상을 정하고 figma로 세부적인 디자인을 진행했다. 세부적인 디자인은 공통 컴포넌트를 위주로 배분해서 디자인을 진행했다. figma를 오랜만에 써봐서 그런지.. 어색했지만 그래도 디자인은 예쁘게 나온 것 같다.
기술 스택 & 프로젝트 컨벤션 정하기
CSS 라이브러리, 번들러, 상태관리, HTTP, Storybook의 사용 유무, 패키지 매니저 등에 대해 팀원이 단체로 회의를 진행했다. 팀장님이 논의할 것들을 미리 정리해두고 오셔서 미리 사전조사를 해온 덕분에 회의는 순조롭게 진행되었다. 팀원들 모두 원하는 방향이 비슷해서 쉽게 정할 수 있었던 것 같다. 의견이 갈리는 부분은 다수결로..! (팀원이 5명이라 다행..)
이번 회의를 준비하면서 평소에는 잘 몰랐던 다양한 기술 스택을 알아가고 장단점을 비교해보는 시간을 가져서 좋았다.
컨벤션 같은 경우 각자 좋다고 생각하는 것들을 가져와서 의견을 내고, 팀원이 동의를 하면 바로 적용을 하는 방식으로 진행했다. 브랜치 전략같은 부분은 내게 생소했던 부분이였는데, 팀원이 알려준 git flow, github flow, gitlab flow를 짧게나마 공부해보고 이 프로젝트 단위에 적합하다고 생각하는 gitlab-flow를 기반으로 개발하기로 진행했다.
본격적인 개발 외에 커밋 규칙, 네이밍, 폴더 구조 등 여러가지 논의할 사항이 넘쳐나는구나!! 를 느꼈다.
팀 문화
우리 팀 문화는 Agile 하게 진행하고, 여러 번의 짧은 스프린트로 개발을 진행하자! 였다.
각 스프린트마다 디자인 완성이나 공통 컴포넌트 완성 등의 작은 목표를 정하고 3~4일 정도로 진행했다.
개발
내가 맡은 것은 크게 Axios 인터셉터 적용 & 로그인 로직 구현, 공통 컴포넌트 구현, Header 구현, Feed 페이지, Post 페이지 구현이다.
Axios 인터셉터 적용 & 로그인 로직 구현
토큰 인증이 필요한 요청을 할 때 헤더에 토큰을 넣어주는 것을 반복적으로 작성하는 걸 피하기 위해 Axios 인스턴스를 생성하고, 요청 인터셉터를 추가했다.
팀원분께서 예외처리, 불필요한 코드에 대한 피드백을 주셔서 리팩토링도 진행했다.
공통 컴포넌트 구현
가장 기억에 남는 컴포넌트는 드롭다운 컴포넌트이다. 어떻게 open과 close 상태를 관리할 것인가.. 에 대한 고민이 있었다. 결국에는 useDetectClose 라는 hook을 만들어 useState를 사용해 상태를 저장하고, 전역에 클릭 이벤트를 사용해 해당 드롭다운이 클릭됨을 감지해서 open/close 가 작동되게 구현했다. PR을 작성한 이후 팀원분께서 리뷰에 컴파운트 패턴을 사용해봐도 좋을 것 같아요 라는 의견을 주셨는데 개발 일정때문에 컴파운드 패턴으로 리팩토링을 해보지 못한 아쉬움이 남는다.
Header 구현
로그인&로그아웃 상태일 때 다른 내용이 보이고, 반응형!! 으로 구현을 해보았다. QA때 너무 긴 닉네임일 경우 글자가 깨지는 현상이 발견되어 이것도 리팩토링을 진행했다.
Feed 페이지, Post 페이지 구현
가장 많이 애를 먹었던 부분! 초반에 어떤 props를 받아올지 구체적으로 정해놓지 않고 개발을 했어서, 중간중간에 props를 자주 수정해야 했다.. page props를 수정하니 그 아래 컴포넌트들도 전체를 수정해야 하는 상황이 자주 발생해서 다음부터는 받아올 props를 구체적으로 정하고, 꼭 필요한 props만 받아오도록 미리 설계를 철저히 해야겠다고 생각이 들었다.
FeedPage에서는 생각보다 구현해야 할 게 많았다. 내가 맡은 부분 구현이 늦어질 것 같았는데 먼저 끝낸 팀원분들이 나서서 도와주셔서 완성해낼 수 있었다.
팀 프로젝트를 마무리하면서 배운점
- 내 진행상황과 고민되는 점을 적극적으로 공유하기!
혼자 계속해서 고민하는 것보다 팀원과 공유하고 의견을 나누고 도움을 받는 게 더 빠르다는 걸 절실히 느꼈다 - 예외처리!!! 늘 신경쓰기
나중에 계속 고치지 말고 사전에 신경써서 구현하자 - 리팩토링 시간을 늘리자
잘 구현했다 생각해도 늘 고칠 게 나온다..
아쉬웠던 점
부족했던 QA시간과 리팩토링
QA때 고칠 부분이나 오류들이 많이 발생했고, 마감 전까지 계속해서 리팩토링을 진행해야했다. 나중에 프로젝트를 진행할 때는 일정을 잘 짜고 리팩토링 시간에 많이 투자해야겠다.
과연 주제를 잘 완성했는가?
우리는 공부하기 좋은 카페 정보를 공유하고, 모각코 인원을 모집할 수 있는 커뮤니티를 제공하는 것인데 이 두가지 기능을 특정되게 개발하지 못했다. 시간 관계상 주제가 명확히 드러나지 않은 통합적인 SNS 프로젝트가 결과물로 나온 것 같아 아쉽다.
한 달을 마무리하며
팀과의 협업에 대해 많이 배웠다. 프로젝트 계획부터 디자인, 개발, 배포까지 한 흐름을 경험해 볼 수 있어서 값진 한달을 보낸 것 같다.
무엇보다도 좋은 팀원분들과 함께여서 많이 성장할 수 있었다.
