안녕하세요? 
비개발자를 대상으로 하는 강좌이기 때문에, 개념들을 최대한 단순화시켜서 이야기를 하려고 하니, 개발자분들이나 코딩에 익숙하신 분들께는 어색하게 느껴질 수 있음을 미리 알려드립니다.
첫번째로 만들어볼 스팀 툴
첫 강좌인 만큼, 앱이라고 하기에도 민망한, 아주 단순한 프로그램을 만들어 보도록 하겠습니다. 코딩이 별나라 이야기처럼 느껴지시는 분들도 따라 하실 수 있는 가장 쉬운게 뭘까 고민하다가 선택한 기능인데요. 실제로 사용할일은 업겠지만, 이렇게 조금씩 가까워지다보면 나중에는 더 재밌는 기능을 만드실 수 있을겁니다.
목표기능
- 원하는 사용자의 정보를 SteemJS를 통해서 불러온다
- 정보를 웹페이지에 출력한다
한번에 완료까지 가는것은 무리이기 때문에, 이번 강좌는 틀을 잡는것으로 마치고 다음 강좌에서 완성 하도록 하겠습니다.
준비물
- 구글 크롬 브라우저
- 메모장 혹은 코드에디터
- 열정
코드 에디터
Visual Studio Code 라고 마이크로소프트에서 만든 무료 코딩 툴이 있습니다. 한번 사용해 보실것을 강력히 추천드립니다.
https://code.visualstudio.com/
시작!
앞으로 사용하실 폴더를 하나 만드시고 그 안에 get_account.html 라는 파일을 하나 만드세요. 파일을 만드셨으면, 메모장이나 에디터로 파일을 여신 후, 아래 박스안의 내용을 잘 긁어서 붙여넣으세요. 내용은 아직 이해하실 필요도 없고 이해하시기도 어려우니 일단 따라하시기 바랍니다.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<div class="container">
<div><h1>My First App</h1></div>
<div id="user_area"></div>
</div>
이로써 지금 필요한 라이브러리들을 불러오고, 앱에서 사용될 기본적인 틀을 설정 한것입니다. 지금 입력하신 것은 HTML 입니다. 웹페이지는 크게 HTML과 자바스크립트로 나뉘는데, 정적인 부분을 정의하는데 HTML을 사용하고, 자바스크립트를 이용해서 이부분을 제어할 수 있습니다.
위의 코드를 보기좋게 캡쳐 한 것입니다. 여기에서 중간부터 시작되는 <div>와 그리고 마지막에 </div> 보이시나요? 이것을 "태그" 라고 부릅니다. 꺽쇠 안에 뭐가 들어가든 상관 없이 태그라고 하는데요, 이것은 div 태그라고 부르시면 됩니다. 슬래쉬가 없는놈은 태그의 시작이고, 슬래쉬가 있는놈은 태그의 끝입니다. 그 의미를 되새기며 보시면 어떤 구조인지 조금은 감이 오실것입니다. 태그를 열면 반드시 닫아줘야하며, 닫기전에 다른태그를 또 열면, 나중에연것부터 순서대로 닫아주어야 합니다. 태그 속에서 태그를 또 열면, 먼저 열은 태그에 속하게 됩니다. 폴더 구조를 떠올려 보시면 간단합니다. 폴더 안에 폴더를 또 만드는것과 비슷한 계층구조가 생기는 것이죠.
지금은 여기까지만 하고 다음으로 넘어가겠습니다.
앱 실행
만든 파일을 잘 저장 하셨나요? 그러면 더블 클릭 해 봅시다. 크롬이 기본 브라우저로 설정 되어있다면 구글 크롬에 탭이 뜨면서 "My First App" 이라고 출력될것입니다. 크롬이 기본 브라우저가 아니라면, 파일을 드래그해서 크롬에다가 드롭하시면 됩니다.
아직 아무 기능도 넣지 않았으니 기능을 조금씩 넣어 볼까요?
기능 추가 1 - 사용자 정보 얻어오기
이제 다시 에디터를 열고, get_account.html 파일의 맨 아래 부분에, 아래 코드를 추가합니다. 그리고 파일을 저장하세요.
<script>
steem.api.setWebSocket('wss://steemd-int.steemit.com');
var user_info = null;
function get_user(user_id, callback) {
console.log('Send getAccounts request');
steem.api.getAccounts([user_id], function(err, response){
if (err) {
console.log('Error!');
} else {
console.log('Done!');
user_info = JSON.parse(response[0].json_metadata).profile;
user_info.id = user_id;
}
if (callback) {
callback();
}
});
}
</script>
설명은 잠시 미루고, 이제 크롬브라우저에서 이미 열려있는 get_account.html 을 새로고침 하세요. 아무 변화가 없죠? 정상입니다. 왜냐하면, 아직 수행하는 부분이 없기 때문이죠. 그럼 어떻게 하냐구요? 자 다음이 아주 중요합니다.
크롬에서 자바스크립트 실행하기
웹페이지 화면에서 우클릭을 하시고, "Inspect"를 클릭합니다. (한글 크롬에서는 "검사") 그러면 화면의 오른쪽 (혹은 하단)에 개발 툴이 뜹니다. 이 툴이 얼마나 위대한지는 나중에 차차 알게 되실테지만, 이게 없던 시절 웹 개발자들이 얼마나 피눈물을 흘렸는지는 아는분들만 아시지요.
탭이 여러개 있는데, "Console"을 선택합니다.
그러면 하얀 공간이 열리는데, 거기 작은 꺽쇠 (명령 프롬프트라고 부릅니다)가 있습니다. 그곳을 마우스로 클릭해 보면, 글씨를 입력하실 수 있습니다. 이곳에서 온갖 자바스크립트를 수행 할 수 있습니다. 당연히 SteemJS의 모든 기능도 수행 할 수 있지요. 앞으로 이것을 자주 이용해야 하니 친해지시길 바랍니다.
자, 명령 프롬프트에 get_user('asbear') 라고 입력하시고 엔터를 쳐 보세요. 아래 스크린샷처럼 Done! 이라는 메시지가 뜨면 완료 된것입니다. 만일 Error!라고 뜬다면, 위의 명령을 다시 치세요. 요즘 Steem 서버가 과부하가 걸렸는지 타임아웃이 자주 발생해 결과가 출력되는데 매우 오래 걸릴 수 있습니다. 인내심을 가지고 기다려 보세요.
자, 이제 asbear의 사용자 정보가 브라우저에 저장되었습니다. user_info라는 변수로 저장되었으니, 한번 확인 해 봅시다.
이렇게 사용자 정보가 user_info에 저장되어 있는것을 보실 수 있습니다.
무슨일이 벌어진 걸까?
자, 위에 추가한 코드로 어떻게 이런 동작이 수행 된 것일까요? 한번 설명해 보겠습니다. 비 개발자라면 이해 안되시는것이 당연합니다. 끈기를 가지고 읽어보세요. 아래 스크린샷의 왼쪽이 줄 번호인데, 줄번호 대로 설명하겠습니다.
(9)
위에서 꺽쇠로 된것을 태그라고 말씀 드렸죠? 여기서는 <script>라는 태그를 열었습니다. <script>라는 태그를 열먼, 그 안에는 자바스크립트를 마음껏 쓰실 수 있다는 의미입니다. (26) 줄에서 </script로 태그를 닫는 것을 보실 수 있죠?
(10)
아주 중요합니다. 이 줄에서는 user_info라는 변수를 선언했습니다. 변수를 선언한다는것은, "나 앞으로 user_info라는 이름에 뭔가를 저장하겠다" 라고 알려주는것입니다. 선언하지않고는 읽지도 저장하지도 못하니 꼭 선언 해야 합니다. var 변수이름 = 값 의 형태로 하시면됩니다. 맨뒤의 세미콜론은 명령의 마지막에 붙여주시는겁니다. 지금 이해가 안되시면 코드를 많이 보시면서 규칙을 찾아보세요.
null은, 아직 값이 없다고 알려주는겁니다.
(11)
이 줄에서는 get_user 라는 함수를 선언합니다. 프로그래밍에서 함수라는것은, 어떤 기능을 담고있는 블록을 말합니다. 함수를 선언한다는것은, 실행하지는않되 실행할수있도록 형태를 갖춰 놓는다는 의미입니다. 마치 윈도우에 프로그램을 설치해놓는것과 비슷한 것이죠. 한번 설치해놓으면 언제든 실행해서 쓸 수 있듯이, 함수도 그렇습니다.
함수에는 입력값 (파라메터라고 부릅니다)을 넣어서, 함수 수행에 따른 결과를 다르게 할 수 있습니다. 자 자세히 한번 볼까요?
function get_user(user_id, callback)
function 은, 이제부터 함수를 선언한다는 의미입니다. 그 뒤에는 함수의 이름을 적습니다. 여기서는 get_user죠. 그 다음줄에 괄호를 열고 닫으면서 user_id와 callback이 적혀 있죠? 이것들이 파라메터 입니다. 이 함수는, 사용자 ID와 콜백이라는 것을 넣어서, 그 사용자의 정보를 얻어오는 기능을 할것이라는것을 미루어 짐작 할 수 있습니다.
마지막에 { 로 대 괄호를 열지요? 이것은 마치 위에서 태그를 시작하듯이, 함수를 시작한다는 표시입니다. 맨 아래에 </script>바로 위에 }로 닫는 것을 보실 수 있습니다.
만들어놓은 함수를 사용하는 방법은, 함수이름(파라메터) 입니다. 위에서 get_user('asbear') 라고 수행한것 기억 나시죠?
(편의를위해 다시한번 스샷 첨부합니다.)
(12)
console.log 는 함수 이름입니다. 우리가 만든게아니고, 이미 어딘가에 만들어져 있는 것입니다. 이 함수의 기능은, 메시지를 출력하는 것입니다. 아까전의 스크린샷에서 "Send getAccounts request" 라는 메시지가 출력 된것을 보셨나요? 이 라인때문에 출력 된 것입니다.
(13)
자 드디어 SteamJS의 사용입니다. steem.api.getAccounts 또한 스팀의 엔지니어들이 만들어놓은 함수입니다. 이 함수는 이렇게 생겼습니다.
steem.api.getAccounts(user_id, callback)
즉, 사용자 계정을 넣으면, 결과를 callback 으로 알려줄께 라는 의미입니다. 아까도 나왔던 callback 은 뭘까요? 이는 또다른 함수입니다. 함수를 넣어주면, 다 되면 그 함수를 출력해 줄게 라는 뜻이죠.
그래서 코드를 잘 보시면, 첫번째 파라메터로는 user_id를 넣고, 두번째 파라메터에 직접 함수를 선언하는 것을 보실 수 있습니다. 이는 매우 흔한 경우인데, 처음에는 매우 낮설것입니다만, 반복해서 보시다보면 눈에 익습니다. 걱정 마세요.
(편의를위해 다시한번 스샷 첨부합니다.)
(14-15)
프로그래밍에서 if, else 는 영어 단어 그대로 조건에 따라 행동하라는 뜻입니다. 그러므로 만약 에러가 있으면 대괄호 안의 명령에 따라 "Error!"를 출력할것입니다.
(16-17)
else이므로, 에러가 없으면 대괄호 안을 수행하라는 뜻입니다. "Done!"이라는 내용을 출력하고, 그 다음으로 넘어갑니다.
(18)
이 줄에서 user_info 에 사용자 정보가 저장 됩니다. 프로그래밍에서, A = B 라는것은 A라는 변수에 B 를 저장한다는 의미입니다.
(21)
여기서는 위에서 배우신 if 명령에 따라, get_user 함수의 파라메터인 callback 이 입력 되었으면 그것을 실행하고, 주어지지 않았으면 그냥 넘어가게 됩니다.
아까 get_user('asbear') 에서, 계정이름만 넣고, 두번째는 아무것도 넣지 않았으니 callback이 수행되지 않은것입니다. 명령창에 아래와 같이 입력 해 보세요.
get_user('asbear', function() { console.log(user_info); })
그러면 callback에 넣은 함수가 실행되면서 결과가 바로 출력되는 것을 보실 수 있습니다.
첫회를 마치며
적다보니, 비 개발자에게 이 개념을 설명한다는것이 얼마나 큰일인지 절실히 느끼네요. 설명할것이 너무 많아서 생략하고 생략해도 끝이 없네요. 하지만 최대한 감을 잡아 보시려고 노력 해 보세요. 반복하다보면 익숙해 지실 수 있고, 나중에는 어느정도 능동적인 코딩도 가능하실 것입니다. 최소한 SteemJS를 조금이라도 다루실 정도까지는 도와 드리겠습니다.
다음 회에서는, SteemJS를 통해 얻어온 사용자 정보를 웹페이지에 출력하는것을 다뤄 보겠습니다. 이 강좌와 연속된 내용이니 파일을 지우지 마시고 가지고 계시길 바랍니다. 질문이 있으신분들은 댓글 달아 주세요.
그럼 다음에 뵙겠습니다. ^^