[프로젝트] 1차 프로젝트 회고 (KuKuKKaKKa 프로젝트)

 

 

 

 

 

끝났다. 1차 프로젝트

 

 

 

 

 

 

 

 

 

1.  🎞 프로젝트 소개

 

꾸꾸까까 FrontEnd Github

GitHub - xxziiko/justcode-4-kukukkakka-front

 

 

 

꾸꾸까까 BackEnd Github

GitHub - xxziiko/justcode-4-kukukkakka-back

 

 

KuKKa(꾸까) 는 꽃다발 구독 및 배달 서비스 플랫폼이다. 

우리는 페이지의 기획과 디자인만을 모티브로 하여 개발을 했다. 

 

 

 

 꾸까페이지를 선정한 이유는

• 꽃이 주는 예쁨이 프로젝트 내내 스트레스를 완화 시켜줄 것 같았다. (꽃을 계속 보면 스트레스 받다가도 눈 정화 않을까 ..)
• 깔끔한 레이아웃 및 UI
• 1차프로젝트에 맞는 난이도와 완성도를 가져갈 수 있는 페이지

정도 였다. 

일단 만장일치로 사이트의 전체적인 레이아웃이 깔끔해서 마음에 들었고, 꽃 구독 서비스라는 독특한 아이템의 커머스 페이지여서 끌렸다.

또, 처음 시작하는 프로젝트로써 적절한 난이도와 완성도를 가져 갈 수 있을 거라고 판단했다. 

(++ 1차 프로젝트 끝나고 바로 그 다음주에 페이지 리뉴얼 되었다 .. )

 

 

 

 

 

시연영상

 

 

진행기간: 2022.03.28 ~ 2022.04.15

• 구성: Fullstack 4명

 

 

 

 

 

 

 

 

2.  ⚒️ 기술 스택

 

FrontEnd

- React
- Router
- Sass
- Restful API
- Git & GitHub

 

BackEnd

- Node.js
- Express
- JWT, Bcrpyt
- Prisma
- MySQL
- Git & GitHub

 

 

 

 

 

3.  🧱 Modeling & Backend Architecture

 

 

 

 

 

 

4. Front & Back 구현기능 

 

1. frontEnd (상세페이지)

•  

 

• productList fetch GET 
•  수량을 관리하는 useState 생성하여 수량버튼 클릭 시 수량 증/감
•  display 상태를 관리하는 useState 생성하여 추가옵션 토글기능 구현
•  추가상품 클릭 시 추가상품 UI component 추가하는 기능
•  데이터를 map 하고 useState로 상태관리 하여 선택한 옵션 가격을 포함한 총 합계 계산
•  장바구니 클릭 시 fetch POST
• useNavigate 이용하여 장바구니로 이동

 

 

 

2. BackEnd

• 검색어 저장 API (POST)

 

 

 

 

 

📝 회고 

꾸꾸까까 팀과 함께 한 2주 동안의 1차 프로젝트가 마무리 되었다.

 

우리가 계획했던 기능들을 전부 구현하지 못해 아쉬움이 크지만

4명이 할 수 있는 최대한의 완성도를 만들어 낸 것 같아 한편으로 뿌듯하기도 하다 😆

 

꾸꾸까까 팀에서 나는 거의 프론트엔드만 담당했다. 

처음엔 팀원 모두 백엔드 / 프론트 기능 하나씩 맡아서 fullstack 으로 진행했지만,

프로젝트가 진행될수록 내가 맡았던 백엔드 기능이 프론트 쪽에서만 구현하는 것으로 수정되어 백엔드에 기여를 많이 못한 점이 아쉬웠다.

우리 팀은 다른 팀보다 인원이 한명 적었는데, 오히려 단합이 더 잘되어 팀플이 수월하게 진행되었다. 

DB 모델링 설계와 프론트에서 백 API 붙이는 것을 함께해서 진행 속도가 빨랐고,

내가 fetch 부분을 처음 해보아서 실수가 많았는데 팀원들 덕분에 수월하게 진행하고 많이 배울 수 있었다. 

 

1차 프로젝트를 진행하면서 나는 그동안 배웠던 내용들을 복습하면서 정확하게 알고 사용하는 것을 중점으로 두었다.

그래서 새로운 기술들을 효율적으로 적용하는 것을 시도하기 보다는 좀 비효율적일지라도 내가 알고 있는 것 안에서 구현하려고 했는데, 남은 리팩토링 기간 동안 그런 것들이 정리되었으면 좋겠다.

 

내가 팀플을 진행하면서 지키려고 특별히 노력했던 것이 있는데,

1. 팀플 진행 과정에서 나로 인해 딜레이 되는 일이 없도록

