이 글의 동영상 강의입니다.https://youtu.be/7mpiKHkkVD4
VIDEO
JSON 기초 이론과 실습
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON
JSON은 JavaScript Object Notation 의 약어입니다. JSON의 특징 JSON은 문자열 형태로 만들어집니다. 따라서 네트워크로 전송할 때 유용합니다. (객체 직렬화가 가능하기 때문) JSON의 데이터에 Access하기 위해서는 문자열 형태를 JSON 객체로 변환해야 합니다. Javascript에서는 기본적으로 JSON과 문자열의 상호 변환을 지원합니다. JSON의 구조 JSON은 {} 로 감싸여 있는 구조를 갖고 있습니다. 내부 데이터는 "Key : Value"의 형태로 구성되어 있습니다. Key는 "name"로 만들어진 문자열을 사용함. 예) "id", "password"등 Value는 Javascript의 type 즉, 문자열, 숫자, 배열, Boolean등을 사용할 수 있습니다. 아래는 예제 프로그램에서 사용할 샘플 JSON입니다. {
"squadName": "Super hero squad",
"homeTown": "Metro City",
"formed": 2016,
"secretBase": "Super tower",
"active": true,
"members": [
{
"name": "Molecule Man",
"age": 29,
"secretIdentity": "Dan Jukes",
"powers": [
"Radiation resistance",
"Turning tiny",
"Radiation blast"
]
},
{
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
},
{
"name": "Eternal Flame",
"age": 1000000,
"secretIdentity": "Unknown",
"powers": [
"Immortality",
"Heat Immunity",
"Inferno",
"Teleportation",
"Interdimensional travel"
]
}
]
}JSON Data에 접근하는 방법 Javascript에서는 아래와 같이 JSON 객체로 선언하면 사용이 가능합니다. const superHeroes = {
"squadName" : "Super hero squad",
...
}위 JSON을 다음과 같이 호출하여 사용합니다. superHeroes.homeTown
superHeroes['active']배열일 경우에는 "[index]"의 형식으로 사용 가능합니다. superHeroes['members'][1]['powers'][2] 실습 프로젝트 생성 및 코드 작성 mkdir hero
cd heroVSCode에서 폴더를 오픈합니다. 아래와 같이 index.html을 만듭니다. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Our superheroes</title>
<link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<section>
</section>
<script>
const header = document.querySelector('header');
const section = document.querySelector('section');
</script>
</body>
</html>/* || general styles */
html {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
}
body {
width: 800px;
margin: 0 auto;
}
h1, h2 {
font-family: 'Faster One', cursive;
}
/* header styles */
h1 {
font-size: 4rem;
text-align: center;
}
header p {
font-size: 1.3rem;
font-weight: bold;
text-align: center;
}
/* section styles */
section article {
width: 33%;
float: left;
}
section p {
margin: 5px 0;
}
section ul {
margin-top: 0;
}
h2 {
font-size: 2.5rem;
letter-spacing: -5px;
margin-bottom: 10px;
}프로젝트 실행
우리는 프로그램 실행을 편하게 하기 위해서 VSCode의 확장 프로그램인 Live Server를 사용합니다.
VSCode의 extention에서 Live Server를 검색하여 설치합니다.
VSCode Extention LIve Server
VSCode의 탐색기에 index.html을 마우스를 우클릭하여 LIve Server를 실행합니다. Live Server Run
Live Server가 잘 작동하는지 확인하기 위해 아래와 같이 index.html의 header를 수정합니다. <header>
<h1>Heroes!!!</h1>
</header>Live Server Test
JSON Data 가져오기
JSON Data는 아래 URL에서 가져오도록 합니다.
JSON Data를 요청하는 Code를 index.html에 작성합니다.
</body> 위에 <script>와 </script>사이에 작성하시면 됩니다.
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();Response가 왔을때 처리하는 코드를 아래와 같이 작성합니다. request.onload = function() {
var superHeroes = request.response;
populateHeader(superHeroes);
showHeroes(superHeroes);
}위의 populateHeader function의 Code를 아래와 같이 작성합니다. function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = jsonObj['squadName'];
header.appendChild(myH1);
var myPara = document.createElement('p');
myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
header.appendChild(myPara);
}위의showHeroes function의 Code를 아래와 같이 작성합니다. function showHeroes(jsonObj) {
var heroes = jsonObj['members'];
for (var i = 0; i < heroes.length; i++) {
var myArticle = document.createElement('article');
var myH2 = document.createElement('h2');
var myPara1 = document.createElement('p');
var myPara2 = document.createElement('p');
var myPara3 = document.createElement('p');
var myList = document.createElement('ul');
myH2.textContent = heroes[i].name;
myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
myPara2.textContent = 'Age: ' + heroes[i].age;
myPara3.textContent = 'Superpowers:';
var superPowers = heroes[i].powers;
for (var j = 0; j < superPowers.length; j++) {
var listItem = document.createElement('li');
listItem.textContent = superPowers[j];
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}index.html의 최종 소스는 아래와 같습니다. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Our superheroes</title>
<link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<section>
</section>
<script>
const header = document.querySelector('header');
const section = document.querySelector('section');
let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
const superHeroes = request.response;
populateHeader(superHeroes);
showHeroes(superHeroes);
}
function populateHeader(obj) {
const myH1 = document.createElement('h1');
myH1.textContent = obj['squadName'];
header.appendChild(myH1);
const myPara = document.createElement('p');
myPara.textContent = 'Hometown: ' + obj['homeTown'] + ' // Formed: ' + obj['formed'];
header.appendChild(myPara);
}
function showHeroes(obj) {
const heroes = obj['members'];
for(let i = 0; i < heroes.length; i++) {
const myArticle = document.createElement('article');
const myH2 = document.createElement('h2');
const myPara1 = document.createElement('p');
const myPara2 = document.createElement('p');
const myPara3 = document.createElement('p');
const myList = document.createElement('ul');
myH2.textContent = heroes[i].name;
myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
myPara2.textContent = 'Age: ' + heroes[i].age;
myPara3.textContent = 'Superpowers:';
const superPowers = heroes[i].powers;
for(let j = 0; j < superPowers.length; j++) {
const listItem = document.createElement('li');
listItem.textContent = superPowers[j];
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
</script>
</body>
</html>
최종 실행 화면 문제 없이 실행 되었을 경우 아래와 같은 화면을 보실 수 있습니다. 최종 화면
