[프로젝트] React.TS 암호화폐 정보 사이트

BITFOLIO

Bitfolio

이전부터 흩어진 데이터를 한 곳에 모아 관리할 수 있는 사이트를 만들고자 했었다. 암호화폐에 관심이 많고 생각보다 많은 정보들이 여기저기 흩어져있어 한번 데이터를 수집해보자는 생각으로 개발하게 되었다. React와 TypeScript를 기반으로 Redux와 MiddleWare를 사용했다.

 

 Features

~ 2021.11

• 시가 총액으로 정렬된 암호화폐 목록
• 검색 기능 (Trie 알고리즘)
• TradingView 차트
• 각 암호화폐 별 채팅방
• 구글 로그인 / 로그아웃

~2021.12

• 오픈 채팅방
• 관심 암호화폐 기능
• 암호화폐 목록 정렬 기능
• 다국가 언어 지원 기능
• 암호화폐 공포 지수 제공
• 반응형 UI 적용
• 각 암호화폐 별 상세 정보 제공

~2022.04

• TypeScript로 전환
• Context API를 Redux로 전환
• 암호화폐 도미넌스 지수 추가
• 주목받는 암호화폐 목록 추가
• 애니메이션 개선
• 코드 스플리팅 적용 등으로 성능 최적화
• 암호화폐 거래소 목록

 

Plans

• 암호화폐 포트폴리오 생성 및 관리 기능
• React Native 버전 개발

 

Stacks

• React with TypeScript
• Firebase
• Axios
• Styled Components

 

Achievements

• 최초에 JavaScript로 작성 후, TypeScript로 변환하는 작업을 수행하였음
• LiteHouse를 참고한 이미지 크기, CSS 최적화 등을 통해 성능 62%, 접근성 30% 가량 향상
• React.memo, useMemo, useCallback를 사용해 채팅창에서의 버벅임 개선
• Lazy를 사용해 불 필요한 로딩을 줄여 로딩 체감 속도를 절반 이상 개선
• Context API를 Redux로 교체해 서비스 확장 고려 (Ducks 스타일)

 

 

Retrospect

웹 개발자로서 커리어를 쌓고 싶다는 생각을 갖고 멋쟁이사자처럼 활동을 시작으로 웹 프로그래밍에 입문하게 되었다. 여러 번의 React와 Rest API, Django, 바닐라 JS를 사용한 프로젝트를 진행하며 틈틈히 웹 프로그래밍을 공부해왔다. React를 사용해 개발한 웹으로 해커톤 수상을 비롯한 여러 프로젝트로 기본을 다지고 해당 프로젝트를 시작하게 되었다. 최대한 내가 알고 있는 모든 기술들을 사용하려고 시도했다.