자바스크립트 기초 문법으로 Steem.js 접근

codingman (64)in #kr-arduino • 6 years ago (edited)

자바스크립트 기초 문법으로 Steem.js 접근

자바스크립트 튜토리얼 : W3Schools.com - https://www.w3schools.com/js/default.asp
링크 : C 기초 코딩 문법으로 다른 언어 배우기

오늘은 어제 같이 올려야 했던 내용인데 어제 문제가 생겨서 등록이 안되어서 잘라낸 부분을 오늘 포스팅을 하게 되었네요. 어제 한번에 다 포스트 하려고 게시물 등록을 눌렀는지만 등록할 수 없다고 해서 실패했네요. 사설은 접고 오늘은 어제의 내용을 이여서 기초만 배워도 Steem.js API를 다룰 수 있다는 것을 보여드리는 예제입니다. 혹시 보시기 불편하시면 상단에 링크된 어제 포스팅 내용을 읽고 오시면 되겠습니다.

1. Steem.js API 연동

참고 : Steem.js API로 게시물 주사위게임 만들기 (1)

C언어 기초를 문법을 지난 시간에 배웠고 어제는 C언어 기초 문법으로 자바스크립트 언어를 배웠습니다. 오늘은 어제 배운 기초 문법을 가지고 Steem.js API를 접근해보도록 하겠습니다.

2. Steem.js API를 연결

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

이 한줄이면 Steem.js API를 읽고 쓸 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
          <title>Steem.js</title>
    </head>
    <body>
        <script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
        <script>    
                우리가 작업할 공간
        </script>
    </body>
<html>

어제 배웠던 HTML 틀에서 Steem.js API 연결하는 한줄만 추가 시키면 됩니다.

3. Steem API에서 getAccounts()로 자신의 정보 읽기

steem.api.getAccounts(['아이디'], function(err, response){
            console.log(err, response);
});

해당 아이디를 가진 스티미언의 개인정보를 전부 읽어옵니다. 개인 정보는 response라는 변수에 전부 저장 되는데 위의 표현은 하나의 틀로 생각하시고 이해하셔야 합니다. 무조건 이렇게 코딩한 뒤에 response라는 변수를 어떻게 사용할지만 여러분들이 연구 하시면 됩니다. 이제 response에 저장 된 데이터 중에 프로필 정보만 따로 추출을 하는 것을 실험해 보도록 하겠습니다.

4. getAccounts()로 프로필 정보만 추출하여 출력하기

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

<p id="demo"></p>
<p id="name"></p>

<script> 
steem.api.getAccounts(['codingman'], function(err, response){
  console.log(err, response);
  
  var myprofile = response[0].json_metadata; 
  document.getElementById("demo").innerHTML = myprofile;  

  var obj = JSON.parse(response[0].json_metadata);
  document.getElementById("name").innerHTML = obj.profile.name;  
});
</script>

위 코딩이 머리가 아프시죠. 총 3개의 행태로 출력한 코딩입니다. 간단히 하나씩 살펴볼까요.

1) 'codingman'의 정보가 정상적으로 읽어왔는지 console창에 출력

console.log(err, response);

우선 console(개발) 창으로 출력하라는 명령입니다. response에 데이터를 console 창으로 전부 출력됩니다. 제 아디 'codingman'의 개인 정보를 전체 출력을 하겠죠.

2) 다음 response에 저장된 데이터 중에 프로필 정보만 따로 변수에 저장

var myprofile = response[0].json_metadata;

response의 접근을 왜 [0]으로 했냐면 getAccounts()함수는 여러명의 아디 정보를 한번에 저장할 수 있습니다. 즉 배열로 response에 저장된다는 것이죠. 그래서 한명의 아디를 조회할 때 response[0]으로 하셔야 해당 아디를 접근 할 수 있습니다. 여기서, 'codingman'의 프로필 정보만 추출하기 위해서 'response[0].json_metadata'로 'codingman'의 프로필 정보가 있는 위치해 있습니다. 그 위치의 프로필 정보를 myprofile 변수에 저장합니다.

3) 그러면 정상적으로 myprofile에 저장되었는데 p태그로 출력

document.getElementById("demo").innerHTML = myprofile;

위에서 p태그로 출력하는 걸 배웠으니깐 설명은 넘어가고요. 'codingman'의 프로필 정보를 위 명령어로 간단히 출력이 되겠죠. 참고로 mypofile에 저장된 값은 문자열이기 때문에 접근자로 접근할 수 없습니다.

4) 접근자 사용을 위해서 다음과 같이 json형식으로 변환

  var obj = JSON.parse(response[0].json_metadata);

이렇게 문자열 데이터를 json 형식으로 바꿔 obj 변수에 저장하게 됩니다. obj객체변수는 접근자 콤마(.)로 프로필 안에 원하는 데이터를 접근 할 수 있게 됩니다.

5) 접근자를 사용하여 'codingman'의 name을 p태그로 출력

  document.getElementById("name").innerHTML = obj.profile.name;

"obj.profile.name"으로 obj 변수에 profile 속에 name을 가리키는 문장입니다. 이것을 이용하여 p 태그로 프로필에 등록된 이름을 출력할 수 있겠죠.

자바스크립트에서 사용되는 함수 "JSON.parse()"를 알아야 하고 변수에 어떤식으로 데이터가 저장되어 있는지를 해석할 수 있게 되면은 여러분들은 오늘 다뤘던 함수 안에 다른 정보들도 자유자재로 사용할 수 있게 됩니다. steemd.com에 들어가시면 자신의 개인 정보가 왼쪽 하단에 쭉 나열되어 있죠 그 정보들이 오늘 배운 함수 한개에 다 들어 있습니다. 이 정보를 토대로 어떻게 사용하냐에 따라서 다양한 표현을 할 수 있게 됩니다.

