🔖 1. 프로젝트 소개
프로젝트를 하기 일주일 전에 각각 1명씩 사이트를 추천하는 시간이 있었다.
그때 드랍이라느 사이트를 이번 처음 알게 되었고, 사이트를 처음 봤을 때부터 엄청 이쁘다고 생각을 했지만 설마 되겠어라는 마음으로 투표만 해놓았다.
그러고 나서, 클론 프로젝트 사이트와 팀원이 공개되었을 때, 드랍이라는 곳에 내 이름이 있었고 프론트 3명, 백엔드 1명 총 4명이서 프로젝트를 진행하게 되었다.
어서 빨리 진행해보고 싶은 마음도 있으면서 한편으로는 과연 할 수 있을까 라는 막막함도 있었던거 같다.
2. 사용된 기술
- HTML
- CSS/SCSS
- JAVASCRIPT
- REACT
3. 직접 구현한 기능들
- 로그인 및 회원가입
drop의 로그인과 회원가입 창 레이아웃이 매우 유사하여 컴포넌트 하나로 진행
- 로그인 클릭시 로그인창에 표시되는 텍스트등 데이터가 불러와 질수있게 설정
- 하나의 컴포넌트에서 로그인시 로그인url로 회원가입시엔 회원가입url로 연결 될수 있게 설정
- 아이디 유효성 검사 백엔드와 별개로 프론트엔드에서도 진행. 틀릴시 문구 표시
- 장바구니 및 상세구매페이지 구현
- 상품 삭제 버튼
- 상품 수량 변경 및 수량이 0이 될시 자동 삭제
- 각 상품의 총액은 프론트단에서 계산
- 상세 구매페이지
추가 구현 사항으로 결제기능이나 주소등 정보를 넣었을때 따로 값을 저장하지는 않음.
기존 장바구니에 있던 데이터를 불러와 나올수 있게 구현.
🔖 4. 고민많았던 부분
- 장바구니 수량 변경 및 수량이 0이 될때 자동 삭제 기능
const handleRemove = id => {
const newList = cartList.filter(el => el.id !== id);
setCartList(newList);
};
const quantityIncrease = id => {
setCartList(el => {
const result = el.map(listItem => {
if (listItem.id === id) listItem.quantity += 1;
return listItem;
});
return result;
});
};
const quantityDecrease = id => {
setCartList(el => {
const result = el.map(listItem => {
if (listItem.id === id) listItem.quantity -= 1;
if (listItem.quantity === 0) handleRemove(listItem.id);
return listItem;
});
return result;
});
};이번 프로젝트하며 가장 고민을 많이 했던 기능은 장바구니 수량 변경이였고 이 부분에 있어 많은 고민을 하게 되었다. handleRemove 함수는 기존 장바구니 리스트 삭제 버튼에 들어가는 함수로 수량이 0이 될시에도 실행될수 있게 사용 하였다.
cartlist state는 제품들이 담긴 state로 내부 element에 map을 사용하여 id값을 비교하여 수량을 변경해주는 방식으로 구현하였다.
5. 아쉬웠던 점
이번 프로젝트는 잘했던 부분보단 아쉬웠던 부분이 훨씬 기억에 많이 남는다. 그 이유로는 백엔드와 프론트엔드간에 소통의 아쉬움에 있다.
정확히 어떤 데이터를 주고 받을지에 대한 자세한 내용을 메모에 두지 않았었고 백엔드에서 발생된 문제들을 프론트엔드 팀원들은 프로젝트가 끝나갈 쯤에야 알 수 있었다.
우리는 프로젝트 간 데이터 통신을 원활하게 할 수 없었고, 마감 직전 mock data로 진행하게 되었다. 백엔드 한명의 문제라고는 생각하지 않으며 디테일한 소통을 통해 문제가 있는 부분은 빠르게 파악해서 같이 해결해 나가야 됐다고 생각한다.
6. 프로젝트를 마치고 느낀점
이번 프로젝트 초반만 하더라도 팀원들과의 소통보다 내가 할 일 먼저, 내 코드 한줄 더 라는 생각이 강했다. 팀 프로젝트에서는 내가 맡은 부분도 중요하지만 팀 단위로 일하게 되는 개발자로써는 큰 실수였고 앞으로 어떤 프로젝트를 하던 세세한 소통을 통한 원활한 진행이 내 1순위 목표가 될 것이다.
