지난 2주간(21.12.27. ~ 22.01.07.)은 처음으로 팀 단위 구성으로 프로젝트를 진행했다.
아직 프론트엔드쪽으로도, 백엔드쪽으로도 미숙했기 때문에 시작하기 전부터 너무 겁을 먹었지만 어떻게든 해낸 2주였던것 같다.
프로젝트 소개
이번 프로젝트는 독자적인 페이지를 만들기보다는, 상용 서비스를 하고 있는 사이트를 클론코딩하는 것을 목표로 했다.
팀원들의 많은 의견들이 있었지만, 그 중에서도 멘토님들이 선정해주신 주제는 바로 마플샵이었다.
마플샵은 유튜브 크리에이터들의 굿즈를 판매하는 페이지였고, 첫 인상은 UI가 깔끔해서 좋았다.
역할
팀원은 총 5명이 있었고, 이번 프로젝트는 프론트엔드 / 백엔드 과제를 모두 하나씩 맡아야했다.
우선 역할을 나누기 전에 팀원들과 마플샵 페이지를 보면서 과제를 나누어보았고, 멘토님이 한 번 다듬어주어서 확실하게 과제를 나눌 수 있었다.
프론트엔드
- Top, Nav, Footer 컴포넌트
- 회원가입, 로그인 컴포넌트
- 상품 리스트 컴포넌트 ✨
- 상품 상세 페이지 컴포넌트
- 이미지 슬라이드
- 장바구니 컴포넌트 ✨
백엔드
- 회원가입, 로그인 API
- 카테고리 API ✨
- 상품 정렬 API > 이후에 리스트, 카테고리 API와 병합
- 상품 리스트 API
- 상품 상세 페이지 API
내가 맡은 업무는 상품 리스트, 장바구니 컴포넌트와 카테고리 API였다.
카테고리 API는 비교적 간단했기 때문에 수월하게 진행할 수 있었지만,
상품 리스트, 장바구니 UI는 생각보다 기능이 많이 있어서 어려웠다
내가 구현한 UI 기능은 완벽하지 않지만 아래와 같다.
- 모달창 속 카테고리별 필터링 기능
- 백엔드에서 재고수량을 파악해 10개 이하일 때 재고수량 고지 및 품절 시 고지하는 기능
- 좋아요 버튼
- 카트에 담긴 아이템이 있을 때와 없을 때의 페이지 구분
- 카트에 담긴 아이템 가격 합산 금액 출력
- 카트에 담긴 아이템 제거 기능
협업
역할을 분배한 뒤, 회의를 통해 팀 내부의 컨벤션도 정하고 스케쥴도 칸반보드로 관리하여 최대한 애자일하게 작업하려고 노력했다.
대략적인 타임라인은
프론트/백 초기세팅 > 모델링 > DB 데이터 취합 > API 구현 작업 > UI 구현 작업 > 마무리
로 진행되었고 굵직한 작업은 2-3일 단위로 스크럼방식을 이용해 작업을 진행했다.
매일 아침 팀원들과 회의를 진행하면서 서로의 업무 진행정도나 어려운 점을 공유하여 해결하려고 노력했다.
어떻게 하다보니 내가 팀을 주도적으로 이끌게 되었는데, 팀원분들이 잘 따라와 주셔서 팀워크가 좋았다고 생각한다 👍
뿌듯한 코드
이번에 처음으로 필터링 기능을 구현해보면서 useLocation, URLSearchParams 같은걸 써보게 되었다!
// ProductList.js
const useParams = () => {
return new URLSearchParams(useLocation().search);
};
const query = useParams();
useEffect(() => {
fetch(
`http://localhost:8000/products/list?categoryId=${query.get(
'categoryId'
)}&subCategoryId=${query.get('subCategoryId')}&sortWord=${query.get(
'sortWord'
)}`,
{
method: 'GET',
headers: { 'Content-type': 'application/json', mode: 'cors' },
}
)
.then(res => res.json())
.then(data => {
setListData(convertToMainImgList(data));
});
}, [query]);
// CategoryModal.js
<Link to="?categoryId=1">
<button className="unclickedBtn">전체</button>
</Link>
<Link to="?categoryId=1&subCategoryId=1">
<button className="unclickedBtn">패딩</button>
</Link>
<Link to="?categoryId=1&subCategoryId=2">
<button className="unclickedBtn">후드/집업</button>
</Link>
<Link to="?categoryId=1&subCategoryId=3">
<button className="unclickedBtn">티셔츠</button>
</Link>
뭔가 아래 모달창에서 map 매서드를 이용하면 더 편하게 할 수 있을것 같은데 리팩토링 기간 동안 방법을 찾아봐야겠다.
결과물
다른 팀원분들도 고생했지만,
내가 구현한 기능만 보여주는게 맞는 것 같아서 내가 구현한 기능만 움짤로 만들어보았다.
아쉬운 점
협업 과정에서 약간의 아쉬운 점을 꼽자면,
첫번째로는 가끔씩 일어나는 미스 커뮤니케이션.
아무래도 실제로 만나서 회의하는게 아니라 줌을 통해서 회의해서 그런지 가끔씩 미스 커뮤니케이션이 일어났다. 오프라인이었다면 이런 일을 줄일 수 있을 것이라고 생각은 하지만, 팀원들과의 소통에 더 노력을 기울였어야했다.
두번째로는 깃이 어려웠다.
브랜치라던지 푸시, 풀, 머지 ... 분명히 배우긴했는데 실제로 사용해보니 잘 되다가도 커밋한 시점이 어긋난건지 오류가 발생해서 풀이 안된다. 코드 작성할 시간도 부족한데 깃이랑 씨름하고 있으니 미칠노릇이었다 🤣
세번째로는 초기세팅에 공을 많이 들이자!
물론 프로젝트 시작할 때 컨벤션은 정했었지만, 각자 작업했던 API, UI를 하나로 합치는 과정에서 컨플릭트가 너무 많이 일어나서 그걸 뜯어 고치는것도 시간이 꽤 걸렸던것 같다. 앞으로는 컨벤션뿐만 아니라 라우팅하는 것까지 초기 세팅에 포함시켜야 될 것 같다.
이외에도 발표나 발표자료 만드는 것을 내가 했었는데, 나의 독단으로 다른 팀원들의 성장기회를 뺐는게 아닌가 싶기도 했었다. 다음 프로젝트에서는 더 세부적으로 업무 분배를 해야겠다.
개인적으로 아쉬운 점은
자바스크립트 공부를 열심히 해야될 것 같다. 아직도 객체관련 메서드는 약한 것 같아서 더욱 더 갈고 닦아야 될 것 같다고 뼈저리게 느꼈다. 리액트에서는 map 이나 filter 를 많이 사용하는 것 같은데 아직 익숙하지 않아서인지 내가 원하는대로 코드를 짜기가 어려웠다. 좀 더 공부해서 조금이라도 익숙해지면 좋을 것 같다 🤯
