Project grön

*Nike 웹사이트를 모델링한 프로젝트입니다.

1.프로젝트 소개

개발 기간 및 인원

• 개발 기간 : 2023/05/26 ~ 2023/06/09
• 개발 인원 : 프론트엔드 3명 , 백엔드 1명
• 깃헙 레포지토리
  • Frontend
  • Backend

서비스 소개

1. 기획의도

• 나이키처럼 건강한 라이프 스타일을 추구하는 고객을 타겟으로 선정
• 나이키 웹사이트 UX,UI 디자인의 강점을 살려 화면 구성
• 식물에 대해 잘 모르는 사람도 니즈에 맞는 식물을 쉽게 고를 수 있도록 기능 기획
• 식물에 대한 진입장벽을 낮추고 편리하게 식물을 구매할 수 있는 서비스

2. 서비스 개요

• 서비스명 : grön
• 판매상품 : 식물, 화분, 관리도구
• 고객 : 반려식물 집사가 되고 싶은 누구나

구현 기능

1. 회원가입/로그인
2. 상품 카테고리, 필터, 정렬, 페이지네이션, 검색
3. 상세페이지 (여러 다른 특징에 대한 데이터들을 유연하게 대응)
4. 상세페이지 내부에서 연관 상품 상세페이지 이동
5. 장바구니 페이지 (추가, 삭제, 수량 변경)
6. 위시리스트 페이지 (정보 받아오기, 삭제)
7. 결제페이지에서 유저 정보 받아오기
8. 기타 (캐러셀, 토스트 팝업)

---

2.프로젝트 진행과정

2-1. Planning meeting

프로젝트를 진행하면서 총 두 번(1차 Sprint와 2차 Sprint)의 Planning meeting 시간을 가졌다.

1️⃣ 첫 번째 Planning meeting (Sprint 1)

첫번째 Planning meeting이 시작되기 전 사이트에서 경험할 수 있는 전체적인 흐름과 기능을 파악하여 정리 후 만나기로했다.

1. 구현기능 파악 및 게획
   

   각자 Producting한 내용을 취합하여 Figma에 정리해두었다.
   ERD를 짜고 그에맞는 큰 틀에 따라 User Flow를 만들어 페이지를 나누었다.
   
   프로젝트 시작과 함께 백엔드 팀원 한 분이 나가셔서 백엔드 업무는 한 분이 모든걸 다 맡기로 하셨고 나는 디테일 페이지와 장바구니 페이지를 맡기로했다.
   그리고 모든 팀원이 모여 각 페이지에 필요한 필수구현 사항과 추가구현 계획까지 함께 세웠다.

2. Trello 티켓 만들기
   
   우리는 크게 Operations/Backlog/ToDo/In Progress/In Review/Done으로 나눠서 각자 해야할 업무를 잘 확인하고 이행할 수 있도록 세세하게 나누어 정리했다.
   트렐로를 처음 사용해보는탓에 티켓을 어떻게 쪼개야하는지 전혀 감이 잡히지 않았는데 각자 작업하는 branch 단위로 쪼개자는 의견이 나와서 그에 맞추어 쉽게 티켓팅을 할 수 있었다. 각자의 업무 진행도와 남아있는 작업이 뭐가 있는지 한눈에 볼 수 있어서 프로젝트 기간동안 매우 유용하게 사용하였다.
   

2️⃣ 두 번째 Planning meeting (Sprint 2)

1. 계획 재정비
   지난 일주일동안 각자 맡은 업무 결과를 확인하고 남은 시간동안 남아있는 작업을 어떻게 진행할지 구체적으로 정했다.
   
   트렐로 티켓을 기반으로 진행도를 살펴보았는데 전체 51개 중 약 29개의 티켓이 마무리 되어가는 단계였기 때문에 남은 시간에 비해 진행해야할것이 조금 많았다. 그래서 추가 기능구현을 나중으로 미루고 필수 구현을 완벽히 끝내기로했다. 이를 위해 트렐로 티켓에 중요도를 상,중,하 로 나누어 빠르게 업무를 진행할 수 있게 하였다.
   
   업무 중요도를 보기쉽게 달아놓으니 해당 업무에만 몰입할 수 있었고 그에따라 빠르게 진행할 수 있었다.