위 Steem.js API에서 사용된 자바스크립트 문법은 엄밀히 따지면 기초 문법에서 변수 선언과 그 변수에 저장하는 법과 변수를 접근하는 것 외에는 코딩문법은 없습니다.

Steem.js API의 getAccounts()함수를 통해 response에 저장된 데이터를 어떻게 가공할 것인지만 여러분들은 상상력을 발휘하면 됩니디. Steemit이나 Steemkr에 로그인하면 상단에 나온 개인정보창과 같은 것을 외부 개인 블로그나 원하는 위치에 여러분들이 원하는 스타일로 디자인해서 프로필 창을 만들 수 있겠죠.

오늘 소개한 함수를 통해서 여러분들은 개인 프로필 창을 만들 수 있는 기초를 배웠습니다.

자바스크립트가 배울만한 가치가 있는 언어라고 생각되지 않으신지요.

[결과]

세가지 결과를 출력에서 console창을 제외한 HTML 페이지에 두가지만 출력된 결과물입니다. id가 "demo"인 p 태그에 프로필 전체의 정보를 출력하고 "name"인 p태그에 스티미언 사용 이름을 출력하였네요. HTML로 디자인 하고 해당 태그들에 id 이름을 만들어서 id 위치에 원하는 정보만 출력시키면 프로필창을 쉽게 만들 수 있게 됩니다.

5. 프로필 정보를 정상적으로 읽어왔는지 HTML로 출력

위 소스에서는 style 부분은 보여주는 태그의 스타일을 바꾸는 명령이라 여기에서는 중요한 내용이 아닙니다. 중요한 부분은 body 태그 안에 내용들입니다.

1) HTML에 출력할 디자인 태그를 볼까요.

기교는 다 빼고 기초만 div 영역을 프로필에 등록된 corver_imge로 씌우고 그안에 profile_image, name, about 정보를 순차적으로 출력할 위치를 html로 기초 디자인을 한 코딩입니다. 실제 만든다면 스타일과 html의 보여주는 위치를 디자인해야 겠죠. 여기에서는 그냥 이런식으로 출력을 할 수 있는 거구나로 기초적인 테스트 코딩입니다. 각 태그에 대해서 혹시 모를 경우 구글 검색으로 통해서 해당 태그를 검색하시면 많은 블로그에서 예제들을 찾을 수 있을 꺼에요.

2) 자바스크립트 코딩을 살펴볼까요.

author 부분에 자신의 아이디를 입력을 하시면 자신의 프로필 정보가 출력됩니다. 위에서 간단히 이름을 출력했던 것에서 추가로 명령라인이 몇개 늘어 났네요.

추가된 부분은 "cover_image"인 div의 배경이미지를 삽입하는 명령어입니다.

 document.getElementById("id이름").style.backgroundImage= 'url(경로)';

div의 style 안에 배경 이미지의 값을 삽입해주는 명령입니다. 이걸로 "cover_image"을 넣게 됩니다.

다음 명령라인은 이미지 태그의 src 의 값을 지정해 줄 수 있는 명령어입니다.

 document.getElementById("id명").src = '이미지 경로';

[결과]

html 기교가 들어가면 나만의 프로필 창을 만들 수 있겠죠. 인터넷에 오픈 블로그 소스들이 많습니다. 그 부분을 잘 해석해서 일부 기능들을 가져다가 나만의 프로필 창을 만들 수 있을 꺼에요.

추가로 Steem.js의 평판 구하기, 스팀파워 구하기 등의 예제들을 찾으셔서 여기에 추가하시면 됩니다. 그리고 위 함수안에 개인정보에 자신의 스팀, 스팀달러 보유액을 여기로 출력도 할 수 있겠죠. 한개의 함수만 잘 활용하셔도 재밌는 표현을 할 수 있습니다.

스팀 블록체인을 좋아하는 이유는 누구나 쉽게 접근할 수 있고 읽고 쓸 수 있다는 데 있습니다. 그리고 환경 설정 프로그램도 필요가 없습니다. 단지, 여러분에게 필요한 것은 메모장 하나 뿐입니다.

설치 프로그램이 없이 메모장 하나로 Steem.js API를 접근 할 수 있다는게 진짜 대단한 거죠

마무리

오늘 포스팅한 내용은 어제 한번에 작성한 내용인데 오늘 포스팅한 내용이 합쳐서 등록이 안되어서 잘라낸 내용입니다. 내용을 길게 쓰니깐 초과 되었는지 다른 문제인지 게시물 등록이 안되더군요.

이번 주말 포스팅의 목적은 아두이노를 배우시는 분들 중에 C언어를 어느정도 습득하시면 나중에 다른 언어를 독학을 할 때 쉽게 할 수 있다는 것을 주말 포스트를 통해 전달하고자하는 의미가 담겨 있습니다. 그리고 스티미언분들이라면 비전공자분들이여도 HTML, CSS, JAVASCRIPT를 공부 해보셨으면 합니다. Steem 블록체인 정보를 쉽게 접근할 수 있는데 그것을 제대로 활용을 못한다면 너무 손해잖아요.

W3Schools.com => https://www.w3schools.com/js/default.asp

여기로 가셔서 학습하시면 충분히 독학이 가능하실꺼에요.

추가적으로, Bootstrap, jQuery를 필요한 기능만 살짝 활용하시면 좀 더 화려한 웹페이지를 쉽게 꾸미실 수 있을 거라 생각됩니다.

#jjangjjangman #kr-newbie #kr #kr-dev