2주차 진행 내용
- 백엔드 모든 기능 100% 구현 완료 (1차 목표 구현 기준)
- 프론트 상품, 유저, 주문, 푸터 헤더 완료. 관리자 페이지 미완성(상품 수정, 삭제)
- CSS, HTML 개편
백엔드의 기능은 마지막 주 수요일을 기점으로 완료가 되었다. 그 때부터 나는 프론트를 도왔는데, 내가 그나마 잘 아는 게 CSS와 HTML이라 기본 HTML 페이지를 만들고 CSS를 수정해 나가기 시작했다.
또 나머지 백엔드 팀원들은 서로 힘을 합쳐 DB에 상품 등록해 홈페이지가 있어보이게 하거나, 백엔드 가독성과 유지보수가 용이할 수 있도록 코드스타일을 통일하는 작업을 했다.
프론트엔드 팀원들은 API를 연결하고, 계속해서 보이는 버그도 잡고 페이지구현이 끝나지 않은 부분을 계속해서 만들어 나갔다. 이 과정에서 나는 스트레스가 너무 심해 역류성 식도염 약을 달고 살았다. ㅠㅠ 2주차 때는 거의 매일이 밤샘이었는데, 마지막 쯤엔 정말 기적과 같은 속도로 작업했던 것 같다.
2주차 배운 점
- viewRouter 생성 필요
프론트 view의 html 파일의 기능 하나당 api주소 필요. 필요하다면 2개, 3개를 같이 쓸 수도 있다.(나는 html페이지 하나당 api기능 하나만 넣을 수 있는 줄 알았다) - 프론트와의 협업이 정말 정말 정말 중요하다
팀플을 하다보면 프론트가 어떠한 작업을 하고 있고, 어디쯤 와있는지 <> 백엔드가 어떠한 작업을 하고 있고, 어디쯤 와있는지를 몰라서 삽질?! 하는 경우가 꽤 많다. (예, api명세서를 갈아 엎는다.. DB테이블을 갈아엎는다 등..) => 이걸 조기에 잡으려면 소통을 정말 많이 해야된다는걸 배웠다. - 결제 이놈 쉬운일이 아니구나?!
결제까지 구현하려 했으나 시간부족의 문제로 포기했어야 했는데 정말 아쉬웠다. 생각보다 굉장히 까다로웠다. 결제가 청구되지 않는 토스 결제 위젯을 사용하려고 했는데, 이 부분도 꼭 다시 구현해보고 싶다. - 예외처리는 다다익선
프론트에서 막아도 쿼리로든, 파람으로든, 바디로든 사용자가 예외처리를 뚫고 올 수 있는 방법이 무궁무진함을 깨달았다. (흑흑 제발 의도대로 움직여줘) 근데 그렇게 의도대로 움직이지 않고 들어와도 백엔드에서 예외처리로 에러를 반환할 때.. 쾌감 말로 다 못해..
트러블슈팅
발생한 이슈들
- 장바구니(프론트)에서 넘겨주는 금액과 상품(DB)의 금액이 맞지 않는 경우가 발생. 프론트에서 조작된(잘못된) 금액을 넘겨줄 경우 실제 상품의 금액과 다르게 주문이 생성되는 이슈가 발생했다.
// 수정 전
let totalPrice = 0;
let totalDiscount = 0;
// 프론트 카트(orderItems)에서 상품별 금액 및 할인율 계산
for (const item of orderItems) {
totalPrice += item.price * item.quantity;
totalDiscount += item.price * (item.discountRate / 100 || 0);
}=> 자체적으로 DB의 productModel을 활용해 상품의 할인율과 가격을 확인 후 가격이 일치하지 않으면 에러반환 하는 코드로 수정했다.
// 수정 후
let totalPrice = 0;
let totalDiscount = 0;
// 프론트 카트(orderItems)에서 상품별 금액 및 할인율 계산
for (const item of orderItems) {
totalPrice += item.price * item.quantity;
totalDiscount += item.price * (item.discountRate / 100 || 0);
}
// 디비에서 가져온 가격으로 계산된 totalPrice
const dbTotalPrice = await calculateTotalPrice(orderItems);
if (totalPrice !== dbTotalPrice) {
throw new Error("주문 가격이 일치하지 않습니다.");
}
function calculateTotalPrice(orderItems) {
let totalPrice = 0;
for (const item of orderItems) {
totalPrice += item.price * item.quantity;
}
return totalPrice;
}성과
정말 마지막 4일을 남기곤 사일 내내 총 12시간도 못 잤던 것 같다. 내가 팀장이라서 책임감도 컸고, 팀 프로젝트가 처음이라 너무 모르는게 많아 팀원들에게도 항상 미안한 마음이었다. 독하게 팀원들에게 이거까진 끝내셔야 한다. 끝났으면 같이 보자. 등등 나름의 압박감?! 을 많이 심어줬던 것 같다.
그래도 다들 너무 잘 끝내주고 열심히 해줘서 우수상이라는 성적을 거두었다. 사실 수상은 생각지도 못했는데, 실제 서비스 같은 느낌이 들어 좋았다라는 평가를 받았다. 페르소나를 정확하게 설정하고 나중에 CSS를 손 볼때도 디자인을 최대한 organic하고 fresh한 1인 가구 식품 쇼핑몰의 느낌을 내려고 노력했는데 그 느낌이 잘 전달되었던 것 같다.
🎬시연영상
https://www.youtube.com/watch?v=kcZpc4ML3cU
❓프로젝트가 더 궁금하다면?
https://early-flock-0c8.notion.site/HOLO-1e2ac586964241efa6f4b2add8f942c1?pvs=4
