거래소 API 접근할 때 알아두면 좋은 함수

---

재미로 호기심에서 출발했네요. 구글 스프레드시트로 출력하는 게시물들도 많고 공부차원으로 접근하게 되었네요. "어떤식으로 값을 가져오는 것일까?"에서 출발해서 가져오는 함수들을 살펴보게 되었습니다. 거래소 API은 공식과 비공식으로 나뉘는데 공식은 해당 거래소에서 API주소를 공개해주기 때문에 접근하기는 편합니다. 하지만 비공식의 경우는 내부적으로 사용하는 링크 주소로 어느정도 프로그램에 관심있는 분들은 웹브라우저의 개발창에서 네트워크 정보를 보고 데이터의 흐름에 관련된 링크 주소를 찾아내서 가상화폐의 정보를 가져오기도 합니다.
이 포스트를 쓰면서 이런 주제를 써도 될려나 하고 애매한 입장에서 공부차원으로 원리만 이해하시라는 목적으로 그냥 포스팅 하겠습니다.

1. 구글 스프레드시트 함수

---

구글 스프레드시트(엑셀)에서는 과연 어떤식으로 외부 거래소의 가상화폐정보를 가져오는 것일까?

---

• 출처 : 구글스프레드시트를 이용하여 거래소 실시간 가격 가져오는 API를 만들어보자 1탄

---

여러 비슷한 글이 많은데 이분이 로직을 잘 짜셨더군요. 그리고 공부에 참조했습니다.

---

배워야 할 함수

• UrlFetchApp.fetch(url) : url 가져옴
• 객체.getContentText() : 이 함수로 해당 페이지의 정보를 문자열로 가져옴
• JSON.parse(저장변수) : 읽어온 문자열 정보를 다시 json 형식으로 바꿈

---

참고 출처 레퍼런스 :

• fetch(url) : https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app
• getcontentText() : https://developers.google.com/apps-script/reference/url-fetch/http-response

---

배워야 할 세함수만 있으면 해당 거래소 api url의 정보만 있으면 쉽게 가상화폐의 정보를 읽을 수 있게 됩니다.

function getbithumb(coin){
  var url = "https://api.bithumb.com/public/ticker/"+coin; //url 주소
  var result = UrlFetchApp.fetch(url); //url 가져옴
  var dataset = result.getContentText(); //url의 페이지정보를 문자열로 읽음
  var d = JSON.parse(dataset);  //json 형식으로 변경
   
  return d.data.closing_price; //json 접근한 해당 코인의 마지막 거래가격을 반환(return)
}

---

• 1단계 : url 주소를 변수에 저장
• 2단계 : urlFetchApp.fetch(url) 실행
• 3단계 : getContentText()로 해당 페이지 문자열로 읽음
• 4단계 : JSON.parse(dataset)로 json 형태로 변경
• 5단계 : 저장변수명.data.closing_price로 마지막 가격 정보를 접근

---

위 과정은 어느 거래소나 동일하게 적용되지만 마지막 5단계는 해당 거래소에서 제공되는 json형식에 따라 달라집니다.

알아야 할 거래소 API url에 기록된 정보

---

• 빗썸거래소 출처 : https://www.bithumb.com/u1/US127

---

위 빗썸 공식페이지 보면은 url이 아래와 같습니다. currency은 어떤 코인인지를 적는 부분입니다.

https://api.bithumb.com/public/ticker/{currency}

만약, BTC라면

https://api.bithumb.com/public/ticker/BTC

이렇게 경로가 되겠죠. 그러면 도대체 저기에 뭐가 들어있는지 살펴볼까요. 웹브라우저에 이 url로 넣고 돌려보세요.

---

먼지는 모른데 json 형식으로 나열되어 있습니다. 해당 거래소의 페이지에 정보를 꼭 확인하세요.

이게 옆으로 나열되어서 가독성이 떨어지지만 세로로 나열시키면 아래의 모습입니다.

{"status":"0000",
 "data":
            {"opening_price":"8005000",
             "closing_price":"7526000",
               ...
            }
}

접근은 json이 편하다고 했죠. 그 이유는 위의 표현에서 순서대로 해당 필드명을 통해서 접근하게면 됩니다. 마지막 거래 가격은 어디에 담겨져 있나요. data에서 closing_price라는 위치에 저장되어 있죠. 그러면 각 경로마다 접근자 '.'(콤마)를 이용해서 접근하는데 아래와 같은 표현으로 접근하게 됩니다.

변수명.data.closing_price 

이렇게 해서 마지막 거래가격(closing_price)을 얻을 수 있습니다. 이럽게 접근된 가격은 "7526000"가 됩니다.

