내가 할 수 있을까? 하는 마음으로 시작했는데 정말 다 해낸 2차 프로젝트 회고록을 남겨보려고 합니다.
프로젝트 소개
코로나 바이러스를 비롯한 여러 데이터를 수집, 분석 및 차트와 지도로 시각화한 dataUSA Web사이트 클론 프로젝트입니다.
- 개발 기간 : 2020/08/03 ~ 2020/08/14
- 개발 인원 : 프론트엔드 3명(윤지영, 서동찬, 김효식), 백엔드 2명(이홍일, 이태성)
- Front-end Github
- Back-end Github
✔️ 프로젝트 영상
✔️ 사용된 기술
- JavaScript (ES6)
- React (CRA, Functional Component, Styled Component)
- Redux
- Git /Github
리액트 라이브러리
- React-router-dom
- Highchart
- material-ui
협업툴
- Slack, Trello, Git
구현 기능 및 내가 맡은 부분(✅)
전체적으로는 React Hooks, styled-component의 사용 및 이해 그리고 Redux를 도입하면서 React에서 각 기술들이 어떻게 작동하는지에 그리고 왜 필요한지에 대하여 탐구해보았습니다.
1차 프로젝트에서는 구현해보지 못했던 소셜로그인 기능을 구현하면서 OAuth 2.0 인증에 대한 개념 이해 및 인증 인가 방식의 흐름을 되짚어보았습니다. 더불어 데이터 시각화를 구현하기 위해 차트 라이브러리를 활용하여 백엔드로부터 받아오는 데이터를 어떠한 기준으로, 어떻게 시각화 할 것인지에 대한 고민과 이에 따른 기능 구현에 집중하였습니다.
[COVID19 페이지]
- ✅ highchart를 사용하여 line 차트로 데이터 시각화
- highchart를 사용하여 map 데이터 시각화
- material-ui를 사용하여 데이터 테이블 구현
- ✅ axios를 사용하여 백엔드와 데이터 연결
- ✅ 나라, 장소 카테고리별 데이터 필터링 시각화
- ✅ 데이터를 받아오는 동안 loading 이미지 적용 및 error 핸들링
- ✅ useRef를 사용하여 아이콘 클릭 시 해당 차트 데이터로 이동
[로그인 페이지]
- 실제 홈페이지에는 없는 로그인 페이지 구현
- ✅ 구글 api, 카카오 api를 통한 소셜로그인 기능 구현
[메인 페이지]
- ✅ scroll 위치에 따라 달라지는 style 적용
- ✅ keyframes를 사용하여 움직임이 부드러운 sidebar 구현
- ✅ Data Card 클릭 시 장바구니 추가 기능 구현
- ✅ Cart Icon hover시 Cart 내역 수정 및 확인창 구현
[Data Cart페이지]
- ✅ 실제 홈페이지에는 없는 Data Cart페이지 구현
- ✅ Redux를 사용하여 Data card 상태의 중앙화
[상세 페이지]
- highchart를 사용하여 treemap, chartTable 데이터 시각화 연결
잘한점, 아쉬운 점
잘한 점
DataUSA는 정말 많은 양의 데이터를 받아오고 보여주는 사이트였습니다. 때문에 초반에 저희가 구현할 수 있는 기능에 대해 한계를 느끼기도 하였지만 팀원들과 차근차근 이야기를 나누고 조율하면서 결과적으로는 멋진 사이트를 구현할 수 있었습니다. 또 원래 사이트에는 없는 기능들이 적절하게 녹아들 수 있도록 미약하게나마 기획을 해봄으로써 팀원들과의 소통, 의견 조율, 아이디어 공유 등 협업하는 자세와 대화에 대해서 생각해볼 수 있었던 시간이였습니다.
1차 때와 마찬가지로 협업 시에 효율적으로 작업 할 수 있는 여러 장치들(Agile 방법론, Trello, slack, git)을 적절히 활용하였습니다. 덕분에 데이터 시각화라는 다소 복잡하고 어려워보이는 주제를 수월하게 구현할 수 있었던 것 같습니다.
지난번 프로젝트에서 구현해보지 못해 아쉬웠던 장바구니 기능을 Redux를 활용하여 구현해보았습니다. 컴포넌트에서 데이터를 받아서 props, state로만 처리하던 데이터를 Redux를 활용함으로서 단방향으로 처리하는 흐름에 대하여 탐구해볼 수 있었고 사용 목적을 살펴볼 수 있었습니다.
아쉬운 점
어떤 일을 끝마치고 나면 홀가분하고 후련한 마음과 동시에 한구석에 자리잡는 아쉬운 점은 늘상 존재하는 것 같습니다. 이번 프로젝트에서도 뿌듯하고 보람찬 마음도 있지만 늘 그렇듯 아쉬움도 남습니다.
우선 제 마음이 조금 조급하지 않았나 하고 돌이켜 생각해봅니다. 프로젝트 중간에 Redux를 배워서 바로 적용해보고 싶은 마음이 앞섰던 탓에 조금 서두른 감이 있었습니다. 이 부분이 팀원들에게 힘든 점이 되지 않았을까 하고 뒤늦은 후회를 했습니다. 팀원들과 뒷풀이에서 허심탄회하게 이야기하며 회포를 풀었습니다..ㅎㅎ 루나, 서노 애정합니다.🧚😻
프로젝트 마지막에 부족한 시간에 Cart페이지를 구현하려고 하다 보니 css에 다소 집착했던 부분도 있었습니다. 레이아웃을 레퍼런스를 통해 잡으려고 하다보니 사이트와 맞지 않는 부분들을 수정하고싶은 욕심에...반나절을 이 집착에 허비하지 않았나 하고 두번째 후회를 적어봅니다...
이 후회들이 모여서 성장을 이룰 것이라고 생각하면서...아쉬운 점을 마치도록 하겠습니다.
기록하고 싶은 코드/함수/로직
기록하고 싶은 코드, 함수, 로직은 일부 따로 정리해두었습니다. 만약 보시다가 오류가 있거나 더 나은 방향이 떠오르신다면 댓글로 언제든지 지적이나 조언 부탁드리겠습니다.
-
소셜 로그인 기능 구현 ☛ Google 소셜로그인
-
Redux를 활용하여 장바구니 기능 구현 ☛ Redux + Redux persist
