Steem.js API에 Date()함수를 활용하기

---

• 온라인 웹 에디터 :
  http://jsbin.com/?html,console,output
  https://repl.it
  https://codepen.io

---

오늘은 즐거운 일요일로 Steem.js API를 다룰때 많이 사용하는 자바스크립트 Date()함수에 대해서 살펴보고자 합니다. 이 함수는 시간에 대한 정보를 가지고 있는 함수입니다. 참고로 Steem.js API에서 사용되는 함수들에서 얻어진 정보는 대부분 시간정보를 가지고 있습니다. 그래서, 시간함수를 사용하면 Steem.js API에서 얻어 온 데이터들을 시간 데이터를 통해서 원하는 형태로 출력을 할 수 있습니다. 어떻게 시간함수를 사용하느냐에 따라서 다양한 표현을 할 수 있기 때문에 이 Date()함수에 대해 제대로 알아보도록 합시다.

1. Date() 함수

---

[참조]

• https://www.w3schools.com/jsref/jsref_obj_date.asp
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
• https://msdn.microsoft.com/ko-kr/library/cd9w2te4(v=vs.94).aspx

---

위 참조 사이트 어느 것을 보셔도 상관 없습니다. 가장 많이 사용하는 함수에 대해서 살펴보도록 하겠습니다.

Date()함수는 웹 언어 프로그램을 첫날 배울 때 사용하는 가장 먼저 배우게 되는 기초적인 코딩입니다.

<p id="time"></p>
<script>
var dt = new Date();
document.getElementById("time").innerHTML = dt;
</script>

이렇게 웹 언어 프로그램에서 가장 먼저 배우게 되는 표현인데 p태그에 Date() 현재의 시간을 출력하는 코딩입니다. 위와 같은 표현을 하면 현재 시간을 html로 출력되어 보여질 꺼에요.

그외, 기본 함수들이 있는데 읽는 함수들만 간단히 살펴보겠습니다.

<script>

  var dt = new Date();
  
  console.log(dt.getDay()); //요일값(일요일 0~6)
  console.log(dt.getTime()); //시간값
  console.log(dt.getFullYear()); //년도
  console.log(dt.getMonth());  //달
  console.log(dt.getDate()); //일
  console.log(dt.getHours()); //시
  console.log(dt.getMinutes()); //분
  console.log(dt.getSeconds()); //초  
  console.log(dt.getMilliseconds()); //밀리초

</script>

[결과]

0
1526138846207
2018
4
13
26
0
27
207

현재 시간을 dt 변수에 저장하면 위와 같은 시간 함수들을 통해서 시간 정보를 표현 할 수 있습니다.

여기서, 주의할 것은

getDay()은 요일 정보로 일요일 기준으로 0부터 시작하기 때문에 주 정보로 0~6사이 값을 가지게 됩니다.
getMonth()은 달의 정보를 출력하는데 달은 0~11사이의 값을 반환합니다 현재 5월달인데 반환 값은 '4'가 출력 되었네요. 즉 1월이 0부터 시작합니다. 그러니 '4'가 5월달이 되겠죠. 그렇기 때문에 실제로 외부에 숫자로 표현할 때는 '+1'을 더해서 표현해야 합니다. 나머지 함수들을 그대로 사용하시면 됩니다.

그리고, 읽은 함수가 있으면 쓰는 함수도 있습니다. 반대의 표현으로 쓰는 것은 세팅으로 set() 붙이면 해당 값으로 시간을 수정할 수 있습니다. 그부분은 생략하고 위에 링크한 레퍼런스를 보시 됩니다. 별로 어렵지 않게 사용하실 수 있을 꺼에요.

  console.log(Date.now());

now()함수가 있는데 직접 현재의 시간을 바로 출력할 수 있습니다.

dt.getTime() == Date.now()

같은 시간값을 가지고 있으니깐 참고하시면 됩니다.

2. Steem 블록체인 정보를 다루기 위한 Date() 함수

---

<script>
  var dt = new Date();
  console.log(dt.toISOString());
</script>