그런데 상황에 따라 좀 달라지는데 실험 목적으로 인터넷에 떠도는 비트업 내부 api로 한번 테스트 목적으로만 돌렸는데

d.openingPrice;  

접근이 안되더군요,

d[0].openingPrice;

이렇게 표현을 해야 현재 코인의 가격을 얻어오게 되더군요. json으로 접근하실때 변수명.필드명으로 접근이 되는 경우도 있고 배열변수로 저장되는 경우는 변수[0].필드명으로 접근해야지 정상적으로 동작하게 되는 곳도 있습니다. 왜 안되지 하실때는 변수[0]으로 해서 접근을 해보세요.

그외는 불러오는데 아무런 문제가 없더군요.

다섯줄 설명이 너무 길어졌네요. 위 내용은 그냥 호기심의 실험 노트입니다. 공개된 정상적 api url로 정상적인 목적으로 활용하시기 바랍니다.

구글 스프레드시트 단점

---

실시간 정보를 얻기는 다소 무리가 있습니다. 자바스크립트를 통해서 갱신한 정보는 바로 다이렉트로 일치하는데 구글 스프레트시트에서 갱신된 정보는 딜레이 차가 큽니다. 실시간 대응용이라기 보다는 어느정도 실시간 성을 가진 정보를 수집하여 분석용으로 사용하기에 좋을 듯 싶네요.

2. 자바스크립트 함수

---

Steem.js API에 관심을 많이 두고 연구하는데 이것도 자바스크립트로 접근해볼까 하는 호기심이 발동하더군요. 그래서 찾아낸 함수가 이 방식으로 많이들 접근하네요. 가장 매래트가 있는 방식이기도 하고요. 실시간성에서 바로 일치된 가상화폐정보를 얻을 수 있으며 그 정보를 HTML로 뿌려주기도 좋고 나만의 거래소 상황판을 만들 수 있다는게 꽤 재미가 있었습니다.

---

배워야 할 함수

• XMLHttpRequest() : HTTP request를 하기에 아주 쉽게 해줍니다.
• 객체명.open("GET",url,false) : 해당 url에 정보를 가져오기 때문에 "GET" 보내면 "POST"겠죠. 세번째 false은 가져올때까지 대기하라는 명령입니다. 즉, 가져올때까지 암것도 못하게 하는 것이고, true이면 가져오라고 명령을 내리지만 난 다른일 할거야 라고 생각하시면 됩니다. true의 경우는 가져왔는지는 확인하기가 참 애매해서 fasle로 세팅함.
• 객체명.send() : 마지막으로 이 명령은 위에서 세팅한 내용을 send()을 통해서 보내서 실행시키라는 명령으로 생각하시면 됩니다.

---

자바스크립트에서는 XMLHttpRequest 이걸 이용해서 접근하게 됩니다. 객체를 선언하고 open(), send() 이 함수만 하시면 끝 세개로 간단히 접근할 수 있죠.
그런데 모든 거래소의 정보를 다 가져올 수 는 없습니다. 몇몇 거래소에서는 네트워크 에러가 발생합니다. 이걸 해결하기 우해서는 바꿔져야할 부분이 있지만 저도 찾다가 포기했고요. 래퍼런스를 참조하시고 연구해보세요.

---

• 래퍼런스 : https://developer.mozilla.org/ko/docs/XMLHttpRequest/Using_XMLHttpRequest
  이곳에 잘 설명되어 있으니깐 사용법을 배우시면 됩니다.

---

<script>
  const request = new XMLHttpRequest();
  const url = "https://api.bithumb.com/public/ticker/BTC";   
  request.open("GET", url, false);
  request.send();  
  console.log(request.responseText); // 긁어온 내용 뿌리기  
</script>

---

1단계 : XMLHttpRequest() 인스터트화 객체선언정도로 이해
2단계 : url를 변수에 저장
3단계 : open()함수를 통해서 해당 url의 정보를 가져와라
4단계 : 이걸 send() 실행시켜라
5단계 : 그 정보는 request.respneText 저장되어 있어 console창에 출력

---

여기서 'request.respneText' 표현을 위 구글 스프레드시트에서 비슷한 명령이 생각나시나요. 'result.getContentText()'랑 같은 의미 입니다. 그러면, 이 읽은 값을 json으로 파싱하고 싶어지지 않나요. 접근하기 편하게요.

var obj = JSON.parse(request.responseText);
console.log(obj.data.opening_price);

이렇게 해서 구글 스프레드시트에서와 동일한 결과를 얻게 되었습니다.

