혼자서 공부하다가 팀 프로젝트를 해보고 싶다는 생각에 Okky 커뮤니티를 둘러보다 프론트엔드 팀원을 구한다는 글을 보고 지원해서 포트폴리오 메이커라는 서비스를 만드는 팀원으로 합류하게 되었다.
총 인원 5명 (BE: 2 / FE: 3) 으로 진행되었다.
서비스 내용
취업을 준비하면서 자신의 이력서를 객관적으로 판단하기 힘들다는 원인으로 제작하게 되었으며, 포트폴리오를 직접 만들고 게시판을 통해 자신의 포트폴리오를 현업자들에게 평가 받을 수 있는 서비스
1 주차
- 서비스 기획에 대한 협의
팀장님의 아이디어로 기획된 프로젝트라서 아직 확실한 기획이 나오지 않았었다. 추상적으로만 기획이 되어 있었는데, 이 부분에 대해서 팀원들과 함께 온라인(Google Meet)을 통해 의논한 후 기획의 방향을 잡을 수 있었다.
- 소통 방식 협의
소통 방식을 정할 때는 첫째로 협의한 내용이 기록이 되어 있었으면 했고, 둘째로는 FE와 BE가 서로 말하거나 내용이 겹치게 되면 헷갈릴 수 있어서 분리되어 있지만 같이 공유가 가능했어야 했다. 협의 끝에 현업에서 자주 쓰이는 Slack으로 소통을 하기로 결정을 했다.
- 회의 시간 협의
회의는 주에 2번을 진행하기로 했었고, 매주 목요일, 일요일 저녁 8~10시에 진행을 했었다. 회의 시간에는 서로 각자 작업한 부분에 대해서 정리한 후 팀원들에게 설명을 하기로 했다. 서로의 작업 범위를 잘 파악하고 있기 위해 이러한 방식의 소통을 진행 하였다.
- 사용할 기술 스택과 서로 개발할 범위 분리
서로 사용했던 기술들이 달랐고 알고 있는 범위가 달랐다. 사용할 기술들을 정리하고 각자가 서로 부족한 기술에 대해서는 공부를 하면서 진행하기로 하고 각자가 개발할 범위를 나눴다.
-
프로젝트 컨벤션 협의
Git 커밋 전략은 많이들 사용하고 있는 Git-Flow 커밋 전략을 사용하기로 하였다.
Notion 에 정리한 Git Flow 전략javascript 코딩 컨벤션은 Javascript코딩 컨벤션을 참고해서 작성하기로 했다.
그 외에도 컨벤션과 진행 방식은 노션에 정리해두고 작업하기로 의견을 모았다!
1 주차는 협의하는 시간으로 주로 썼었던 것 같다. 혼자서만 작업하다가 협업을 진행하니 서로 맞춰야될 부분도 있고 지켜야 할 부분도 있다보니 혼자 작업하는 것 보다는 까다롭다고 느껴지면서도 한 번만 맞추고 나면 작업을 진행하는 동안에는 서로 도움도 많이되고 작업 속도도 혼자 진행하는 것과는 비교도 안되게 빨랐다.
2 주차
2주차에는 본격적으로 개발에 착수했다. FE에서 사용된 개발 스택과 버전은 아래와 같다.
- React.js (18.0.0)
- Typescript (4.6.3)
- React-Router (6.8.1)
- Axios (1.3.3)
- Tailwindcss (3.2.6)
- React-Query (4.24.10)
- Zustand (3.7.2)
- Framer-Motion (9.0.3)
내가 작업을 진행한 부분은 아래와 같다.
- 유저 정보 페이지 (CRUD)
- 게시판 상세 페이지 (RD)
- 댓글 (CRUD)
Figma 활용
디자이너 없이 작업을 진행하다 보니 전체적으로 디자인이나 레이아웃이 통일성이 없어지는 것 같아 Figma를 통해 논의 했던 내용들을 정리하고 와이어 프레임으로 레이아웃을 구성해줬다.
Slack 활용
작업하면서 코드 공유와 참고할 수 있는 링크를 공유하고 작업 범위를 서로 인식할 수 있게 소통을 Slack을 통해 꾸준히 진행 하였습니다.
코드 리뷰
FE 개발자들 끼리는 일주일에 2 ~ 3번 정도 코드 리뷰를 진행했었다.
Google Meet을 통해 화면 공유를 하면서 진행하였고, 팀원 분들 중 한 분이 비쥬얼 스튜디오 코드의 익스텐션에서 'Live Share' 를 사용해서 진행하자고 의견을 내주셨고, Live Share를 사용해서 코드 리뷰를 더 편하게 진행했다.
나는 Live Share를 처음 써보지만 사용법은 그렇게 어렵지 않았고 한 사람의 share를 키고 링크를 공유하면 그 링크를 통해 그 사람의 비쥬얼 스튜디오에 접속할 수 있게된다. 한 비쥬얼 스튜디오 코드에서 3명이 동시에 작업하고 코드 리뷰를 진행하하면서 리팩토링하니 시간 가는 줄 모르고 3~4 시간은 기본으로 진행 했었던 것 같다.
3 주차
3주차에는 내가 담당한 작업들을 Axios를 사용해서 실제 데이터를 뿌려주고 state, props로 컴포넌트들의 상태 관리를 했었다.
확실히 상태 관리하는 라이브러리를 따로 사용하지 않으니 굉장히 사용하기 까다로웠다.
현재 axios로 제작한 부분은 React-Query를 사용해서 전체적으로 코드를 리팩토링 할 예정이다.
BE와 협업
BE 분들과 API 관련해서 소통을 할 때는 Postman Document를 주로 사용했으며 데이터 관련해서 데이터베이스 모델을 확인 할 때는 ERD Cloud를 제공해주셔서 이해하기 편했던 것 같다.
참고: 포트폴리오 메이커 PostmanDocument
마무리 작업 및 배포
기간을 4주로 나눠서 잡았었는데, 팀원 분들 모두가 너무 열정적이셔서 생각보다 빠르게 끝나버렸다.
마무리 작업으로 사용하지 않는 import나 의미없는 코드 및 console.log를 전부 제거해주고 메인 브랜치에 병합 후 배포하였다.
- 회원가입
- 로그인
- 내정보
- Portfolio page - 1
- Portfolio page - 2
- Board page - 1
- Board page - 2
4주 기간의 프로젝트를 3주 안에 끝내버린 열정적인 팀원 분들께 박수👏