2. API 통신
   프로젝트를 진행하면서 API통신을 많이 할 수 밖에 없었는데 서버를 켜두면 백엔드에서 작업을 못하고 서버를 꺼두자니 프론트 팀원들이 작업하는데 불편함이 있어 폴더를 clone받아 해당 서버를 켜두었다.
   

2-2. Daily Stand-Up meeting

우리는 매일매일 정해진 시간에맞춰 스탠드업 미팅을 진행하였다.
각자 하고 있는 일의 진척 상황을 공유하고 오늘 할 일 중 팀원들에게 전달하거나, 도움이 필요한 일을 이야기하는 자리었다. Agile한 업무를 하기위해 IT업계 회사에서는 많이들 한다고 들었다. 오랜 시간을 가지고 진행하는것이 아니었기 때문에 우리팀은 스탠드업 미팅을 하기 전 노션에 각자의 blocker, 진행도를 미리 적어와 빠르게 미팅을 끝냈다. 이렇게 미리 적어놓고 미팅을 해보면서 훨씬 좋다고 생각했다. 그냥 머릿속으로 생각해서 말할 때 놓치는 부분도 많을것이고 전달력도 떨어질텐데 미리 적어서 진행한 결과 나의 상황을 자세하게 짚어가며 팀원들에게 공유할 수 있었고 나 또한 팀원들이 미리 적어놓은 정보를 보며 추가적으로 이야기할것을 미리 생각할 수 있었다. 모든 팀원이 빼먹지 않고 잘 참여해주어 효과가 더 좋았던것 같다.

2-3. FE-BE의 소통

우리팀은 백엔드 한 명 뿐이라 소통의 과정에서 매우 힘들것이라고 생각했는데 프론트 팀원들 모두가 쉽게 알아보고 참고할 수 있도록 API 명세서를 깔끔하게 만들어주셔서 정말 소통의 과정에서 문제가 전혀 없었던것같다. 다른팀들은 소통의 과정에서 많은 마찰이 있던것 같았는데 우리팀은 전혀 찾아볼 수 없었다. 가끔 에러나는게 몇 개 있었는데 바로바로 수정해주시고 추가해주시면 금방 에러를 잡을 수 있었다.

3. 프로젝트를 통해 얻은 것

1. 팀원과의 소통, 협업에 대하여

이번 첫 프로젝트를 진행하며 소통이 정말 중요하다는것을 느꼈다. 팀원들과 소통을 통해 얻은 유대감은 프로젝트를 진행하는 데 정말 큰 도움이 되었다. 서로의 생각을 공유하고 협력할 수 있었기 때문에 프로젝트를 성공적으로 완료할 수 있었지 않았나 싶다. 또한, 프로젝트에 대한 이해를 높이는 데에도 팀원들과의 소통이 도움이 되었다. 문제 해결 능력도 팀원들과의 소통을 통해 향상되었다. 팀원들과 함께 문제를 해결하는 과정에서, 서로의 생각을 공유하고 협력하는 방법을 배울 수 있었다. 마지막으로, 의사 소통 능력도 팀원들과의 소통을 통해 향상되었다. 팀원들과 함께 프로젝트를 진행하면서, 서로의 생각을 효과적으로 전달하고 이해하는 방법을 배울 수 있었다.

전반적으로 팀원들과 소통을 통해 많은 것을 배울 수 있었다. 팀원들과의 소통은 프로젝트를 성공적으로 완료하고, 자신의 능력을 향상시키는 데 큰 도움이 되었다. 나중에 실제 기업에 가서도 이런 마인드셋을 가지고 일을 한다면 어려운 상황이 닥쳐도 잘 헤쳐나갈 수 있으리라는 다짐을 하게되었다. 누군가의 목소리를 내세우는게 아닌 모두의 목소리가 합쳐져 하모니를 이루는게 협업이라고 생각한다.