우선 공개된 빗썸 url을 통해서 접근결과를 종합해서 어떻게 출력되는지 볼까요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Steem.js</title>
</head>
<body>

<script>
  const request = new XMLHttpRequest();
  const url = "https://api.bithumb.com/public/ticker/BTC";   
  request.open("GET", url, false);
  request.send();  
  var obj = JSON.parse(request.responseText);
  
  console.log(obj); // 긁어온 내용 뿌리기  
  console.log(obj.data.opening_price); // 긁어온 내용중  opening_price 뿌리기  
</script>
</body>
</html>

결과

이렇게 해서 쉽게 해당 정보를 가져올 수 있고 json 형식으로 바꿔서 접근자 '.'(콤마)로 쉽게 해당 필드값을 접근할 수 있게 되었네요. 그러면 HTML 태그로 값을 던져주기만 하면 자신만의 거래소 상황판을 만들 수 있겠죠. 자신이 구매한 가격을 HTML로 입력을 하게 하고 해당 거래소의 현재 시세가격을 가져오면 구매한 가격과 시세의 가격차를 수학적으로 간단히 표현하면 현재 수익률이 몇퍼센트인지도 쉽게 HTML로 출력이 되겠죠.

참고사항

크롬브라우저에서 실행이 안될 경우가 발생합니다. "jQuery의 ajax 메소드 의 사양 때문에 Chrome에서 작동하지 않는다는 글을 본 것 같네요" 익스나 다른 브라우저에서는 정상적으로 동작하네요. 위 실험한 곳은 온라인 상에서 편집하는 에디터여서 그냥 아무런 문제없이 결과가 출력되었지만 만들어서 그냥 웹페이지를 크롬창에서 열었는데 결과가 안나온다면 console창에 에러 메시지를 확인하시고 구글 검색하시면 그에 관련된 답을 찾을 수 있을꺼에요.

3. D3.js 함수

---

제가 오래전에 기초만 살짝 맛본 D3.js API라는게 있습니다. Data-Driven Documents라는 의미로 데이터 시각화 문서정도로 이해하시면 됩니다. 자바스크립트 함수로 구성되어 있는데 여기서 json를 읽는 함수가 어렵픗이 떠오르더군요. 그래서 한김에 D3로 공개된 거래소 API url의 정보를 읽어보고 싶은 충동이 생기더군요.

---

배워야 할 함수

• d3.json() : 해당 url 주소지의 내용을 json 형식으로 파싱해 줍니다.

---

딱 한줄로 끝나버렸네요. d3는 내부로직은 자바스크립트 과정을 거치는데 그 부분을 함수로 미리 만들어 놓아서 신경 쓸것이 없고 그냥 url만 던져주면 알아서 그 결과를 리턴받게 됩니다. D3라는게 참 재밌는 라이브러리입니다. 참고로 이 포스팅을 할때 v5버전인데 json()함수가 동작하지 않고 있네요. v4에서는 아무 문제가 없이 잘 작동하니깐 v4버전으로 링크 연결하시면 됩니다. 제가 d3를 공부하다가 접은 이유가 바로 이런 문제 때문이지요. 버전이 바뀔 때마다 기타 부분들이 개선되어 좋아지지만 접근자를 통한 함수명 접근이 확확 바뀌어 버린다는 것이죠. 해당 버전으로 사용하면 문제는 없지만 개발자의 경우 서로 다른 버전으로 공부했던 분들은 버전 별 접근 문제가 생겨서 현재 써먹지도 못하는데 구지 공부했다가 다음에 써먹을 때 다시 해당 버전을 공부해야하기 때문에 공부할 의욕을 꺽어 버리더군요. 일관성이 좀 떨어진다는 단점은 있지만 쉬운 코딩으로 데이터를 시각화하는 강력한 라이브러리라서 혹시 관심있는 분들은 공부하시는 걸 추천드려요.

참고로 Steem API 데이터를 시각화 한 정보사이트 있죠. 그것을 쉽게 시각화 할 수 있는게 D3입니다. 데이터를 읽어오기만 하면 그 데이터를 시각화 할 수 있는 다양함 함수들이 있어서 다양한 시각화가 쉽게 된다는 게 큰 장점을 가진 API라고 생각하시면 됩니다.

---

-공식사이트 : https://d3js.org/

---

가셔서 구경해보세요.

삼천포로 빠졌지만 이제 거래소 url를 통해 읽어올까요.

<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
  <script>  
  const url = "https://api.bithumb.com/public/ticker/BTC";   
  d3.json(url, function(error,data){
    console.log(data);
  });  
 </script>