2. 내가 맡은 업무는 반드시 수행할 것

3. Daily StandUp Meeting, Sprint Planning Meeting 등 미팅 약속 시간 엄수하기

 

이 세 가지가 바로 그것이다. 팀원 중에 내가 가장 부족하다고 생각했기 때문에 이번 프로젝트에 적극적으로 참여하려고 했다. 

그리고 한가지 더 ! 혼자 하는 프로젝트가 아니기 때문에 다른 팀원들이 내 코드를 봤을 때도 쉽게 이해할 수 있도록 짜려고 신경썼다.

(팀원들이 어떻게 보았을지 모르겠지만 .. 😅)

 

프로젝트가 끝나고 아쉬운게 있다면, 아무래도 주어진 시간 내에 계획했던 기능들을 모두 완성하지 못한것이 가장 마음에 남게 되는 것 같다.

2차 프로젝트에서는 기능에 맞게 새로운 기술들도 적용해보고, 좀 더 효율적으로 할 수 있는 방법을 많이 생각해보려고 한다. 

그리고 1차 프로젝트에서 useEffect에 대한 이해도가 낮아서 잘 사용을 못했는데, 2차에서는 더 공부를 해서 제대로 적용해보고 싶다 !

 

 

 

 

 

 👯👯 협업의 경험

 

1차 프로젝트를 진행하면서 가장 감사했던 점은, 팀원 모두 협업에 대한 가치관이 맞았던 점이었다. 

프로젝트 진행 중에서 중요하게 생각되는 과정(front에서 back 데이터 fetch 하는 과정이나 깃허브 merge 과정 등등..)을 함께 모여서 해결했다. 결과적으로 진행속도가 빨랐고, 큰 어려움 없이 프로젝트가 진행 될 수 있었다.

 

한가지 에피소드가 있는데, 한 번은 develop에 merge 해야 하는데 main에 머지를 해버린 적이 있었다. 그래서  revert를 하게 되었는데 이 과정에서 잘못된 선택으로 revert 가 꼬여버렸다. 팀원 전부 모여서 revert를 되돌리는 revert를 여러번 하여 결국엔 초기 상태의 main으로 돌려놓았는데, 소헌님께서 revert를 자체적으로 해결한 팀을 몇개월 만에 보는 것 같다고 해서 팀원 모두 뿌듯했던 기억이 있다.

그 뒤로 merge 할때 merge 할 브랜치 확인 꼭 하는 좋은 습관까지 생기게 된 ..🤗 

 

 

이렇게 문제가 생길 때 마다 네명이서 똘똘뭉쳐 문제에 대해 토론하다보니 생각의 시야가 넓어지고 토론 자체만으로도 성장한 기분이었다. 마음이 맞는 팀원들을 만난 덕분에 3주동안 좋은 경험을 하고 잘 마무리 되어 영광이었다 ! 

 

 

 

 

 

🔍 기록하고 싶은 코드

 

1. 옵션상품 선택 & 가격반영

 

 

 

 

 

 

 

 

• 백엔드에서 받아오는 데이터를 다룰때 가장 많이 고민했던 부분이다. 
• 백엔드에서 받아온 리스트를 map으로 돌려서 뿌리는 건 해봤지만, map으로 뿌려진 데이터를 렌더링 하면서 사용하는건 처음이었기 때문이다. 고심끝에 내가 생각해낸 방법은 맵핑하는 데이터들을 optionId, opitonPrice state로 관리하여 필요한 함수에 넣고, 컴포넌트를 div 태그로 감싸 onclick 이벤트를 주었다. 
• 지금은 클릭한 옵션과 해당 옵션아이디가 일치하면 옵션이 선택되는 방식(하나의 옵션만 선택가능)으로 구현됐지만 시간이 더 있다면 클릭한 옵션들을 전부 선택할수 있도록 바꿔보고 싶다 😭

 

 

 

2. useState 객체로 관리하기

 

리팩토링기간에 가장 먼저 시도하고 싶었던 것은 남발하는 useState를 정리하는 것이었다.

 

 

• 막상 정리 해놓고 보니 가독성이 꽤나 좋아진것 같지는 않았다.
• 그치만 비슷한 state끼리 객체로 묶어놓으니까 관리하기 편해졌다. 

 

 

 

++ 번외 (소소하지만 뿌듯한 리팩토링)

 

옵션가격을 합계에 포함시키는 리팩토링을 진행하던 중, 계산기능이다보니 중복되는 코드가 많아졌었다.

중복되는 기능을 새로운 함수로 만들고, 옵션가격이 선택된 경우 예외처리를 해주었다.