dt라는 변수에 new Date() 표현 하면 현재 시간 정보를 dt라는 객체 변수에 저장하게 됩니다. dt는 현재 시간정보가 저장된 시간변수가 되겠습니다. 현재 시간을 담고 있는 시간객체변수에 toISOString()함수로 표현하면 ISO 표준을 사용하여 날짜를 문자열로 변환 시키는 함수입니다. Steem 블록체인에 저장된 시간 정보가 바로 이 ISO 표준을 따르고 있습니다.

[결과]

위 이미지에서 console 창에 초록색 글자색으로 시간 정보가 출력되는 것 보실꺼에요.

"2018-05-12T14:40:34.332Z"

시간객체변수에 시간정보를 ISO 표준 형식으로 변환하고 그것을 문자열로 변환시키라는 toISOString()함수를 통해서 Steem 블록 체인의 시간과 유사하게 표현이 가능해 집니다. 그런데 초 이하의 콤마(.)를 생략을 해야 합니다.

var time = dt.toISOString().split('.')[0];
console.log(time);

• 결과 : "2018-05-12T14:40:34"

만약,

이렇게 코딩 되어었다면, split('.') 함수로 ISO 표준 시간 문자열에서 콤마(.)를 찾아서 그 기준으로 문자열을 나눠서 time 변수에 저장한다는 명령입니다.

** time = [""2018-05-12T14:40:34", "332Z" ] **

이렇게 배열 변수가 됩니다. 바로 쪼개진 2개의 형태로 저장하는게 아니라 뒤에 접근자(.)이여서 '[0]'을 붙이면 배열 첫번째를 가리키게 됩니다.

time = dt.toISOString().split('.')[0];

dt의 시간값을 ISO 표준 시간문자열로 변환하고 그 문자열에서 콤마를 찾아서 나누고 [0]번째 위치의 값을 time 변수에 저장하라는 명령입니다. 이렇게 해서 Steem 블록체인의 시간형태로 만들 수 있게 되고 이 시간 정보를 토대로 Steem.js API를 통해서 얻어진 블록체인 정보에 대해 이 시간값을 사용할 수 있게 되었습니다.

3. Date() 함수를 응용

---

그러면 이 Date() 함수를 Steem.js API를 다를 때 어디에서 사용하는지 살펴 보도록 하겠습니다.

(1) steem.api.getAccounts() 함수에 응용

가장 대표적인 해당 계정아디의 스티미언 정보를 읽어오는 steem.api.getAccounts() 함수를 사용해 보겠습니다. response 안에 많은 시간정보가 들어 있습니다. 아래와 같이 코딩을 하게 되면 그 정보를 console 창에 출력이 됩니다.

<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script>

  steem.api.getAccounts(['codingman'], function(err, response){
      console.log(err, response);
  });
  
</script>

계정 아디의 스티미언 정보가 출력이 되는데 그중에서 한부분 입니다.

개인 정보에서 created라는 값이 있습니다. 계정을 만든 날짜입니다. 이 정보를 토대로 Date()함수를 사용하여 응용 하겠습니다.

출처 : https://steemd.com/@아이디

위 steemd 사이트에 있는 Age 정보가 있습니다. 이걸 한번 만들어 볼까요.

<script>
 steem.api.getAccounts(['codingman'], function(err, response){
   var created_day = new Date(response[0].created); //가입날짜
 });
</script>

위 코딩을 보시면 ISO 표준 형태로 Steem 블록체인에 시간 정보가 문자열로 기록되어 있습니다. 이 정보를 다시 시간으로 변환하려면 읽어 온 데이터 response에 저장되어 있는데 저장된 정보 중 created(가입날) 정보를 가져와서 그 문자열을 Date()에 넣으면 가입날 시간으로 created_day 시간객체변수에 저장됩니다. 이렇게 해서 created_day변수에는 가입날의 시간을 세팅할 수 있게 됩니다.

   var created_day = new Date(가입날); 
   var today = new Date(); 

Date(response[0].created);

가입날 시간문자열을 Date()로 해서 가입날을 시간 형태로 만들 수 있습니다. 위 코딩에서 created_day(가입날), today(오늘)의 시간 값을 가지고 있으면 가입날로부터 몇일이 지났는지 시간으로 구할 수 있겠죠. 그러면, Steemd에 있는 Age 정보는 두 날짜 사이의 시간을 구하면 알 수 있겠죠.

var age = today-created_day;

이렇게 한줄로 표현하면 두 날짜 간의 시간값을 age에 저장하게 됩니다.

age = 12867755145

이렇게 저장되네요. 이 시간값을 날짜로 구해야 겠죠.

밀리초 = 1000
초 = 60
분 = 60
시 = 24

날짜 일을 구할려면 (1000*60*60*24)로 나누어 줘야 합니다.

일 = 시간/(밀리초*초*분*시)

이렇게 해서

 var age = (today-created_day)/(1000*60*60*24); //오늘날짜-가입날짜
 console.log(Math.floor(age));

참고로, 이렇게 구한 age 변수에는 밀리초 값까지 들어 있기 때문에 소숫점 아래는 절삭 해야 합니다. 그래서 Math.floor()함수로 해서 소숫점 아래는 버렸네요.

[결과]

출력됩니다.

여기서, 어떤분은 월로 표시되는 분들이 있죠. 전 가입날짜가 짧기 때문에 월로 표현이 안됩니다. 하지만 오랫동안 스티미언 활동 하신 분들은 월료 표현 됩니다.

'ned' 아디로 검색을 하면

<script>
 steem.api.getAccounts(['ned'], function(err, response){
   var created_day = new Date(response[0].created); //가입날짜
   var today = new Date(); //오늘날짜
   var age = (today-created_day)/(1000*60*60*24); //오늘날짜-가입날짜
   console.log(Math.floor(age));
 });
</script>

[결과]

772

772일 이라고 출력 되네요. 이것을 달로 표현을 하면 다음과 같습니다.

steem.api.getAccounts(['ned'], function(err, response){

  var created_day = new Date(response[0].created);
  var today = new Date();

  var year = today.getFullYear() - created_day.getFullYear();
  var month = today.getMonth() - created_day.getMonth();
  var diff_Month = year * 12 + month + 1;
  console.log(diff_Month);

 });

[결과]

27

위에서 사용한 getFullYear(), getMonth()함수로 이용하여 현재 년도와 달에서 가입날 년도와 달을 빼주면 됩니다.

  var diff_Month = year * 12 + month + 1;

여기서 달은 0~11사이니깐 +1을 해줘야 정확히 달이 나옵니다. 그런데 steemd 사이트의 28달로 1달이 차이가 나네요 일에 대한 날짜 부분을 뺏기 때문에 일자에 따라 월에 대한 차이가 발생 하네요.

아무튼 시간함수를 이용하여 자신의 steem 활동 기간을 구할 수 있게 되었습니다.

2) 현재시간을 기준으로 24시간 동안 보팅한 내역 응용