</body>

코딩이 참 간단하지요. url 변수로 주소를 저장하고 d3.json()이걸로 데이터를 가져오게 됩니다. 콜백함수로 data 변수에 읽어온 값들이 저장되어 있습니다.
그걸 출력해볼까요.

결과

---

5. 파이썬 함수

---

위 그림은 파이썬 3 버전용입니다.

import json
import urllib.request

opendata = urllib.request.urlopen('https://api.bithumb.com/public/ticker/BTC')
readdata = opendata.read().decode('utf-8')
coindata = json.loads(readdata)

print(coindata)

print('BTC : '+coindata['data']['closing_price'])

종류벌 접근이 다르더군요

import urllib2 => urllib2.urlopen("url").read()
import urllib.request => urllib.request.urlopen("url").read()
import requests => requests.get("url")

아무튼, 두번째 방식으로 공개 빗썸 API url로 BTC의 정보를 얻어왔네요. 첨에 opendata.read()함수로만 읽으니깐 json.loads()할때 타입관련해서 에러가 발생하더군요. 구글검색을 하니 decode('utf-8')을 해줘야 한다고 하더군요. 참고로 읽을때 'utf-8'로 하셔도 되고 우선 읽어온 다음 json 형태로 바꿀때 decod('utf-8')로 넣으셔도 됩니다. 위치는 둘 중 원하는 위치에 지정해주시면 됩니다.
자바스크립트에서 설명했듯이 다 비슷한 표현이니깐 구지 설명을 드릴 필요는 없다고 생각 되네요.
표현은 전부다 같으니깐요.

결과문은 깔끔하게 잘 나왔네요. 나중에 거래소 별로 모듈을 만들어 놓고 원하는 데이터를 읽어오시면 편하겠지요. 파이썬 자체를 써본적이 없기 때문에 더이상 표현은 생략하겠습니다.

추가내용

파이썬으로 구글 이메일을 컨트롤 할 수 있습니다. 참고로 위 실험은 라즈베리파이에 파이썬이 깔려 있어서 그곳에서 돌려본 결과이고요. 여기서 구글 이메일 컨트롤 코드를 넣으시면요 구글 이메일을 이용해서 실시간으로 코인 정보를 이메일로 보낼 수 있습니다.
라즈베리파이 관련 이메일 소스를 구글 검색하시면 쉽게 찾을 수 있을꺼에요. 저는 라즈베리파이 ip정보를 부팅때 자동으로 정보를 이메일로 전송하도록 만들어 놨었거든요.
이 원리를 여기다가 적용하면 특정 조건이 될 때 그 정보를 이메일로 수신할 수 있겠죠. 이 표현을 넣고 싶었는데 좀 애매해서 넣지 않겠습니다. 해보고 싶은 분들은 한 번 검색을 해서 도전해 보세요.

4. 자바스크립트로 왜! 할까요?

---

그냥 구글 스프레드시트 해서 하면 좋은데 구지 자바스크립트로 표현하고 또 그걸을 HTML로 출력할 이유가 뭘까요. 사실 실시간성에서는 웹상에서 자바스크립트로 접근하는게 빠릅니다. 구글 스프레드시트 사실 갱신되는 정보의 시간차가 너무 큽니다.

그리고, 자바스트립트에는 재밌는 함수들이 많습니다.
타이머라는 함수가 그 한가지이죠.

 <button type="button" class="btn btn-primary" onclick="startAlert()">타이머시작</button>
 <button type="button" class="btn btn-dark" onclick="stopAlert()">타이머종료</button>

startAlert = function() {
 timeout= setInterval(paly, 60000);
};

stopAlert = function() {
   clearInterval(timeout);
};

이런 표현이 있습니다. 타이머시작이라는 버턴을 누르게 되면 1분단위로 play()함수가 호출됩니다. paly()에 기록된 로직이 어떻게 될까요. 1분단위로 갱신이 됩니다. 그러면 생각해 보세요. 거래소의 정보를 가져오는 로직이 있다고 치면 이걸로 타이머시작 버턴을 누르면 1분 단위로 거래소에 정보를 가져오게 됩니다.

어렵지 않고 자바스크립트가 강력하죠. steInterval()함수가 장난아니죠. 그리고 타이머를 종료시키는 함수가 clearInterval()이라는 함수입니다. 원할때 일정시간 단위로 갱신을 시킬 수 있고 원할때 중단 시킬 수 있게 됩니다.

이게 뭐라고 구글 스프레드시트에서 갱신하면 되잖아 할 수 있습니다. 또다는 함수가 있습니다.

