나위키 프로젝트 회고 2탄!
프로젝트를 진행하면서 절대 잊지말아야 할 것 하나
- 프로젝트 회고 2탄에서는 기능을 구현하기 위해 고민했던 값진 시간들을 저 스스로 기록하고 싶고 남겨두고 싶어서 제가 작성한 코드를 중심으로 회고를 작성해보려고 합니다.
상품 삭제
const cartDelete = productOptionId => {
setCartList(
cartList.filter(product => product.productOptionId !== productOptionId)
);
const beforeDeleted = cartList.filter(
el => el.productOptionId === productOptionId
);
fetch(`http://10.58.52.172:3000/carts/`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
Authorization:
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjoxMiwiaWF0IjoxNjY5MDI2ODA5LCJleHAiOjE2NzE2MTg4MDksImlzcyI6ImFkbWluIiwic3ViIjoiYWNjZXNzVG9rZW4ifQ.DhfgeERBkf4s7uin2NCCSLX2tFNcWXRs-vgMvY4InJs',
},
body: JSON.stringify({
cartId: [`${beforeDeleted[0].cartId}`],
}),
})
.then(response => response.json())
.then(result => {
if (result.message === 'cart deleted') {
alert('삭제가 완료되었습니다.');
getCartList();
} else {
alert('다시 시도해주세요!');
}
});
};cartList는 서버에서 받아오는 장바구니 상품 리스트이다.
삭제 버튼을 누르면 특정 상품을 제외한 상품들을 cartList에 담아주고 그 상품을 서버에 보내준다.
어떻게 하면 원하는 상품을 삭제할수 있을지, 화면에서 삭제된 상품을 제외하고 렌더링 시켜줘야 했는데 그 두가지 로직을 구현하는데 많은 시간을 고민하였다.
고민 끝에 filter함수를 사용해서 기능을 구현 할수 있었다.
선택 상품 삭제
const selectDelete = () => {
const afterDeleted = cartList.filter(
el => !checkItems.includes(el.productOptionId)
);
setCartList(afterDeleted);
const beforeDeleted = cartList.filter(
el => checkItems.includes(el.productOptionId)
);
const deleteCartId = beforeDeleted.map(el => {
return el.cartId;
});
fetch(`http://10.58.52.172:3000/carts/`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
Authorization:
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjoxMiwiaWF0IjoxNjY5MDI2ODA5LCJleHAiOjE2NzE2MTg4MDksImlzcyI6ImFkbWluIiwic3ViIjoiYWNjZXNzVG9rZW4ifQ.DhfgeERBkf4s7uin2NCCSLX2tFNcWXRs-vgMvY4InJs',
},
body: JSON.stringify({
cartId: deleteCartId,
}),
})
.then(response => response.json())
.then(result => {
if (result.message === 'cart deleted') {
alert('삭제가 완료되었습니다.');
getCartList();
} else {
alert('다시 시도해주세요!');
}
});
};장바구니에 여러 상품들이 담겨 있으면 선택한 상품들은 장바구니에서 삭제하고 선택하지 않은 상품들은 냅둬야 하는데 어떻게 하면 두가지 기능을 처리할수 있을까 고민하였고 각각 다른 변수에 담아서 기능을 구현 할수 있었다.
체크된 상품들을 담는 상태관리를 통해
첫번째로, 서버에서 받아오는 cartList와 filter함수를 통해 체크되지 않은 상품들을 걸러내고 includes를 사용해서 상품이 가지고 있는 각각의 고유한 아이디를 비교해서 상품들을 특정지을 수 있었다.
총 가격
const totalPrice = cartList
.filter(el => checkItems.includes(el.productOptionId))
.reduce((a, b) => a + b.quantity * b.price, 0);정말 짧은 코드이지만 생각보다 변하는 상품의 수량과 선택된 상품의 가격을 구해서 계산하는 것이 어려웠다.
그렇지만 구글링을 통해 reduce함수를 알게 되었고 MDN에서 계속 콘솔을 찍어보면서 함수를 사용해본 끝에 원하는 코드를 만들어낼 수 있었다.
프로젝트를 마치면서
이번 프로젝트를 진행하면서 정말 크게 배운것이 하나 있었다.
프로젝트 첫 플래닝 미팅을 하면서 기획방향을 못잡고 어떤 기능을 구현할지에 대해 초점을 맞추면서 회의를 진행했었는데 그러다 보니까 사용자 입장에서, 또 서비스를 준비하는 기업 입장에서 전혀 고려하지 못했었다. 멘토님의 조언을 통해서 우리는 프로젝트를 진행하면서 실제 사용자의 입장에서 흐름을 따라가야 하고 또 기업입장에서는 최대한 이익을 내기 위한 서비스를 만들어야 한다는 것이었다. 앞으로 내가 어떤 프로젝트를 진행하던지 제일 중요한 조언이라는 생각을 하게 되었다.
끝으로 프로젝트를 진행하면서 제일 기분이 좋았던 말이 있다. 같이 프로젝트를 진행한 팀원이 해줬던 말인데 호준님 저희 팀원들이 했던 말인데 다른건 몰라도 확실한거는 호준님이 동기중에서 프로젝트를 통해 제일 많이 성장한 사람일꺼라고 해줬던 말이다. 누군가에게는 정말 쉬운 장바구니 였을지 몰라도 기능을 구현하기 위해 정말 누구보다 열심히, 치열하게 고민했고 백엔드와 통신하면서 수많은 에러를 마주하고 해결했던 시간들이 분명 힘들고 어려웠지만 정말 값진 시간들이었고 성장하는 나를 보는 즐거움을 알게 되었다.