2. 용기, 자신감

프로젝트를 진행하면서, 새로운 도전을 할 수 있는 용기를 얻었다. 처음에는 어려운 도전이었지만, 팀원들과 함께 협력하면서, 도전을 성공적으로 완료할 수 있었다. 또한, 자신의 능력을 믿는 자신감도 얻었다. 팀원들과 함께 프로젝트를 진행하면서, 자신의 능력을 인정받을 수 있었고, 자신의 능력에 자신감을 가질 수 있었다. 마지막으로, 다른 사람들과 협력할 수 있는 자신감도 얻었다. 팀원들과 함께 프로젝트를 진행하면서, 다른 사람들과 협력하는 방법을 배울 수 있었고, 다른 사람들과 협력할 수 있는 자신감을 가질 수 있었다.

전반적으로 프로젝트를 통해 많은 것을 배울 수 있었다. 프로젝트는 새로운 도전을 할 수 있는 용기, 자신의 능력을 믿는 자신감, 다른 사람들과 협력할 수 있는 자신감을 얻을 수 있는 좋은 기회였다.

4. 잘한 점/아쉬운 점

1. 잘한 점

먼저 내가 가장 잘했다고 생각하는점은 follower로써 PM들의 지시에 따라 프로젝트를 진행했던것이다. PM들이 제시한 일정과 목표를 이해하고, 그에 맞게 업무를 수행했다. 또한, PM들이 요청하는 사항을 신속하고 정확하게 처리하여 프로젝트 진행에 지장이 없도록 노력했다.
기술적인 부분에서 막힘이 있을때 혼자 고민하여 해결한것도 있었지만 팀원들에게 공유하여 같이 고민하고 문제 해결을 했다.또한 팀원들이 모르는것이 있을때 내가 아는것이 있다면 적극적으로 정보를 공유하여 문제를 해결했는데 이것이 팀으로 일하는 이유이자 장점이라고 생각했다. 직접 github에 리뷰를 달아 리팩토링은 하지 못했지만 그래도 소통을하며 간접적으로나마 팀원끼리 리팩토링을 해본것도 잘한것같다.

2. 아쉬운 점

솔직히 이번 프로젝트에서 아쉬운것이 매우 많았다. 일단 프론트3명에 백엔드1명 이었기 때문에 다른 팀들보다 머릿수가 적어 결과물이 다소 아쉬웠다. 물론 인원이 많다고 결과물이 좋으리라는법은 없지만 백엔드가 1명이었던 것은 조금 불리했다고 생각한다. 추가적인 기능구현을 하고자 하는 욕심은 많았지만 그에따라 백엔드분의 업무량도 많아질것을 알았기에 목소리를 내지 못했다. 다음 2차 프로젝트때는 욕심을 조금 더 내어서 내가 구현하고 싶은 기능을 꼭 녹여내고싶다.

5. 완성모습

1. 회원가입/로그인

• 유효성 검사 후 API 요청 분기 처리
  
• 로그인이 성공하면 토큰 저장 후 메인으로 이동
• 로그인이 실패하면 토스트 팝업으로 알림

2. 이미지 캐러셀

• fetch(GET) 메소드를 통해 data를 state에 저장 후 Array.map 이용하여 데이터 바인딩

• useRef를 이용해 DOM에 접근하여 슬라이드 기능 구현

3. 상품 카테고리, 필터, 정렬, 페이지네이션, 검색

• useSearchParams hook을 활용해 쿼리스트링에 변화를 주는 방식으로 구현

• 좌측의 각 서브카테고리를 선택하면 URL의 쿼리스트링이 변경되고 해당 서브카테고리에 속한 상품 리스트가 노출

• useSearchParams hook을 활용해 URL의 쿼리스트링을 변경시켜 필터&정렬 기능 구현

