깔끔하고 간결한 UI 가 특징인, 다양한 홈퍼니싱 제품 판매 서비스를 제공하는 IKEA 홈페이지 를 클론 코딩하여 KIKEA 라는 프로젝트를 진행하였다.
🔶 프로젝트 소개🔶
- 프로젝트 기간 (중간 연휴 1주 제외 총 2주간 진행)
2022.1.14 ~ 2.10- 프로젝트 계획
1주차 스프린트 : 개발환경 초기세팅, 팀원 업무 분담하여 전체적인 레이아웃 구현, 컴포넌트화, 별도의 React 라이브러리 없이 진행할 것
2주차 스프린트 : 컴포넌트 별 기능 구현, Front-Back 간 통신, conflict 수정, 최종 merge
-
기능 구현 사항
필수 구현 사항 : 로그인 / 회원가입 / 상품 리스트 / 상세 페이지 / 장바구니
추가 구현 사항 : 유사 제품 추천 / 결제 기능(포인트) / 제품 검색 기능 -
Front-End 사용 기술
HTML, JavaScript, React, React-Router, scss -
협업 TOOL
Trello, Slack, PostMan, Github
🔶 프로젝트 과정🔶
- Front-End 3명, Back-End 2명 총 5명의 팀원이 해당 프로젝트를 진행하였다. Trello, Slack, PostMan 등을 활용하여 진행하였다.
- 한 프로젝트를 완성하기 위해 Trello 를 활용한 scrum 방식으로 프로젝트 진행
- 총 2회의 스프린트를 계획하고 실행하였다.
🔶 프로젝트 - 구현한 부분 🔶
상품 상세 페이지
☑️ 레이아웃 구현
- 페이지 전체 레이아웃 구현
- 추천 제품(유사 제품) 캐러셀 구현
- 제품 설명, 구매하기 클릭 시 사이드바 toggle 기능 구현 (외부 클릭 시 hide 되는 기능추가)
☑️ 기능 구현
- 해당 제품 구매하기 버튼 클릭 시 로그인 유무를 판별하기 위해 세션스토리지에 저장했던 토큰 값을 활용하여 장바구니에 데이터 보내는 기능 구현 (only 회원 주문)
장바구니 페이지
☑️ 레이아웃 구현
- 페이지 전체 레이아웃 구현
- 추천 제품(유사 제품) 캐러셀 구현
☑️ 기능 구현
- 세션 스토리지에 저장했던 토큰 값 활용하여 해당 유저에 맞는 장바구니 데이터 불러오는 기능 구현
- 세션스토리지에 저장했던 토큰 값을 활용하여 PATCH method 로 Back에 장바구니에 담은 제품 수량 변경 정보 보내서 구현
- 장바구니에 담긴 상품들 총 금액 counting 기능 구현
👩🏻💻 첫 협업, 나의 후기
개발 입문을 하고서 처음으로 팀 프로젝트, 협업을 진행 하였다. 프론트엔드 팀원들끼리 서로 합의 하에 각자 역할 분담을 하고, 백엔드와 통신을 하며 한 사이트를 구현해본다는 것. 나에겐 너무 신기하고 즐거운 경험이었다.
항상 팀으로 일을 해봤던 나에게 팀 작업은 늘 수월할 거라고 생각했었는데, 사실 개발에 있어 첫 협업이기 때문일까 나에겐 낯설면서도 또 설레기도 하면서도 뚝딱거렸다.
첫 협업을 진행하면서 여러 협업 Tool (Trello, slack, Postman 등등) 을 활용해볼 수 있던 것과 첫 플래닝 미팅을 진행하며 팀원들과 같은 목표를 두고 개발 일정을 조율하며 진행 했던 것은 정말 좋은 경험이었다. 새로운 툴을 경험해보고 익숙해지게 되었다.
프로젝트에서의 역할 분담을 페이지 별로 분담을 하게 되었는데, 상세 페이지와 장바구니 페이지를 맡은 나는 무려 2주 동안이나 놓치고 있던, 그래서 결국 구현하지 못한 기능들이 있다. 또한 어떤 다른 생각지도 못한 이슈들이 자꾸 생겨나서 리팩토링을 하지 못하고, 실수한 부분을 더 체크하지 못한 점에 대해서 이따금 아쉬운 부분이 많다.
하지만 팀 작업을 좋아하고, 팀원들과 의견을 나누고 수용하고, 반영하는 그 과정 자체를 즐거워하는 나는 아쉬운 부분은 많지만 첫 협업의 소감을 한 마디로 정의해보자면. 그냥 너무 즐거웠다! 의견을 나누고, 서로 지식을 공유한다는 것. 솔직히 돈주고 못 살 경험이라고 생각한다. 그 과정 속에서 백엔드와 프론트엔드 간의 소통이 그렇게 원활하지 못했고, 처음 다뤄보는 Trello 등 협업 툴을 첫 계획과는 달리 그렇게 잘 활용하지 못한 부분은 우리가 첫 협업이기 때문이라고 생각한다. 이렇게 적응하고, 받아들이고, 더 나아가는 거지😇
내가 맡은 부분에서 더 수정하고 싶고 더 많은 기능을 구현하고 싶은 아쉬움이 남는다. 시간 날 때마다 계속해서 리팩토링도 하고 싶고 팀원 간 하지 못했던 피어 리뷰도 꼭 진행해보고 싶다. 즐거웠던 첫 협업. 같이 프로젝트를 진행했던 팀원 모두에게 너무 고맙다.
📌 첫 프로젝트를 진행하며 내가 얻은 것들!
- useState, useEffect, useRef, useLocation, useParams ... 등등
여러 Hook 을 사용해보며 전보다 원리를 많이 이해하게 된 점. 프로젝트를 시작하기 전보다 useEffect, useRef 라는 Hook 을 언제, 어떻게 써야할 지 정말 감을 잡지 못했다. 지금도 완벽하게 내것으로 만들었다는 생각은 못하지만, 어떤 원리로, 어떤 시점에 필요한 건지 많이 이해하게 되었다.
- 렌더링.. 무한 렌더링!
무한 렌더링의 늪에 처음 빠져보고, 왜 무한 렌더링이 되는거지? 그 이유와 해결 방법을 알아내면서 useEffect 에 대해 더 이해할 수 있었다. 그리고 컴포넌트 간의 구조.. 렌더링이 되는 구조에 대해 더 알 수 있게 되었다.
- 명확하게 세우는 계획, 팀원 간의 상황 파악 = 소통!
협업에 있어 늘 강조하는 단어, 소통. 팀원 간 작업 상황 파악을 알아야 프로젝트에 있어 보완할 점이나, 수정할 점을 더 쉽게 알아낼 수 있다. 백엔드와 프론트엔드가 서로 쓰는 언어가 다르기 때문에 단어나 구조에 대해 서로 알아듣기 쉽게 설명해주는 부분이 정말 중요하다고 생각이 들었다.
- 여러 협업 TOOL 적극적으로 활용하기
처음 접해보는 협업 툴을 사용해봄으로써 비대면으로 팀원 간 소통이 필요할 때 협업 툴의 중요성을 알게 되었다. 좀 더 적극적으로 활용하여 프로젝트 진행을 더 매끄럽게 해야겠다는 생각을 하게 되었다.
👩🏻💻 프로젝트 후기
우선 우리 팀은 구체적인 Sprint 계획을 짜지 못했다. 매일 오전에 진행하기로 한 stand-up meeting 은 약속 시간을 늘 지키지 못하기도 해서, 어쩌면 팀원들 간의 소통이 좀 부족했던 건 그런 기본적인 프로젝트에 대한 구체적인 계획성을 가지고 있지 않아서 그런 것 같기도 하다.
Trello 같은 협업 툴 같은 경우에도 다들 처음 다뤄보았기 때문에, Trello 를 활용해서 팀원 모두 자신의 현재 작업 진행 상황을 팀원들과 같이 공유하는 것 또한 차질이 있었던 것 같다. 좀 더 팀원들 간의 진행 상황이 더 빠르게 파악이 되었더라면, 그리고 백엔드와 프론트엔드 간에도 서로 필요한 부분에 대해서 일찌감치 정확하게 파악을 다 끝내고 내용을 공유했더라면 프로젝트 진행이 더 수월했을 것 같다는 생각이 든다.
우리 팀원 모두 프로젝트를 마무리하면서 아쉬워했던 부분들이 이런 것들이었다. 분명 매일 같이 stand-up 미팅을 진행하지만 좀 더 구체적이지 못했던 것. 백엔드와 프론트엔드 간의 소통 문제. 예를 들면, 필요한 데이터에 대한 명확한 의사전달과 정보 공유같은 것. 그래서 필요한 데이터가 누락이 되었다는 점과 네이밍 컨벤션의 통일성이 없어 작업 시간이 많이 지체된 점 그리고 더 구현하지 못한 기능이 있다는 점에서 많이 아쉬웠다.
하지만 우리 모두 통신을 하는 과정에서 우리가 놓친 부분들에 대해서 인정하고, 받아들였다. 이런 과정을 통해 더 성장하는거지! 나같은 경우는 conflict 너무 나서 전 commit 으로 되돌리다가 파일 몇개 날라먹고 그랬는데.. 협업이라는 건 정말 소통 없이는 이루어질 수 없다는 점을 더 새기게 되었다.
📌 이외 프로젝트 구현 부분
- CRA 기반 프로젝트 초기 세팅
- 깔끔하고 부드러운 UI 구현을 위한 애니메이션 구현
- Scss 를 사용한 css 계층 구조 관리
- Trello를 이용한 scrum 방식 아래 프로젝트 진행