---

var author = 'codingman';
steem.api.getAccountVotes(author, function(err, accountVotes) {
    console.log(err, accountVotes);
});

---

getAccountVotes() 함수를 사용 하겠습니다. getAccountVotes()함수는 가입날짜에서 부터 지금가지의 해당 author의 보팅 정보를 전부 가지고 있습니다

steem.api.getAccountVotes(author, function(err, accountVotes) {
    console.log(err, accountVotes.length);
});

이렇게 하면 지금까지 보팅한 숫자가 console 창에 출력이 됩니다. accountVotes.length는 accountVotes[index]로 index의 갯수를 나타냅니다. 즉, 자신의 보팅한 숫자만큼 index 갯수가 들어 있겠죠.

만약,

console.log(err, accountVotes);

이렇게 하면 지금까지 보팅한 내역이 쭉! console 창에 출력됩니다. 젤 마지막에 보팅한 내역이 아래 그림처럼 나와 보여지네요.

post 작성 당시의 마지막 보팅한 정보만 잘라서 이미지 파일로 만들었네요. 암튼 5월 12일날 보팅한 걸로 나와 있네요. 여기서 보팅 내역의 정보 중에서 time이라는 값이 있는데 이것은 보팅한 시간을 나타냅니다. 마지막으로 보팅한 시간이 됩니다. 보팅을 누구에게 했고 몇시에 보팅했는지 내역을 getAccountVotes()에 들어 있는데 이 시간값을 사용하면 원하는 보팅내역에 조회가 가능해집니다.

