1차 프로젝트 회고록 (Wecode)

 

프로젝트 기간 🗓 : 2022.05.23(월) ~ 2022.06.03(금)

클론 사이트 📎 : 반려소반 - https://petsoban.com

팀명 📌 : CatCoDog

GitHub 📌 : https://github.com/wkddb1359/33-1st-CatCoDog-frontend

팀 구성 및 기술 스택 ⚙️

1. FrontEnd - HTML/CSS, JavaScript, React, React-Router, Sass, Git 
   • 김철회
   • 남하임
   • 윤경연
   • 안성주
   • 정재성
2. BackEnd - Python, Django, MySQL, Git
   • 강세영
   • 박준형

---

새로운 설렘을 기다리며 ☀️

나는 항공소프트웨어공학과 전공자로써 3번의 프로젝트와 스타트업에서 실습 프로젝트 경험을 한 적이 있었다. 하지만 매번 대학교에서의 프로젝트는 기한에 맞춰 결과물을 만들어 내고 이번에만 잘 넘기자? 라는 생각으로 허무한 시간을 보냈던 것 같았다. 그때는 내가 어떠한 것에 재미를 느끼고 해야하는 것과 하고 싶은 것을 구분짓지 못하는 시기라고 생각한다. HTML/CSS 만을 사용하여 간단하게 나만의 웹사이트를 만들며 재미를 느꼈고 프로젝트를 진행하면서 정말 많이 배울 수 있는 시간이라는 것을 먼저 몸소 깨달았기에 위코드에서 굉장히 기다린 시간이었다.

새로운 사람들과 시작한 1차 프로젝트 정말 많은 설렘과 기대를 하였으며 '안되면 될때까지' 라는 초심을 항상 다짐하며 시작하였다. 2주라는 시간은 정말 빠르다...

프론트와 백앤드 함께 작업하여 웹 사이트를 구성한 첫 프로젝트이기에 애정이 가장 많이 가며 한편으로는 아쉬움이 많이 남은 프로젝트였다고 말하고 싶다. 대부분의 개발자들이 말하는 소통의 중요성, 함께 하는 것에 대하여 몸소 느낄 수 있었으며 조금 더 적극적으로 협업 도구를 사용하며 프로젝트를 진행했으면 어땠을까? 라는 아쉬움이 남았다.

이제부터는 내가 어떠한 방식으로 팀원들과 소통 하였으며 프로젝트를 진행하였는지에 대하여 글을 작성하려 한다.

 

페이지 시연 영상 🎥

https://www.youtube.com/watch?v=mw0Opg8jc5Y 

👉 켓코독의 클론 사이트는 반려동물의 건강을 생각한 수제 간식과 애견 용품을 판매하는 온라인 커머스 사이트인 반려소반입니다! 개인적으로 반려견 분야에 관심이 많았기 때문에 저의 주관적인 의견이 더해져서 선택이 된 사이트입니다.

 

 

협업 도구 💁🏻‍♂️

1. Trello

👉 협업 도구로 트렐로를 활용하였다. 팀원들 전부 트렐로에 관해서 생소하였으며 어떠한 방식으로 정리하여 티켓을 작성하고 구분해야 할 지 몰랐다. 따라서 우리 팀은 프로젝트 초반에 트렐로 보다는 Slack과 대면 회의를 통하여 소통하였던 것 같다. 주말이나 휴일에 팀원 중 한명이 나오지 않았을 때에는 어디까지 진행되고 어떠한 것이 수정 되었는지에 대해서 알기 어려웠던 경험이 있었기에 트렐로의 중요성?을 깨닫기 시작하였다. 그래서 2차 프로젝트에는 꼭 트렐로를 적극적으로 활용하여 조금더 계획적으로 프로젝트를 진행할 예정이다!!! 

 

2. Slack

👉 켓코독 채널을 생성해서 팀원들과 항상 Slack을 활용하여 모든 소통을 한 것 같다. 프로젝트를 진행하기에 앞서서 팀원들과 좋은 분위기, 팀원들 끼리의 친근함을 가지는 것 또한 프로젝트를 성공적으로 만드는 것에 큰 부분을 기여한다고 생각하기에 이 부분에 대해서 우리 팀은 아주 성공적이었던 것 같다?!!

 

내가 구현한 페이지 🐭 

Detail - 제품 상세 페이지

👉 최상위 컴포넌트로 Detail을 두고 상품 정보가 담기는 DetailGoods, 제품 상세 페이지의 Navbar인 DetailGoodsNav, 리뷰의 요약 정보가 담기는 ReviewSummary, 리뷰를 작성할 수 있는 ReviewComment 총 4개의 컴포넌트로 나누어 페이지를 구현하였다. 제품 리스트 페이지에서 해당 제품의 상세페이지로 이동해야 하기 때문에 useParams 훅을 사용하였다. useParams를 사용하면 엄청나게 많은 상품 상세 페이지가 필요해도 어렵지 않게 id 값을 활용하여 페이지 이동이 가능하다.

 

1.1 메인 사진 변경하기

👉 미니 사진들을 클릭하게 되면 메인 사진이 변경되는 모습이다.

 

👉 goodsData에 백앤드로부터 제품에 관련된 데이터를 받고 메인 이미지를 State 함수 mainImgURL에 담았다.

