Reactjs 가상화폐 시세 테이블 웹 앱 개발기

최근 프론트앤드 분야에선 ReactJS의 관심도가 정말 높은것같습니다. 물론 Vue.js같은 다른 라이브러리도 있지만 아무래도 페이스북에서 개발했다는(?) 장점과 풍부한 자료 덕분에 Reactjs에 관심이 많이 가지않나 생각합니다. 물론 채용시장에서도 ReactJS는 정말 필수일 정도로 관심이 뜨겁더라구요.

 

저도 Scrimba, Inflearn 등의 온라인 수업들을 통해서 ReactJS로 개발한 채팅사이트, 연락처 프로그램을 개발해보았지만 사실 개념의 이해했다기보다 코드들을 보고 따라 개발한것들이 많아 뭔가 새로운것을 개발해보라하면 ReactJS를 적용이 가능할까 의문이 많이 들었습니다. 이에 ReactJS를 활용해서 가상화폐 시세를 테이블로 가져오는 웹 앱을 개발해보기로 하였습니다. 게다가 ReactJS의 경우에는 데이터가 바뀐 view에서만 렌더링 변경이 일어나므로 실시간으로 데이터가 계속적으로 바뀌어야하는 가상화폐 시세 테이블을 만드는데 아주 적합하다고 생각하였습니다.

 

사실 최근까지 포트폴리오 사이트를 작업하면서 대부분의 Ajax의 요청은 처음에는 jQuery의 Ajax 요청을 사용하였지만 최근에는 jQuery의 사용을 줄이기 위하여 최대한 Fetch API를 사용하여 개발하고 있습니다.

 

사실 API를 통해서 데이터를 받아와서 순차적으로 테이블을 지웠다가 다시 새로 렌더링 하는 프로그램은 포트폴리오 사이트의 관리자 페이지에서 개발하였었지만 저는 이번 프로젝트에서 React 스럽게 개발하길 원했기때문에 일반적으로 ReactJS 프로젝트에선 어떤 방법으로 요청을 전달하는가에 대해서 알아보니 'axios'라는 라이브러리를 사용함을 확인하였습니다.

 

데이터는 빗썸의 API를 활용하였고 추후에 업비트나 다른 해외거래소들의 API도 추가할 예정입니다. 우선 1차적으로 React로 테이블을 생성하고 여기에 데이터를 지속적으로 새로 렌더링 하는 웹앱의 개발은 성공하였습니다. 다만 언제나 그렇듯이 항상 반응형으로 완성시키고 모든 디바이스에 정상적으로 원하는 화면을 출력하기에는 많은 노력이 필요한것같습니다.

 

우선 1차적으로 완성된 코드들은 codeSandbox를 통해서 공유합니다. 이 코드들은 Github 링크 및 Github Pages을 통해서도 공유되고있습니다.

 

Github repository : https://github.com/sangumee/Crypto-Table

Github Pages : https://sangumee.github.io/Crypto-Table/

Crypto Table

sangumee/Crypto-Table

codeSandbox