안녕하세요? 
비개발자를 위한 강좌이기 때문에, 개념들을 최대한 단순화시켜서 이야기를 하려고 하니, 개발자분들이나 코딩에 익숙하신 분들께는 이질적으로 느껴질 수 있음을 미리 알려드립니다.
비개발자도 코딩을 익혀 SteemJS를 써보자 - 사용자 정보 가져오기 (상)
지난시간에는, SteemJS를 이용하여 데이터를 가져와서 브라우저 내에 저장해 보았습니다. 오늘은 저장된 데이터를 화면에 출력하고, 나머지 부분도 구현해 보도록 하겠습니다.
지난번에 get_account.html 파일 작성하던것을 메모장이나 MS Code를 이용하여 불러오세요. 그리고 탐색기에서 get_account.html를 더블클릭하여 구글 크롬에 띄워 두세요. 마지막으로, 구글크롬 화면에서 오른쪽 클릭 하여 "검사" 를 클릭하셔서 개발 창을 엽니다. 자 준비 되었습니다!
지난 시간에 get_user라는 함수를 만들었습니다. 이 함수의 첫번째 파라메터로는 사용자 이름이 들어가고, 두번째 파라메터로는 데이터를 모두 가져온후에 실행할 함수를 넣으면 되는 것 기억 하시죠?
get_user('asbear', 함수)
그럼 여러분이 "데이터를 화면에 출력해주는 함수"를 만들어서 저기에다가 지정해 주시기만 하면 되겠네요. 자 만들어 봅시다!
자, 처음으로 여러분이 함수를 하나 만들게 되셨습니다. 이해를 돕기 위하여 가장 간단한것을 하나 만들어볼까요? 아래 코드를 복사 하셔서, 위에 복사해 넣어주세요.
function show_as_text() {
if (user_info) {
var info = JSON.stringify(user_info);
$('#user_area').append(info);
}
}
이렇게요. 그리고 잊지말고 저장 하시고, 크롬으로 가서 페이지를 새로 고쳐 봅니다. 예상대로 아무일도 일어나지 않습니다.
그럼 이제 오른쪽 콘솔창에 아래와 같이 적고 엔터를 쳐볼까요?
get_user('sochul', show_as_text)
그럼 아래와같은 결과가 출력 될것입니다. 소철님 프로필이 웹페이지에 출력 되었지요? (스팀이 요즘 버벅거려서 조금 오래걸릴수 있습니다.)
위에서 show_as_text라는 함수를 만드셨지요? 그리고 지난시간에 만드신 get_user 함수의 두번째 파라메터로 show_as_text를 넣으셨으니, 사용자 정보를 가져온후 show_as_text가 호출 된 것까지 이해 하셨나요? 굿입니다. 이제 show_as_text 가 어떻게 내용을 웹페이지에 출력했는지 설명 드리겠습니다. 소스를 다시 보시지요.
(28번줄) 에 보시면 이 함수는 user_info에 뭔가 저장 되었을때만 대괄호 {} 안을 수행합니다. 그 외에는 어차피 아무것도 할수없으니 그냥 종료 됩니다. 이번 경우에는 user_info가 있기때문에 29번줄이 수행 될것입니다.
(29) var info = XXX 는 info라는 이름의 변수를 앞으로 쓸건데, 초기 값으로는 XXX 를 가진다 라고 선언한것이죠. 지난시간에 설명 드렸습니다. 여기서 XXX 자리에 JSON.stringify(user_info)가 왔으니, 이것을 info에 저장한다는 의미입니다. 이제 JSON.stringify(user_info)가 뭔지 알아야겠네요.
JSON.stringify는 자바스크립트에 이미 만들어져있는 함수입니다. 하는일은, JSON 라는 구조를 문자로 바꿔주는것입니다. 그런데 JSON 이 뭘까요?
JSON은, 자바스크립트에서 가장 중요한 데이터구조이며, 자바스크립트의 핵심중의 핵심입니다. 이 구조를통해 언어 자체의 구조를 유지하며, 복잡한 값을 효율적으로 담을 수 있습니다. 예를들어 이런 내용이 있습니다.
이름: asbear
사는곳: 영국
좋아하는음식:
한식: 불고기
중식: 짜장면
이내용을 자바스크립트가 이해할수있도록 JSON에 담아 my_info에 저장하고싶으면 아래처럼 됩니다.
var my_info = {
이름: 'asbear',
사는곳: '영국',
좋아하는음식: {
한식: '불고기',
중식: '짜장면'
}
}
여기서 '불고기' 라는 값을 획득하고싶으면 어떻게 하면 될까요? 아주 쉽습니다. 다음과같이 하시면 됩니다.
my_info.좋아하는음식.한식
이 JSON이라는 구조는 자바스크립트의 모든 곳에 사용됩니다. SteemJS에서 사용자 정보를 얻어올때도 마찬가지입니다. get_user() 함수를통해서 얻어온 사용자 정보는 다음과같은 형태의 JSON 으로 저장되오 user_info 변수에 저장되어 있는 것입니다. 바로 아래와 같은 형태로 말입니다.
{
cover_image: "https://i.imgur.com/O6zL7fH.jpg",
profile_image: "https://i.imgur.com/Xa4qRTO.jpg",
name: "Sochul Socool",
location: "Seoul korea",
about: "Si project directer[매주 신규작가를 지원합니다] ..."
id: "sochul"}
}
그런데 일반적으로 JSON 구조를 웹 페이지에 직접 출력 할 수가 없습니다. 그래서 JSON.stringify 라는 함수를 이용하여 문자열로 변환해 주어야 비로소 출력이 가능합니다.
다시 29번줄을 이해해 볼까요? user_info라는 JSON 데이터를 JSON.stringify 라는함수를이용하여 문자열로 변환하고 이를 info에 저장한다는 의미로 해석 됩니다. 이해 가시지요? ^^
(30번줄) info저장한 내용을 user_area라는 공간에 추가한다는 의미입니다. 또다시 새로운 개념이 나왔습니다. 반드시 이해하고 넘어가셔야 하는 내용 중 하나입니다. 하지만 지금은 기술적으로 자세히 설명하지 않겠습니다. 너무 일이 커져 버리거든요. 간략하게 짚고 넘어가도록 하겠습니다. 지난주에 가장 먼저 추가했던 HTML 코드가 기억 나시나요? 아래를 보시지요.
여기에서 6번째줄을 보시면 <div id="user_area"></div> 가 있습니다. id="user_area"가 눈에 띄죠? <div>라는 태그에 id 값을 설정하여 고유의 이름 준것입니다. 자바스크립트에서는, 이 이름을 가지고 해당 <div> 에 접근할 수 있습니다. 다음과 같은 방법으로요.
$('#user_area')
이 구문은 JQuery라는 것인데, 이름만 기억 해 두세요. 지금은 그냥, 이 구문이 실행되면 <div>가 반환된다고 생각하세요. 그 반환된 <div>에 append()라는 함수를 호출하여 내용을 추가하는 방법이 바로 30번줄의 코드입니다.
$('#user_area').append(info);
어떤 대상에 함수를 호출할때, 대상과 함수 사이에 마침표를 찍는것이 대부분의 프로그래밍 언어의 규칙입니다. 위에 소개되었던 JSON.stringify 는 사실 하나의 함수가 아니라, JSON 이라는 놈의 stringify라는 함수를 호출하는 것이지요. 점차 익숙해지실것입니다.
위의 예제로 출력된 화면은 정말 너무 퍽퍽하죠? 조금이라도 보기좋게 출력 해보아야 겠습니다. 아래 코드를 show_as_text() 가 끝난 다음줄과 </script> 사이에 추가 하세요.
function show_nicely() {
if (user_info) {
var user_html = $('').append(
$('', {src: user_info.profile_image, class: 'img-circle', width:120})
).append(
$(''
).text(user_info.id + ' - ' + user_info.name)
).append(
$(''
).text(user_info.location)
).append(
$(''
).text(user_info.about)
);
$('#user_area').append(user_html);
}
}
자, show_nicely 함수를 추가 하였습니다. 한번 사용 해 보도록 하겠습니다. 파일을 저장하시고, 크롬 페이지를 새로고침 하시고, 검사 창 프롬프트에 아래를 입력 해 보세요.
get_user('segyepark', show_nicely)
값을 성공적으로 가져온다면 다음과같은 화면을 보시게 될겁니다.
slow_nicely함수는 조금 더 다양한 HTML 태그와 JQuery 테크닉을 이용하여 사용자 정보를 보기좋게 출력합니다. 함수의 내용은 복잡해 보이지만, 의외로 간단합니다. 여러분이 지금까지 공부하신것으로 show_nicely함수를 대부분 이해 하실 수 있습니다. 제가 몇가지 더 알려드릴테니, 내용을 직접 한번 이해 해 보시길 바랍니다. 이러한 연습은 앞으로 코딩을 하시는데 큰 도움이 될겁니다.
$('<태그이름/>') 는, $('#이름')과 비슷하나, 기존에 있는것이 아니라 새로운 <태그이름>의 객체를 만들어냅니다.$('<태그이름/>', JSON) 처럼, 뒤에 JSON 추가해서 만들면, 태그의 파라메터들을 설정해서 만들어냅니다..append()이 추가하는것이라면, .text()는 안에 글자를 써넣는것입니다.< img>라는 태그는, 이미지를 화면에 띄우는 태그입니다.<h2> <h5>등의 태그는, 안에 넣은 글씨의 크기를 다르게 합니다. 숫자가 낮을수록 글자가 큽니다.첫번째 강좌와 이번 강좌에 주어진 내용, 그리고 위의 추가 설명을 가지고 이 함수를 분석해내신다면, 프로그래밍에 한걸음 다가가는것입니다. 제가 드리는 첫번째 숙제입니다. (ㅎㅎㅎ) 이 고비를 넘기시면 앞으로 있을 강좌도 더 자신있게 따라오실 수 있습니다. 프로그래밍을 직업으로 가진 사람들도, 새로운 언어를 접할때마다 이런 과정을 수도없이 반복합니다. 그러니 프로그래밍을 배우시는 분들은 피할 수 없는 과정입니다. 화이팅입니다!
지난 강좌와 이번 강좌의 전체 코드입니다.
https://gist.github.com/ianpark/1e63149de8c730e2bc023913945d7217
비 개발자분들께 HTML, Javascript, JQuery등을 함께 알려드리며 SteemJS를 사용할수 있게 해드리는것은, 배우시는 분들에게만큼이나 저에게도 큰 도전입니다. 한분이라도 흥미와 열정을가지고 잘 따라오시고, 좋은것을 얻어가신다면 참 뿌듯할 것 같습니다. 많은 피드백 부탁드립니다. 예제 구현에 성공하시면 저에게도 보여주시고요 ㅎㅎ
다음 시간에는, 입력창과 버튼을 달아서 실제 앱처럼 동작하도록 만들어 보겠습니다. 첫 SteemJS 툴을 만들게 되시는 것이죠 ^^
여러분 행복한 추석 연휴 보내세요 ^^