goodsData에서 가장 먼저 있는 이미지를 메인 이미지로 설정해주었고 조건부 랜더링을 사용하여 mainImgURL에 무언가가 담겨있으면 제품 미니사진들 즉 HTML 코드가 실행되게 구현하였다. map 함수를 활용하여 백앤드로부터 받은 사진을 나타나게 하였고 제품 미니 사진을 클릭하면 set함수를 활용해 mainImgURL에 클릭한 사진이 담기게 작성하였다.

 

1.2 수량 데이터 보내기

👉 수량을 선택하고 장바구니 버튼을 누르면 해당 제품이 수량에 맞게 장바구니에 담기게 된다.

 

👉 Select/Option 태그를 사용해서(onChange 사용) 선택한 옵션의 value값을  checkGoodsCount 함수내부에서 goodsCount에 value를 담았다. 

 

👉 수량을 담은 후 fetch함수를 활용해서 백앤드로 제품 id와 수량을 전달했다. (POST 방식)

처음에 백앤드로 데이터를 전달하는 것이 신기해서 계속 준형님에게 몇개 보냈는지 퀴즈를 냈다...

수량 데이터를 백앤드로 보내고 장바구니에 담았다는 alert창을 띄우니까 완성도가 높아진 기분이 들었다.

 

1.3 리뷰 작성하기

👉 사용자가 입력한 텍스트와 별점을 설정하고 엔터키 혹은 게시 버튼을 누르게 되면 리뷰가 반영이 되는 모습이다.

 

👉 사용자가 입력한 값을 받는 comment 와 comment를 담아두는 commentList를 배열 형식의 state 변수에 담았다.

 

👉 사용자가 키보드를 통해서 입력하면 set 함수를 통해서 입력값을 comment에 담는다.

 

👉 앤터키 혹은 제출 버튼을 누르게 되면 pushComment 함수가 실행되며 사용자가 아무것도 입력하지 않았을 때는 alert창을 활용해서 댓글을 입력하라는 텍스트를 표시하였고 사용자가 입력하였을 경우에만 if문 내부가 실행된다.

set 함수를 사용해서 comment를 담았다. (userid와 작성한 시간(time)은 mock 데이터로 테스트 하고 있었기 때문에 하드코딩해서 넣었다.)

...commentList에서 스프레드 연산자(...)를 사용하였는데 이는 원본 배열을 건드리는 코드는 불변성을 지키는 것에 어긋나는 코드 이기 때문에 사본을 만들어주기 위하여 다음과 같이 작성하였다. 

 

👉 굉장히 애를 먹은 별점 구현 코드이다...

별점 또한 Select/Option 태그를 사용해서 value 값을 starCount라는 state 변수에 담았고 props로 별점 컴포넌트까지 전달해 주었다. 별점 컴포넌트에서  starCount를 잘 받고 있는지 console.log를 활용해서 확인하였으며 starCount에 담긴 숫자 만큼 new Array().fill().map을 통해서 그 수 만큼 반복하는 map함수를 잘 작성하였다.

하지만 계속해서 오류가 나는 것이다... 왜일까??????????

분명히 console.log를 통해서 starCount가 잘 담기는 것을 확인하였고 new Array().fill().map에서 잘못 작성한 것 또한 없다는 것을 아주 많이 테스트 해서 확인해보았다. 어디가 잘못된것인지 멘토님께 바로 달려가서 질문을 하였다.

멘토님도 나의 코드를 보고 한참을 고민하시다가 type of를 활용해 starCount가 number가 맞는지 확인하시고서는 말씀해 주셨다. starCount는 지금 string 데이터라고...

아... 정말 허무했지만 앞으로는 state에 담기는 값의 type조차 꼼곰히 확인해야겠다 라는 배움을 얻은것 같아 한편으로는 다행이라고 생각했다.

---

 

🌈 프로젝트를 마치며

2주안에 웹 사이트를 구현하는 것은 불가능한 일이라고 생각했었다. 우리에게 실제로 주어진 시간은 11일 정도 였다.

기획 회의때 팀원들 전부 각자 해보고 싶은 기능 구현, 페이지들이 많아서 구현하다보니 기획을 수정하는 일이 많았다. 이는 슬프게도 초기 기획의 실패라는 것이다. 하지만 우리 팀 전부는 그럴수록 더욱 긍정적인 마인드를 서로 서로 되새겼으며 어려움에 대해서 서로 고민하고 계속되는 회의를 했다. 아마도 이러한 과정이 만족할만한 결과로 이어졌지 않았나 싶은 생각이 들었다. 실패는 있었어도 포기하지 않은 켓코독 팀 시간이 지나도 계속 기억날 것 같다!!!

2주동안 하루종일 코드생각, 웹 사이트 기능 생각에 잠겨 있었다. 이 시간 동안 기존의 기능을 어떻게 개선해서 표현할까, 어떻게 가독성을 높일까, 클린한 코드를 어떻게 작성할까에 대해서 수없이 고민하였으며 그때마다 힘이 되어준 팀원들에게 정말 감사하다.

개발이라는 것에 대해 한걸음 배울 수 있는 시간이 되었던 소중한 시간이었다.

 

 

 

항상 감사합니다 팀원분들과 멘토님들 🙏🙏