• useState hook을 활용해 정렬 버튼을 토글 형태로 구현

• 필터링 부분 UI가 식물 카테고리에서만 그려지도록 조건부 렌더링 적용

• 쿼리스트링을 활용해 검색 기능 구현
  
• useSearchParams hook을 활용해 URL 쿼리스트링의 ‘offset’ 값을 동적으로 변경하여 페이지네이션 기능 구현

4. 상품 상세페이지

• useParams Hook과 fetch(GET)메소드를 사용하여 동적 라우팅으로 상품 정보 데이터 바인딩
  

• 위시리스트 버튼 상태를 useState Hook boolean 값으로 저장 버튼 onClick에 setter함수를 사용

• 조건부 렌더링을 사용해 fetch(POST,DELETE) 요청

• 위시리스트 보기 버튼 클릭시 useNavigate Hook을 사용하여 페이지 전환

• 수량 버튼onClick에 setter함수를 사용하여 리렌더링

• 담기 버튼 클릭시 state에 담긴 수량값을 fetch(POST) 요청으로 보냄

• 추천상품 클릭시 useNavigate Hook을 사용하여 페이지 변환

• queryString을 사용해 해당 상품과 같은 상세 카테고리인 상품을 추천상품으로 추천

5. 장바구니 페이지

• fetch(GET) 메소드를 통해 데이터 바인딩

• 수량 버튼 onClick에 fetch(PATCH) 요청으로 장바구니 수량 변경 Response 값을 받아 페이지 리렌더링

• fetch(DELETE) 메소드를 통해 해당 상품 삭제

• 조건부 렌더링을 통해 장바구니 비어있을시 UI변경

6. 위시리스트 페이지

• 삭제버튼 클릭시 fetch(DELETE) 메소드를 통해 해당 상품 삭제

• 조건부 렌더링을 통해 위시리스트 비어있을시 UI 변경

7. 리뷰

• useState hook을 활용해 리뷰 보기/남기기/삭제 기능 구현

• API 호출시 headers에 token값을 포함시켜 로그인한 상태에서만 댓글을 남길 수 있고, 본인의 댓글만 삭제 가능

8. 결제 페이지

• API 통신 후 데이터 렌더링

• 잔여포인트에 따른 분기처리 결제 성공시 메인으로 이동 잔여 포인트 부족하여 결제 실패시 토스트 팝업으로 알림

6. 마치며

인생 첫 개발 팀 프로젝트를 진행해본 내 소감은 매우 값지고 행복한 경험이었다고 말하고싶다. 정말 좋은 팀원분들을 만난 덕분인것같다. 처음에는 개발 경험이 적어 많이 걱정했지만, 팀원들의 도움으로 무사히 프로젝트를 마칠 수 있었다. 프로젝트를 진행하면서 개발에 대한 이해가 깊어졌고, 팀원들과 협업하는 방법도 배울 수 있었다.

개발 협업은 젠가와도 같다고 생각한다.
젠가는 각기 다른 조각을 쌓아올려 하나의 탑을 만드는 게임이다. 주먹구구식으로 쌓아올려도 완성은 되겠지만 언젠간 쉽게 무너질 것이다.

개발 협업도 마찬가지라고 생각한다. 각기 다른 개발자가 각기 다른 기능을 개발하는데 개발자들이 서로 소통하지 않고 주먹구구식으로 개발을 진행한다면, 완성된 제품은 품질이 좋지 않을 것이다. 개발자들이 서로 소통하고 협력하여 제품을 개발한다면, 완성된 제품은 품질이 좋고 안정적일 것이다.

따라서 개발자들이 서로 소통하고 협력하여 제품을 개발한다면, 성공적인 성과를 이룰 수 있을 것이라고 생각한다.

이제 더이상 개발 첫 프로젝트가 아니다. 이미 한 번의 경험이 쌓였기 때문에 그에따라 다음에는 더 큰 프로젝트에 참여하여, 더 많은 것을 배우고 성장하고 싶다.