CryptoMeter

---

Demo

CryptoMeter

프로젝트 소개

개요

특정 날짜에 어떤 코인을 얼마만큼 샀다면 현재 얼마가 되어있을지 바로 확인할 수 있는 웹 기반 서비스입니다.

주요 기능 소개

• 코인, 날짜, 금액을 입력하고 현재는 가치가 얼마나 바뀌었는지 계산할 수 있습니다.
• 계산한 코인 종류의 현재 차트를 전체, 1년, 1달, 1주, 1일 단위로 볼 수 있습니다.
• 현재 마켓에 활성화된 모든 코인에 대한 시세표를 볼 수 있고, 페이지별 정렬 기능을 제공합니다.
• 원화와 달러 화폐 단위를 지원합니다.
• 검색 기록을 조회할 수 있습니다. 검색한 화폐단위 별로 필터링하여 조회하는 기능 또한 제공합니다.

목표

• 딱딱한 차트와 복잡한 지표들이 아닌, "만약에~했더라면?" 이라는 재밌는 상상에 기반한 매력적인 가상화폐 정보 플랫폼
• 전체 가상화폐 현황과 더불어 코인별 간단한 차트까지 한 번에 확인할 수 있는 범용성
• 복잡한 페이지 이동, 회원가입 및 로그인 없이 단일 페이지 내에서 부담없이 사용할 수 있는 심플함
• 간편한 공유, sns업로드 기능을 통한 자연스러운 홍보 효과 기대

기술적 성취

• 라우트가 없는 싱글페이지 앱인 만큼 dynamic import 기법을 이용하여 페이지 로딩속도를 개선했습니다.
• Smart 컴포넌트와 Dumb 컴포넌트를 구분하여 비즈니스 로직과 뷰 로직을 분리시켜 개발경험을 개선했습니다.
• styled-components의 props를 십분 활용하여 스타일 코드를 기능적 코드로부터 격리시키고 디자인 시스템과 유사한 환경을 구축하였습니다.
• Pagination 기법을 통해 단일 페이지 내에 자칫 무거워질 수 있는 api요청들을 최소화하여 퍼포먼스 향상을 이루었습니다.
• 상태 관리 라이브러리로 Zustand를 사용하여 transient한 업데이트를 지향하고 불필요한 재렌더링을 최소화 하였습니다.
• 웹, 모바일 환경에서도 이용에 불편함이 없도록 반응형 웹 디자인을 적용했습니다.

Tech Stacks

Language

CSS

Framework

State Management Tool

Collaboration Tool

Version control

Build Tool

Deployment

Others

Contributors

🦥 Kenny	🪓Henry	🎸 Ian

🦥 Kenny

스타일 시스템 구축

• 프로젝트 전역적으로 사용할 수 있는 "마이크로 컴포넌트" 제작
• styled components를 이용하여 마이크로 컴포넌트의 prop만으로 프로젝트에 맞는 폰트, 배경색, 레이아웃 등을 스타일링 할 수 있도록 설계

InputBoard 컴포넌트 개발

• 사용자 입력 폼 개발 및 반응형 디자인 적용
• react-datepicker 라이브러리 커스텀 디자인 적용
• submit시 api호출 및 입력 데이터와 전역 상태 연동 등 기능 개발
• 입력 데이터 예외 처리

검색기록 기능 개발

• 로컬 스토리지를 이용하여 검색 기록 저장
• 검색기록 열람 기능 구현
• 사용자가 선택한 화폐에 맞는 기록을 보여주는 검색기록 필터링 기능 구현
• 검색기록 삭제 기능 구현

전역 상태 관리

• 전역으로 관리할 상태 정의 및 카테고리별로 분류
• zustand를 사용하여 카테고리별 store 개발
• 상태에 따른 액션 정의 및 개발
• api요청을 통해 받아온 코인 정보 캐싱 로직 구현

---

🪓Henry

인터페이스 설계

• 컴포넌트별 필요한 props, state, 함수, 구독할 전역 상태 정의
• 컴포넌트별 필요한 api 선택

필요한 api 설계

• coinGecko api문서를 참고하여 기능별로 필요한 api 정리
• 호출할 api별 필요한 파라미터 정의

Chart 컴포넌트 개발

• recharts 라이브러리를 이용하여 프로젝트에 맞는 커스텀 디자인 적용
• api 호출로 받아온 차트 데이터 가공
• 선택한 기간별로 다른 데이터를 적용하여 서로 다른 차트 렌더링 구현
• dynamic import기법을 통한 차트 컴포넌트 lazy loading 구현
• Suspense 컴포넌트를 이용하여 차트 데이터를 불러오는 동안 로딩 애니메이션 적용
• ErrorBoundary 컴포넌트를 이용한 예외 처리

sns 공유, 링크 복사 기능 개발

• 카카오톡 공유 기능 구현
• 페이스북 게시물 공유 기능 구현
• 링크 복사 기능 구현

페이지 레이아웃 개발

• 컴포넌트 조립 및 전체 페이지 레이아웃 구성

---

🎸 Ian

공통 컴포넌트 개발

• 칩, 버튼, select, 가격 변동 폭 UI 컴포넌트 개발

Gnb 컴포넌트 개발

• Gnb 컴포넌트 레이아웃 구성
• 반응형 디자인 적용
• 화폐 변경, 초기화, 검색기록 UI 개발

Table 컴포넌트 개발

• semantic 태그를 사용하여 접근성과 SEO를 고려한 UI 구현
• 반응형 디자인 적용
• 뷰포트 사이즈 실시간 변동에도 대응할 수 있는 pagination 로직 설계 및 구현
• 전역 상태에 캐싱된 코인 정보 활용으로 api요청 최소화

api 요청 기능 개발

• axios 라이브러리 사용
• axios 커스텀 인스턴스 생성
• interceptor 사용
• 원활한 비동기 데이터 요청 및 처리를 위한 useAsync 커스텀 훅 개발