2021.07.19 - 2021.07.30
데모페이지 보러가기 **시연영상 |** **깃허브 | 회고록**
8퍼센트 홈페이지 클론 프로젝트를 프론트엔드, 백엔드 엔지니어와 함께 팀 프로젝트로 진행했습니다. 8퍼센트는 일반 커머스 웹사이트가 아닌 핀테크 서비스를 제공하는 웹사이트로, 해당 프로젝트는 금융 데이터의 적절한 가공에 중점을 두었습니다. 비교적 복잡하고 큰 규모의 데이터를 다루면서 백엔드 엔지니어 분들과의 커뮤니케이션 및 협업이 매우 중요하였는데, 1주를 기반으로 한 스프린트 방식의 협업방법을 채택하여 작업 효율을 극대화하고 팀워크를 다지기 위해 노력했습니다.
담당한 부분은 카카오로그인 및 사용자의 투자내역과 투자요약을 볼 수 있는 마이페이지입니다. 카카오로그인의 경우 소셜로그인 API를 연동하였고, 마이페이지의 경우 위에서 언급한 데이터 가공의 진수를 맛볼 수 있는 부분이었는데요. 특히 금융데이터를 가공하여 고도화된 데이터를 표현하고, Chart.js와 같은 라이브러리를 이용하여 시각적인 정보로 처리하는 기능을 구현하는 것이 매우 즐거웠습니다. 또한 함수형 컴포넌트의 도입으로 react hook을 적극적으로 활용하였고, styled-component를 도입하여 자바스크립트의 동적인 값을 온전히 사용할 수 있도록 하였습니다.
<aside> 💁♀️ 결과물 자세히 보기
✔️ 마이페이지의 투자요약 섹션 한 덩어리로 받은 사용자의 투자내역 데이터를 가공하여 탭이동을 통해 분할하여 시각화하였습니다. 보다 직관적인 정보전달을 위해 chart.js 및 progress 태그를 사용하여 차트 및 progress bar를 구현했습니다.
✔️ 마이페이지의 투자내역 섹션 테이블을 이용하여 데이터를 한눈에 볼 수 있도록 처리했습니다. 라이브러리를 사용하지 않고 페이지네이션을 구현하였으며, 상환상태 및 검색어에 따른 filtering 기능을 구현했습니다.
✔️ 소셜로그인 기능
카카오 로그인 API를 이용하여 인증/인가를 처리하였습니다. 보안 문제를 해결하기 위해 카카오 init key를 .env 파일에 환경변수로 넣어 보안과 유지보수가 용이할 수 있도록 했습니다.
</aside>