Vue.js + Nuxt.js에서 코인 체크 차트 디스플레이 서비스를 만들었습니다.

교토에서 프리랜서 웹 디자이너를 하고 있는 야마네( @ She_Yamane )입니다.

이번에는 Vue.js + Nuxt.js에서 가상 화폐의 차트 표시 서비스를 만들었으므로 그 소개입니다. 만든 사이트는 다음과 같습니다.



bitChecker - 가상 화폐 차트 디스플레이 서비스

구성

가상 화폐 거래소의 코인 체크 API가 크로스 도메인 대응하고 있지 않았기 때문에 한 번 API 서버를 만들어 거기 경유로 정보를 건네주고 있습니다.

API 서버

ConoHaVPS의 가장 저렴한 계획

Ruby

데몬화하여 5초마다 차트 정보 얻기

보는 서버

Netlify에서 0 엔

Vue.js + Nuxt.js

차트는 D3.js와 TechanJS를 사용

setInterval에서 5 초마다 API 서버 정보 얻기

감상

특히 빠진 곳도없이 실시간 표시 서비스이므로 Vue.js를 사용하여 매우 쉽게 코딩 할 수있었습니다. 설정에서 컬럼 수를 바꾸거나 다크 모드로 전환할 수 있습니다만 그 편은 Vue.js를 사용하면 매우 편하게 쓸 수 있는 부분이군요.

Nuxt.js 넣는 의미가 있는지에 대해서 이야기라고 생각합니다만, 향후 문장 정보를 넣고 싶은 경우의 확장성을 생각해 처음부터 Nuxt.js를 도입했습니다. 라우팅도 OGP 대응도 편하네요.

서버는 Netlify에서 Github를 통해 쉽게 배포됩니다. 아마존의 S3도 검토했지만 Netlify는 무료이며 CDN도 마음대로 해주고 배포 너무 즐겁게 Netlify를 선택했습니다.

끝

이상, 코드의 소개도 아니고 사례 소개가 되어 버렸습니다만, Vue.js를 사용하면 이런 리얼타임성이 있는 사이트도 만들기 쉽다고 하는 이야기였습니다. 이것을보고 Vue.js를 사용해보십시오! 라고 생각하는 사람이 조금이라도 늘어나면 기쁩니다.