한정판 거래 플랫폼 사이트인 KREAM 홈페이지 를 모티브로, 그림 거래 사이트로 재구성하여 GREAM 이라는 프로젝트를 진행하였다.
🔶 프로젝트 소개🔶
- 프로젝트 기간
2022.02.14 ~ 2022.02.25- 프로젝트 계획
1주차 스프린트 : 개발환경 초기세팅, 팀원마다 해당 프로젝트에서 꼭 이루고 싶은 개인만의 목표를 세우고 공유하여 업무 분담하고 전체 레이아웃 구현, 컴포넌트화
2주차 스프린트 : 컴포넌트 별 기능 구현, Front-Back 간 통신, conflict 해결, 최종 Merge
- 기능 구현 사항
필수 구현 사항 : 소셜 로그인 / 상품 리스트 / 상품 상세 페이지
📌
소셜로그인
상품검색 기능 구현
리스트페이지 캐러셀 구현
리스트페이지 상품 다중필터 기능 구현
상세페이지 관심상품 추가
상세페이지 사이즈모달창, 구매모달, 판매모달, 관심상품 모달, 시세모달창 구현
상세페이지 모달창과 모달창 밖의 UI 연동
상세페이지 시세 차트
상세페이지 하단 관련 카테고리 추천상품- Front-End 사용 기술
HTML, JavaScript, React, React-Router, Styled-components
- 협업 TOOL
Trello, Slack, Notion, Github
이번 프로젝트는 1차로 진행했던 프로젝트와 다른 목표를 세우고 프로젝트 기획, 진행하였다.
팀원 모두 각자 이번 프로젝트에서 가장 얻고 싶은 것과 개인 목표를 세워 공유하여, 다양한 라이브러리를 사용 및 커스터마이징 해보고 React의 여러 hook 숙달과 더 딥한 학습을 목표로 유저플로우를 줄여 기능 하나하나에 집중하도록 했다.
🔶 프로젝트 과정🔶
- Front-End 4명, Back-End 2명 총 6명의 팀원이 해당 프로젝트를 진행하였다. Slack, Trello, Notion 을 활용하여 진행
- Trello 의 티켓을 좀 더 작은 기능으로 세분화하여 나누고 진행했으며, daily stand-up meeting 으로 팀원들간 진행상황을 공유하고 블로커에 대해 같이 해결할 시간을 가졌다.
- 총 2회의 스프린트 계획하고 실행하였다.
🔶 프로젝트 - 구현한 부분 🔶
상품 상세 페이지
☑️ 레이아웃 구현
- 페이지 레이아웃 구현
- 특정 스크롤 시점에서 Show 되는 Nav 구현
☑️ 기능 구현
- 스크롤 이벤트로 특정 시점에서 해당 제품 정보 (기본 정보, 최근 구매가, 판매가 버튼 노출) Nav 구현
- 구매, 판매, 사이즈 버튼 클릭 시 모달창 구현
👉🏻 버튼 컴포넌트와 모달 컴포넌트를 재사용하고 독립적으로 관리 - 모달창 내외부 데이터 연동
- 데이터 시각화 (시세 차트)
📌 Issue
컴포넌트 재사용
- 모달이나 버튼 같은 경우처럼 재사용해야 할 컴포넌트가 많았다.
children으로 컴포넌트를 재사용하면서 독립적으로 어떻게 각기 다른 목적을 이룰까에 대한 고민이 있었다.
사실상 컴포넌트는 재사용 가능한 독립적인 단위인데 말이다.
이 전에는 컴포넌트를 하나하나 다 만들어서 (낭비..) 구현했다면, 컴포넌트를 어떻게 구조화 해야하는 지에 대해 더 고민해볼 수 있었다.
라이브러리 커스터마이징
- 프로젝트를 진행하면서 처음으로 라이브러리를 사용해보았다. React-modal 라이브러리, Recharts 라는 차트 라이브러리를 사용해보면서 기본적으로 라이브러리가 제공하는 스타일을 커스터마이징을 위해 접근하는데에 있어 큰 어려움은 없었지만 라이브러리를 어떻게 잘 사용할 수 있는가? 에 대해 많이 감을 잡을 수 있었다. 물론 라이브러리 없이 구현할 수도 있었지만 여러 방법으로 간단하게 구현할 수 있다는 부분에서 좋은 경험이었다.
라이브러리를 어떻게 하면 커스텀 할 수 있는가..?
- 뜯어봐야 한다. 물론 구글링으로 여러 예제를 살펴보면서하지만 내가 사용하는 라이브러리가 기본적으로 제공하는게 어떤건지 모듈을 뜯어봐야 한다.
React 의 단방향성
- React 는 기본적으로 단방향성 데이터 흐름 을 가지고 있다. 하지만 모달창 데이터 내외부 연동을 위해서는 양방향 으로 데이터를 주고받아야 했다.
하위 컴포넌트(NewTweetForm) 에서의 클릭 이벤트가, 부모의 상태를 바꾸어야만 하는 상황에서 state 를 끌어올려야 했다.
이는 상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달해서 해결할 수 있었다.
props 와 state 개념에 대해 더 감을 익힐 수 있었다.
Styled-components
- 이전 프로젝트에서는 scss 를 사용해서 스타일링을 했다면, 이번에는 Styled-components 를 사용해서 nesting, 조건부 등 활용하여 컴포넌트 스타일 관리를 더 효율성있게 할 수 있었다.
CSS 전처리기와 styled-components 의 차이점을 더 명확히 알 수 있었다.
Git rebase
🤔 프로젝트 후기
1차 프로젝트가 끝나고 남은 시간동안 곰곰히 생각해본 부분들이 있었다.
아무래도 백엔드와 어떻게 하면 원활하게 소통을 할 수 있는가, 내 코드 한줄한줄을 정확하게 이해하고 숙지하며 작성했는가. state, props, hook, 이벤트핸들링 등등 해당 개념들을 제대로 숙지할 수 있었는가.
내가 이번 프로젝트를 진행하기 전, 세웠던 목표는 위의 것들이었다. 프로젝트를 위한 원활한 소통, 개념 이해, 좀 더 꼼꼼한 코드 에 초점을 두고 프로젝트를 진행했다.
프로젝트가 끝나고 팀원들과 마지막 미팅을 하면서 1차 스프린트에서 공유한 개인 목표를 달성했는지에 대해 이야기를 해보았다.
우선 나는 이전보다 좀 더 기능을 어떻게 잘 구현할 수 있는지에 대해 더 많이 고민해보고 해당 개념에 더 딥하게 이해할 수 있었다고 생각한다.
이벤트 버블링은 왜 일어나고 어떻게 해결해야 하는지. 그 반대 캡쳐링은 어떤 개념인지. React 는 단방향이기 때문에 양방향으로 어떻게 데이터를 업데이트 시킬 것인지. 등등
git 버전 관리 경우에도 rebase 를 해보면서 더 깔끔한 커밋으로 관리하며 더 감을 익힐 수 있었다.
유저 플로우를 확 줄여 우리가 개인적으로 세운 목표 (소셜 로그인, 똘똘한 컴포넌트 구조화 등) 을 이뤘고, 팀 프로젝트 라는 이름에 걸맞게 서로의 블로커를 공유하고 같이 해결해나가면서 많은 점을 느꼈다.
하나의 목표를 향해 가면서 개인의 목표 또한 이뤄가는 것. 서로서로 도와주는 개발 문화를 더 이해할 수 있었던 프로젝트였다.