여기서, 시간정보가 들어 있죠. 보팅한 시간을 가지고 있다면 뭘 할 수 있을까요. 한가지 예를 살펴보도록 하겠습니다.

출처 : https://steemstats.com

마지막 시간에서 24시간 동안 보팅한 숫자가 9번으로 나와 있네요. 아직 post 작성 때 한거라 지금은 늘어 나겠지만 현재 시간은 9명으로 되어 있네요. 이제 시간 함수를 이용해서 24시간 동안 보팅 내역을 만들어 보겠습니다. 위 steemstats.com은 마지막 보팅한 시간을 기준으로 24시간인지 현재의 시간을 기준으로 24시간인지는 알수 없지만 24시간을 기준으로 보팅한 숫자를 자체적으로 만들면 아래와 같은 코딩입니다.

steem.api.getAccountVotes(author, function(err, accountVotes) {
   // console.log(err, accountVotes);

  var cnt = 0;
  var dt = new Date();  
  var endTime = dt.toISOString().split('.')[0];

  dt.setDate(dt.getDate() - 1);
  var startTime = dt.toISOString().split('.')[0];

  console.log(startTime+' ~ '+endTime+'\n');

  for(d in accountVotes){
    if(accountVotes[d].time>=startTime && accountVotes[d].time<=endTime){
      var data = accountVotes[d].authorperm.split('/');
      var author = data[0];
      var permlink = data[1];

      console.log('['+author+'] '+permlink+' ('+accountVotes[d].time+')');
      cnt+=1;
   }
  }
  console.log("\n count : " + cnt);

});

[결과]

이제 시간함수가 어떻게 사용했는지 살펴 볼까요.

마지막 보팅한 시간으로 24시간을 구한다면

steem.api.getAccountVotes(author, function(err, accountVotes) {
    console.log(err, accountVotes[accountVotes.length-1].time);
});

console 창에는 마지막 보팅한 시간값을 출력합니다. accountVotes에는 보팅한 숫자는 accountVotes.length 입니다. 데이터 길이 정보로 보팅한 숫자를 구할 수 있는데 배열에서는 0부터 시작이기 때문에 총 보팅한 수에서 '-1'을 해야 마지막 보팅한 데이터를 얻을 수 있고 그 시간은 time안에 있습니다.

var endTime = new Date(accountVotes[accountVotes.length-1].time);

이렇게 지정하면 마지막 보팅한 시간을 기준으로 24시간을 구할 수 있지만 이 방법은 사용하지 않겠습니다. 현재 시간을 기준으로 24시간을 구하기 때문에

 var dt = new Date(); 
 var endTime = dt.toISOString().split('.')[0];

또는,

 var endTime = new Date().toISOString().split('.')[0];

이렇게 표현해도 됩니다. 하지만 시간을 계속 사용하기 위해서 dt변수에 시간 변수를 표현 했습니다.

dt.setDate(dt.getDate() - 1);

위 처럼 코딩을 하면은 set은 시간값을 수정 할 수 있다고 했죠. dt시간을 수정하는 "dt.getDate()-1" 하면 현재의 날짜에서 -1일을 하게 됩니다. 이렇게 하면 만약 5월 1일때 1일에서 -1일하면 4월 30일이 되게 됩니다. 간단히 dt 시간값을 하루전으로 수정해 버리게 됩니다.

var startTime = dt.toISOString().split('.')[0];

위 처럼 코딩을 하면 dt변수에는 "dt.getDate() - 1"로 세팅 되었기 때문에 하루 전인 현재시간값을 가지고 있습니다. 계산하기 위한 현재시간에서 정확히 24시간 전인 시간값을 set으로 수정 된 것이죠. startTime 변수에 하루전 시간값을 저장하게 됩니다.

dt.toISOString().split('.')[0];

