특정 날짜에 어떤 코인을 얼마만큼 샀다면 현재 얼마가 되어있을지 바로 확인할 수 있는 웹 기반 서비스입니다.
- 코인, 날짜, 금액을 입력하고 현재는 가치가 얼마나 바뀌었는지 계산할 수 있습니다.
- 계산한 코인 종류의 현재 차트를 전체, 1년, 1달, 1주, 1일 단위로 볼 수 있습니다.
- 현재 마켓에 활성화된 모든 코인에 대한 시세표를 볼 수 있고, 페이지별 정렬 기능을 제공합니다.
- 원화와 달러 화폐 단위를 지원합니다.
- 검색 기록을 조회할 수 있습니다. 검색한 화폐단위 별로 필터링하여 조회하는 기능 또한 제공합니다.
- 딱딱한 차트와 복잡한 지표들이 아닌, "만약에~했더라면?" 이라는 재밌는 상상에 기반한 매력적인 가상화폐 정보 플랫폼
- 전체 가상화폐 현황과 더불어 코인별 간단한 차트까지 한 번에 확인할 수 있는 범용성
- 복잡한 페이지 이동, 회원가입 및 로그인 없이 단일 페이지 내에서 부담없이 사용할 수 있는 심플함
- 간편한 공유, sns업로드 기능을 통한 자연스러운 홍보 효과 기대
- 라우트가 없는 싱글페이지 앱인 만큼
dynamic import기법을 이용하여 페이지 로딩속도를 개선했습니다. - Smart 컴포넌트와 Dumb 컴포넌트를 구분하여 비즈니스 로직과 뷰 로직을 분리시켜 개발경험을 개선했습니다.
styled-components의 props를 십분 활용하여 스타일 코드를 기능적 코드로부터 격리시키고 디자인 시스템과 유사한 환경을 구축하였습니다.- Pagination 기법을 통해 단일 페이지 내에 자칫 무거워질 수 있는 api요청들을 최소화하여 퍼포먼스 향상을 이루었습니다.
- 상태 관리 라이브러리로
Zustand를 사용하여 transient한 업데이트를 지향하고 불필요한 재렌더링을 최소화 하였습니다. - 웹, 모바일 환경에서도 이용에 불편함이 없도록 반응형 웹 디자인을 적용했습니다.
Language
CSS
Framework
State Management Tool
Collaboration Tool
Version control
Build Tool
Deployment
Others
| 🦥 Kenny | 🪓Henry | 🎸 Ian |
|---|
- 프로젝트 전역적으로 사용할 수 있는 "마이크로 컴포넌트" 제작
- styled components를 이용하여 마이크로 컴포넌트의 prop만으로 프로젝트에 맞는 폰트, 배경색, 레이아웃 등을 스타일링 할 수 있도록 설계
- 사용자 입력 폼 개발 및 반응형 디자인 적용
- react-datepicker 라이브러리 커스텀 디자인 적용
- submit시 api호출 및 입력 데이터와 전역 상태 연동 등 기능 개발
- 입력 데이터 예외 처리
- 로컬 스토리지를 이용하여 검색 기록 저장
- 검색기록 열람 기능 구현
- 사용자가 선택한 화폐에 맞는 기록을 보여주는 검색기록 필터링 기능 구현
- 검색기록 삭제 기능 구현
- 전역으로 관리할 상태 정의 및 카테고리별로 분류
- zustand를 사용하여 카테고리별 store 개발
- 상태에 따른 액션 정의 및 개발
- api요청을 통해 받아온 코인 정보 캐싱 로직 구현
- 컴포넌트별 필요한 props, state, 함수, 구독할 전역 상태 정의
- 컴포넌트별 필요한 api 선택
- coinGecko api문서를 참고하여 기능별로 필요한 api 정리
- 호출할 api별 필요한 파라미터 정의
- recharts 라이브러리를 이용하여 프로젝트에 맞는 커스텀 디자인 적용
- api 호출로 받아온 차트 데이터 가공
- 선택한 기간별로 다른 데이터를 적용하여 서로 다른 차트 렌더링 구현
- dynamic import기법을 통한 차트 컴포넌트 lazy loading 구현
- Suspense 컴포넌트를 이용하여 차트 데이터를 불러오는 동안 로딩 애니메이션 적용
- ErrorBoundary 컴포넌트를 이용한 예외 처리
- 카카오톡 공유 기능 구현
- 페이스북 게시물 공유 기능 구현
- 링크 복사 기능 구현
- 컴포넌트 조립 및 전체 페이지 레이아웃 구성
- 칩, 버튼, select, 가격 변동 폭 UI 컴포넌트 개발
- Gnb 컴포넌트 레이아웃 구성
- 반응형 디자인 적용
- 화폐 변경, 초기화, 검색기록 UI 개발
- semantic 태그를 사용하여 접근성과 SEO를 고려한 UI 구현
- 반응형 디자인 적용
- 뷰포트 사이즈 실시간 변동에도 대응할 수 있는 pagination 로직 설계 및 구현
- 전역 상태에 캐싱된 코인 정보 활용으로 api요청 최소화
- axios 라이브러리 사용
- axios 커스텀 인스턴스 생성
- interceptor 사용
- 원활한 비동기 데이터 요청 및 처리를 위한 useAsync 커스텀 훅 개발