alert('메세지');

이 함수는 꽤 재밌는 함수입니다. 경고창을 띄워주는 메세지 입니다. 가령, 한번 상상력을 발휘해 보세요. 자신이 구매한 가격이 있다고 칩시다. 그 가격에서 현재 시세차가 어느정도 벌어졌을때 수익률이 플러스인지 마이너스인지 자신이 조건문으로 알림을 설정하고 싶을때 이 함수를 적용 한다면 어떻게 될까요. 실시간으로 타이머함수로 갱신이 이뤄진다고 했죠 그러면 가상화폐 가격을 가져오는 로직에서 가져온 가격와 자신이 입력한 가격을 비교하는 if문을 삽입해 봅시다. 만약 5%넘으면 참일때 alert()함수를 실행하게 하고 그 안에 현재 코인과 수익률 정보를 출력하게 한다면 어떻게 될까요. 그냥 알림창이 되는 거지요.

if(수익률>=5){
alert('메세지');
}

간단하지요. 메세지 안에는 코인, 현재시세, 수익 기본으로 합쳐진 정보를 메세지로 출력을 경고창에다 하면 되겠죠. 어렵지 않죠. 타이머 함수와 경고창함수 두개만 적용했을 뿐인데 재밌는게 만들어지죠. 그런데 단점은 해당 웹페이지가 열려 있어야 한다는 점입니다. 그 대안으로 경고창 대신에 크롬 알림 설정을 해놓고 그 경로로 통해서 알림창을 만드실 수 있습니다. 구글 검색을 하시면 쉽게 크롬 알림창을 만드는 방법이 나와 있습니다. 크롬 웹브라우저가 열려 있으면 어느 페이지에 가더라도 알림을 띄울 수 있게 됩니다

여기서 또 재밌는게 떠오르더군요. 확장프로그램이란게 있습니다. 여러분들은 steem 를 효율적으로 사용하기 위해서 확장프로그램을 설치하고 계시죠. 그러면 위 내용을 확장프로그램 형식으로 맞춰서 자신의 웹브라우저에 등록해 놓으면 좀 더 효율적으로 알림 서비스를 받을 수 있겠죠. 구지 해당 페이지를 띄울 필요가 없이도 말이죠.

확장 프로그램을 만드는 과정은 생활코딩 사이트에 가시면 간단히 확장프로그램을 만드는 과정과 자신의 크롬브라우저에 등록시키는 과정이 잘 나와 있습니다. 구글검색에서 생활코딩과 활장프로그램 만들기 키워드로 검색하시면 쉽게 찾을 수 있을 꺼에요.

자바스크립트 언어라는게 참 재밌고 그렇게 어렵지 않으며 다양한 것들과 연결되면 재밌는 것들로 만들어질 수 있습니다.

마무리

---

이제 마무리 할 시간이네요. 원래는 계속 아두이노 포스팅 할까? 아니면 Steem API 공부한 내용을 풀어 낼까 고민이 되는 주말 포스트 였네요. 그러다가 거래소 API 접근이 궁금해져서 실험해보고 싶어서 여러가지를 조사하고 해딩해 봤네요.

그냥 실험삼아서 html로 대충 데이터만 출력되도록 별다른 기능 없이 간단히 표현해보고 결과만 테스트 했네요. 여기서 타이머를 동작시키면 수익이 5% 넘으면 해당 코인이 경고창으로 자세한 내용이 출력되도록 간단히 코딩해 봤어요. 그림상에서 ETH가 5%에 가까워지네요. 5%이상이 되면 자동으로 웹페이지 상단에 경고창으로 해당 코인의 정보를 알려 주겠죠.

참고로 실제 사용하지는 않습니다. 사용할려고 했다면 입력창과 시세뿐 아니라 기타 몇가지 계산식을 더 넣어서 만들었겠죠. 그냥 심플하게 원리만 이해하는 게 목적이라서 더이상 진도는 안나갔네요.

코딩의 세계는 이처럼 재미 있습니다. 어떤 함수가 있으면 그 함수의 의미만 잘 이해하시면 재밌는 것들을 만들어 냅니다.

이상으로 간단히 궁금증이 생긴 거래소 API url 접근에 대해서 살펴봤네요. 궁금증이 해소 되었기 때문에 이와 관련된 건 더이상 하지 않을꺼에요.

호기심으로 글 한편 남깁니다. 그리고 API는 공식적으로 공개된 것만 사용하세요. 비공식적인건 될 수 있으면 쓰지 말아 주세요. 건전한 접근은 건전한 코딩문화를 만듭니다.