이부분은 위에서 설명했지만 다시 설명하면 dt시간값을 toISOString() 문자열로 변환하고 split('.')함수로 콤마를 기준으로 배열로 쪼개는데 [0]번째 위치를 가리킨다. 즉, 콤마 이전 문자열을 가리킨다고 생각하시면 됩니다.

이렇게 해서 하루전 시간과 현재시간 값을 startTime, endTime에 저장되어 있습니다.

accountVotes에는 지금까지 보팅한 블록체인 정보를 가지고 있다고 했죠.

for(d in accountVotes){
   if(accountVotes[d].time>=startTime && accountVotes[d].time<=endTime){
      하루전 시간(startTime)보가 크거나 같고 현재시간(endTime)보다 작거나 같을  때 참;
      명령문;  
      cnt++;
     }
}

여기서,
** for(d in accountVotes){ } **

for문은 accountVotes[] 배열 변수에 하나씩 순차적으로 꺼내는 순환문입니다. accountVotes에 들어 있는 갯수만큼 순환 반복한다고 생각하시면 됩니다. d은 배열 변수의 위치 index 값을 가지게 되고 접근할 때는 accountVotes[d]로 접근하게 됩니다.
시간값을 비교해야 하기 때문에 accountVotes[d].time 값으로 startTime과 endTime을 비교해서 만족한 값만 if문 안에 명령문을 수행 하게 됩니다.

현재 시간에서 하루전 24시간까지의 보팅한 내역을 if문 안에서 cnt변수로 카운터를 세면 보팅한 숫자를 구할 수 있게 됩니다. 보팅한 숫자 뿐 아니라 누구에게 보팅하고 언제 보팅했고 어느 게시물에 보팅했는지에 대한 정보를 다룰 수 있습니다.

var data = accountVotes[d].authorperm.split('/');

data[0]은 author, data[0]은 permlink, accountVotes[d].time은 보팅한 시간 값을 가지고 있기 때문에 이 정보로 또 다른 명령을 수행 할 수 있게 됩니다.

Date()함수가 이처럼 Steem 블록체인에 무척 중요한 함수입니다. 언제 누가 무엇을 했는지 분석하는 도구로 사용하기 때문에 이 시간함수를 통해서 어떻게 가공하냐에 따라서 다양한 표현을 할 수 있습니다.

마무리

---

날짜를 다루는 Date()를 통해 또 다른 곳은 post 정보를 출력하는데 사용할 수 있습니다. 보상 받을 수 있는 자신의 post 정보를 관리하고 싶다면 post를 만든 날짜 정보를 Date()함수로 계산하여 보상받는 post의 정보만 뽑아 낼 수 있습니다. 그리고 또 시간 함수로 뭘 할 수 있을까요. 자신의 보팅한 내역이 들어 있는 getAccountVotes()함수에서 자신의 아디가 아닌 상대방의 아디를 입력하면 상대방의 24시간 보팅한 내역을 확인할 수 있습니다. 그러면 뭘 할 수 있을까요. 바로 상대방의 보팅 활동 시간대를 구할 수 있습니다. 상대가 언제 활동하는지 확인이 가능합니다. 어떤 활동을 하는지도 쉽게 확인이 가능합니다. 대개 어뷰징 내역을 이 getAccountVotes()함수의 내역만 조사해도 어느정도 확인이 가능합니다.

그리고 이 getAccountVotes 함수를 통해서 활용하면 자신과 교류하는 스티미언의 활동 시간대에 맞춰서 자신의 post를 올리면 자신의 post가 자신과 교류하는 스티미언에게 노출 될 가능성이 크고 언제 교류하는 스티미언들이 post를 올리는지 분석이 가능합니다.

이처럼 시간이란 것이 활용하기에 따라 재밌는 것들을 할 수 있는 함수입니다. 위에 응용으로 2가지만 소개했지만 이외에도 엄청 많습니다. 그것은 여러분들이 Steem.js API로 가져오는 블록체인 정보가 어떤 정보가 들어 있는지만 제대로 알고 있다면 시간함수를 이용한 표현은 무궁무진 합니다. 한번 여러분들은 이 시간함수로 어떤 결과물을 얻고 싶은지 상상의 나래를 펼쳐 보세요.