개발상회(dev market)
⭐️배민상회 클론코딩 프로젝트⭐️
FE: 하서율, 함정석, 정원호, 임승민
BE: 최종민, 정세한
프로젝트 기간: 2022.08.16 ~ 2022.08.26
프로젝트 시작 전 나, “임승민”
처음 프로젝트를 시작하기 전 코드를 치는 것이 개발에 전부라고 생각했다. 그렇게 난 아무런 고민도 하지않고 코드를 쳐가며 완성하고자 노력하였고, 팀원들에게 빨리 결과를 보여주는 것이 개발자가 되기 위한 내가 할 수 있는 최선이라고 생각했다.
하지만 !!
그렇게 시작된 이번 프로젝트는 너무나도 다른 나를 볼 수 있게 되었고
많은 깨닳음을 준 프로젝트였던 것이다.
프로젝트를 시작한 나
프로젝트 중 장바구니 기능에서 전체 상품과 선택 상품을 나눠서 관리 해야 했던 부분은 나에게 ‘무엇이든 순서가 있다.’는 것을 느낄 수 있도록 하였다.
빨리 팀원들에게 완성된 결과를 보여줘야 겠다는 생각과 서투름이 합쳐져 기능의 구조를 잘 파악하지 못한채 개발을 진행하고 말았다. 그렇게 빨리 진행되가는거 같으면서도 끝에는 조금씩의 오류들이 주요 기능들에서 생겨나는걸 보면서 ‘아, 내가 하고 있는 방식이 잘못됐구나.’를 알고, 지금까지 만들어온 과정을 되돌아 보며 수정할 수 있었다.
문제의 그 코드다…
const singlePriceHandle = (newAmount, idx) => {
let newProductArray = [...product];
let newCheckedArray = [...checkedArr];
newProductArray[idx].amount = newAmount;
newCheckedArray[idx].amount = newAmount;
setCheckedArr(newCheckedArray);
setProduct(newProductArray);
setCountArr(newCheckedArray);
};이렇게 보니 정말 간단한 코드지만 나를 며칠동안 너무 힘들게 한 부분이다.
데이터를 담은 state에 바로 접근해서 amount를 수정을 하려 했으나 그리 간단히 수정 되지 않았다.
이 문제를 해결하면서 알게 된것은 state는 수정하는 개념이 아니라 업데이트 하는 개념이였던 것, 데이터를 담은 state를 복사하면 원본을 건들지 않고 수정이 간단하게 가능하단 점이였다.
전체상품 배열: product, 선택상품 배열: checkedArr
product는 화면에 보이는 상품이고 checkedArr는 가격에 반영되는 배열이다.
product의 amount만 올리니 화면에는 수량 반영이 되지만 가격에는 반영이 되지 않아 checkedArr도 amount를 주었다.
다 완성되어서 너무나 기뻤지만 그것도 잠시였다..
수량을 변경하는데 가격창에는 반응이 없었던 것이다..
useEffect(() => {
setCheckedPriceList(
checkedArr.map(checkedArr => {
return checkedArr.price * checkedArr.amount;
})
);
}, [checkedArr, countArr]);
useEffect(() => {
setCheckedProductTotal(
checkedPriceList.reduce((acc, cur) => {
return (acc += cur);
}, 0)
);
}, [checkedPriceList]);그렇게 나는,
useEffect와 state를 이용해서 수량이 변할 때 마다 리렌더링이 될 수 있도록 하여 수량을 변경할 때도 가격창에 반영될 수 있도록 하였다.
‘프로젝트는 결과가 아니라 진행하는 과정에서 무엇을 얻었는지가 가장 중요하다.’
프로젝트를 진행하던 중 멘토님께 질문을 하는 과정에서 답답한 마음을 얘기한 적이 있었다. 조바심에 달려왔던 나에게 멘토님께서는 “이 프로젝트는 결과가 아니라 진행하는 과정에서 무엇을 얻었는지가 가장 중요해요" 라는 말씀을 해주셨다.
문득 생각이 들었다. 이 프로젝트를 하면서 무엇을 얻었을까. 나는 단지 기능을 완성하는데만 급급했던 것이다.
처음 프로젝트를 시작할 때 나의 마인드는 정리보다 해결을 우선으로 했던 터라 문제를 해결하지 못하고 집에 갈때면 항상 자책하곤 하였다.
그 후 나는 새로 알게된 내용들을 정리하기 시작했고, 문제를 해결하지 못하고 집에 돌아갈 때도 “일단 내일 다시 생각해 보자. 내일은 더 좋은 로직이 생각 날거야.”라고 나에게 이야기하며 하루를 마무리하였다.
정말 어떤 날은 버스에서 문득 로직이 떠올라 급하게 메모장에 적어서 문제를 해결한 적도 있었다.
개발자는,
맡은 기능을 빠르게 개발하는 것도 중요하지만, 그 과정을 중요시하고 그 과정 속에서도 나만의 언어로 정리하며 건강한 마인드로 좋은 개발 습관을 가지는 것이 중요하다는 것을 알게되었다.
프로젝트를 끝낸 후의 나
프로젝트 시작 전 “10일동안 완성할 수 있을까?”가 가장큰 고민이였다. 하지만 정말 놀랍게도 팀원 모두의 힘을 합쳐 10일 안에 완성하였고, 모두가 성장할 수 있었다. 그렇게 되돌아 보니 혼자 했더라면 절대 완성하지 못했을 거 같다. (팀원 모두 감사합니다 !)
각자의 기능들을 모두 합쳐 완성된 모습을 봤을 때의 셀렘은 아직도 잊혀지지가 않는다.
나의 개발 인생에 있어서 가장 오래 기억에 남고 의미있는 소중한 경험으로 기억될거 같다.
