목표는 제가 알고 있는 기술스택을 최대한 드러낼 수 있는 프로젝트를 만들고, 또 그 과정에서 그 동안 배웠던 것을 리마인드 하는 것입니다.
- Bithumb API로 데이터를 불러와 차트로 현재 선택된 암호화폐의 시세를 확인할 수 있습니다.
- API로 불러온 암호화폐의 현재가와 목록을 확인하고, 사이드바에서 차트에 나타 낼 암호화폐를 선택 할 수 있습니다.
- 왼쪽 하단에 존재하는 버튼으로 테마를 다크테마로 바꿀 수 있습니다.
- 화면 크기가 지정된 tablet 사이즈보다 작아질 경우 Sidebar를 감추고 헤더에 햄버거 버튼을 나타내는 방식으로 반응형 웹을 구현 했습니다.\
- API 통신과정에서 생긴 에러는 Sentry를 통해 로그됩니다.
복잡한 생각 없이 뛰어든 프로젝트였고, 단순하게 공고에 Visualization Library 사용 경험이 있었기에 가장 다이나믹한 데이터를 다룰 수 있으면서 공개된 API가 많은 암호화폐를 주제로 정했지만 이게 가장 큰 패인이었습니다.
단순히 "암호화폐 API를 활용하여 Visualization Library를 다루고, 알고 있는 기술을 드러낼 수 있으면 될 것이다"라는 목표는 저에게 충분한 동기부여가 되지 않았고, 힘차게 시작했던 프로젝트는 금방 추진력을 잃어버렸습니다.
갈수록 힘을 잃는 커밋 그래프
좀 더 확실하고 리즈너블한 목표가 있었다면 좋았을 것이라고 생각하게된 프로젝트였습니다. 어찌되었건 사이드 프로젝트는 본인이 좋아서 붙잡고 있어야한다고 생각합니다.
이에 대한 증명으로 포트폴리오를 하면서 중간에 아이디어가 떠올라서 만든 간단한 프로젝트인 Tombo는 정말 재미있게 작업했습니다. 물론 기술적인 목표와는 전혀 상관없는 프로젝트였지만 그래도 정말 즐겁게 작업할 수 있었습니다.
https://github.com/dragonsuperf/Tombo Tombo의 저장소 링크
원했던 목표의 일부를 제대로 달성하지 못하기도 했습니다. 리액트에 익숙해지면 작성하겠다고 미루어두었던 테스트는 이번에야 말로 작성해보겠다고 다짐했지만, 이번에도 제대로 작성하지 못했습니다. 다른 목표와의 트레이드 오프라고 생각해도 포기하면 안되는 목표였는데, 당장 눈에 보이는 결과가 좋지 못하니 마음이 급해져서 "일단 구현 먼저 끝내놓고 작성하겠다"라고 미뤄버린 탓 입니다. 테스트를 작성하지 않았기에, 만들어놓은 CI/CD 환경도 큰 의미가 없어져버렸습니다.
물론 어느정도 만족스러운 결과도 있었습니다. CRA를 사용하지 않고 webpack, babel을 사용해서 프로젝트를 경험해본 것은 번들러와 트랜스파일러의 이해도를 높힐 수 있는 기회였습니다. 이 프로젝트가 아니었다면 아직도 CRA의 편리성에 안주하고 있었을 것이라고 생각합니다.
작지만 오픈소스에 기여하게 된 것도 좋은 경험이었습니다. Visualization Library를 선택하는 과정에서 웹팩 5.x 버전에서만 생기는 tui-chart의 문제를 이슈로 올렸었고, 이는 4.2.1 버전에 포함되어 수정 되었습니다.
정리를 하자면 만족스러운 결과를 내지는 못했지만, 배울게 많았고 제가 어느정도 위치까지 왔는지 되돌아 볼 수 있는 기회였다고 생각합니다.
밑의 기록은 제가 개발을 하면서 했던 생각들과 마주쳤던 문제를 해결하는 과정, 의사결정 등을 기록한 것으로 편하고 두서없이 작성된 것을 미리 양해를 구합니다.
- Visualization Library를 활용하기 좋은 Open API를 선정하기 위한 후보
- 시국에 맞는 코로나19 Open API
- 빠른 주기로 업데이트되는 암호화폐 Open API
- 조금 더 동적인 데이터를 다루는 암호화폐 Open API가 더 적합하다고 생각하여 이를 채택
- Typescript 세팅
- eslint, prettier 세팅
- jest, rtl 세팅 후 간단한 테스트 작성
- Visualization Library 후보
- d3 ( React와 같이 사용하려면 신경을 써야하는 부분이 있다 )
- @toast-ui/react-chart ( 줌 기능이 이미 존재한다, 디자인이 괜찮다 )
- react-chartjs-2
@toast-ui/react-chart가 Stock chart로 많이 쓰이는 candle stick chart를 기본 지원하므로 이를 채택하기로 결정
TypeError: y[t] is not a constructor라는 에러와 함께 런타임 에러가 발생 😥- 무엇이 문제인지 파악하기 위해 가장 의심되는 설정을 바꿔서 시도해보았고, CRA로 새로 세팅을하고 시도하니까 멀쩡하게 잘됨
- 어제 eslint, prettier 설정에 애를 먹었고 도중에 의존성이 계속 말썽이였기 때문에 번들러인 webpack 설정 중 어느것이 말썽을 일으켰을 것이라고 추측.. ( 본인의 설정을 믿지 못했음 )
- 무엇이 문제인지 쉽게 찾아지지 않아서 webpack, babel, typescript, react 전부 다시 세팅해서 시도해보았지만 안됨
- CRA에서는 되고 직접 세팅하면 동작하지 않기 때문에 CRA 설정과 직접 세팅의 차이점을 확인해가면서 시도해보기로 결정하고 eject 명령으로 CRA의 설정파일을 노출 시킴
- 가장 의심되던 webpack은 직접 세팅이 webpack은 5.24.4 버전, CRA이 webpack은 4.44.2 버전이었고, 직접 세팅의 webpack을 4.44.2 버전으로 다운그레이드 하니 정상 동작하는 것을 확인
- webpack version을 4.44.2로 다운그레이드
- Toast ui chart로 candle stick chart 예제 컴포넌트 작성
- 혹시 도움이 될까 싶어서 해당 레포지토리에 이슈를 남김
- nhn/tui.chart#619
- 2021-03-26. 해당 이슈가 wrapper의 문제라는 답을 받았고, 4.2.1 버전에 픽스되어 릴리즈되었다
axios를 사용한 이유는? (굉장히 단순한 이유)
- Ready to use이기 때문에 빠르게 개발할 수 있다
- 익숙하다
- 일단 BTC만 가져올 수 있도록 해뒀음
- 하지만 정상적으로 동작하지 않는다.. 😪😪😪
- 데이터의 범위가 작을 때 차트에 정상적으로 그려지지 않는 것 같다.. ( @toast-ui/chart의 문제인가? )
- 오래동안 사용하지 않았던 랩탑에 개발환경을 새로 세팅하고 코딩을 했는데, 플러그인과 린트가 어째서인지 제대로 동작하지 않는다..
- 그래서 오늘 커밋한 코드는 정말 엉망이다
- tui-chart에서는 어떤 이유 인지 정확히 알 수 없었지만 변동폭이 적으면 차트 내에서 y-axis가 이상하게 변하는 버그가 존재했음
- 디버깅하는 시간이 길어지자 일정을 생각해서 다른 라이브러리를 사용하는 것으로 눈을 돌림
- candlestick chart가 존재하는 react-google-chart로 일단 결정
- google chart에서는 원하는 이벤트 핸들링( 마우스 스크롤 )이 없는 것으로 판단되기에 d3를 써야할 지 굉장히 고민중
- d3를 사용한다면 러닝 커브와 구현 시간 때문에 일정 중 많은 시간을 사용해야 할 것으로 판단되어 잠시 보류중
- 시간이 제대로 표기되지 않음
- http api를 통해서 데이터를 받아오고 있는데, 실시간 데이터 처리를 위해 첫번째 로드 이 후에는 websocket을 사용해서 차트를 그릴 수 있도록 수정해야함
- 구현해야할 항목들을 정리할 필요가 있다고 생각됨
- 프로토타이핑을 해보는 것도 좋은 아이디어 일지도..
- Bithumb Websocket API를 구독하고 콘솔에 출력하도록 해두었음
- date format 변환에는 Moment를 사용
- 점점 라이브러리만 늘어나고 있다. 직접 구현을 하면 좋겠지만, 구현을 하는데 시간을 쏟기보다는 먼저 형태를 갖추고 싶다. 변명이지만 모든 기능을 전부 구현하기에는 시간안에 원하는 것을 만들지 못할거 같다..
- high, low price가 제대로 출력되지 않는 문제가 있음
- 초기 데이터와 3분가량 차이가 나는 문제가 있음 ( 문제가 되지 않는걸까? )
아무 생각 없이 Bithumb API로 시작하면 Bithumb과 같은 차트를 만들 수 있을거라고 생각하고 Bithumb API로 시작데이터를 받다보니 HTTP API로 받을 수 있는 틱데이터는 정확도가 떨어짐 ( 현재 시간으로부터 3분 전의 데이터를 받아옴 )그래서 웹소켓으로 tickdata를 메우려고 헀지만 웹소켓으로 받아오는 tickdata는 실시간이어서 소실된 3분간의 데이터를 차트에 그릴 수 없음따라서 가장 강력한 무료 암호화폐 API ( 본인들이 그렇게 써놓았음 )인 coingecko로 API를 변경했다
- coingecko는 OHLC를 30분 단위로만 제공한다.
- 다른 API 서비스는 대부분 유료임
- 무료로 제공하는 API 중에 가장 나은 것은 bithumb api라고 판단됨
- 따라서 Bithumb API를 계속 사용하는 걸로..
- Bithumb의 HTTP API로 받아오는 tickdata는 가장 최근 데이터가 3분전이다
- 따라서 서비스도 되는 거래소처럼 한차트에 실시간으로 Tickdata를 보여주는 것은 아무리 개선을 해도 3분의 공백 때문에 어색하게 보인다
- 그렇기에 지난 tickdata 기록 차트와 실시간 tickdata 차트를 분리하려고한다.
- 이렇다면 지난 시세의 흐름도 알 수 있고 현재 가격의 흐름도 tickdata로 볼 수 있다.
- 실제 거래소처럼 차트를 구현하고 싶었는데 그러지 못해서 아쉬움이 남는다 😂
- 세가지의 영역은 각각 header, section, aside로 시맨틱 태그를 사용
- 이 수정사항을 적용하면서 상대경로가 아닌 절대경로로 import를 할 수 있게 바꾸었는데, tsconfig만 수정하면 되었던 CRA와는 다르게 webpack에서는 웹팩 설정과 eslint 설정을 따로 추가해주어야 해서 잠시 해멨음 ( 꽤 헤메었음 😁 )
- 24시간 내에 하락세였다면 파란색, 그렇지 않다면 붉은색으로 표시
- srs/styles/에 전역 스타일과 테마를 정리하였음
- 사실 Redux를 사용할 필요가 없는 프로젝트지만 Redux Toolkit의 사용법을 리마인드 하는 차에서 작성하였음
- Sidebar에 선택된 코인 하이라이트
- Travis, AWS CodeDeploy로 CI CD 구성
- Auto Scaling Group을 사용하여 Blue/Green Deploy로 무중단 배포
- 이렇게 구성한 이유는 일단 현 회사에서 구축한 CI/CD 시스템이 동일한 기술 스택을 사용하고 있었고, 3달 가까이 문제없이 사용하고 있기 때문
- Cloudfront와 같은 서비스를 사용하지 않은 것은 간단하지만 docker를 사용함으로서 해당 기술에 대한 이해가 어느정도는 있다는 것을 어필하기 위함
- setInterval을 useEffect에서 사용할 경우 생길 수 있는 문제 때문에 http api를 사용하는 로직에 문제가 있었는데, setInterval을 return(unmount) 할때 clearInterval로 청소하여 해결
- Travis CI, AWS CodeDeploy로 이어지는 서비스에 대한 세팅은 한번 했었기 때문에 삽질은 조금 했어도 금방 세팅할 수 있었다
- 다만 회사에서는 이미 node 환경이 갖추어진 이미지를 가지고 인스턴스를 만들어 세팅했었는데, 아무것도 세팅되어있지 않은 AMI에 node를 세팅하니 배포 시 동작하는 shell script 내에서 yarn이 동작하지 않았다
- 멋진 해결방법은 아니지만 shell script 내에 환경변수를 추가하는 스크립트를 넣고 일단은 배포를 제대로 동작하게 해두었다
- styled-components의 DefaultTheme을 통해 다크모드 구현
- 화면 크기에 맞춰 반응형으로 사이드바를 감추고, 헤더에 사이드바를 토글할 수 있는 버튼을 만들었음