'JSON 기초실습' 태그의 글 목록

JSON 기초실습

JSON 기초 (feat. Live Server) 2021.10.16

JSON 기초 (feat. Live Server)

2021. 10. 16. 14:45

이 글의 동영상 강의입니다.
https://youtu.be/7mpiKHkkVD4

요즘 가장 많이 사용하는 Data Type인 JSON에 대해 알아보고 실습을 진행합니다.
* 이 문서는 Mozilla의 MDN 사이트의 내용을 참고하여 작성하였습니다.
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 객체로 선언하면 사용이 가능합니다.
(실무에서는 RESTAPI등을 호출하여 JSON 데이터를 가져오는 형태로 많이 사용합니다.)

const superHeroes = { 
      "squadName" : "Super hero squad",
      ...
}

위 JSON을 다음과 같이 호출하여 사용합니다.

superHeroes.homeTown 
superHeroes['active']

배열일 경우에는 "[index]"의 형식으로 사용 가능합니다.
(index로 사용하는 숫자는 첫 번째가 0부터 시작됩니다)

superHeroes['members'][1]['powers'][2]

실습

프로젝트 생성 및 코드 작성

hero라는 이름의 폴더를 생성합니다.

mkdir hero
cd hero

VSCode에서 폴더를 오픈합니다.
아래와 같이 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>

아래와 같이 style.css를 만듭니다.

/* || 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의 탐색기에 index.html을 마우스를 우클릭하여 LIve Server를 실행합니다.

브라우저가 실행되며 아래와 같이 실행됩니다.

Live Server가 잘 작동하는지 확인하기 위해 아래와 같이 index.html의 header를 수정합니다.

<header>
    <h1>Heroes!!!</h1>
</header>

다시 브라우저를 확인합니다.
- 아래와 같이 Title이 나오면 정상입니다.

JSON Data 가져오기

JSON Data는 아래 URL에서 가져오도록 합니다.
- https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json
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>

최종 실행 화면

문제 없이 실행 되었을 경우 아래와 같은 화면을 보실 수 있습니다.

이상으로 JSON에 대해서 알아보고 간단한 실습을 수행하여 보았습니다.
JSON은 어려운 문법이 아니고 많이 사용하고 있습니다.
사용법을 잘 익혀 두시면 프로그램 개발시 많은 도움이 될것입니다.

'자바스크립트' 카테고리의 다른 글

Javascript 기초 문법 (0)	2021.12.12

PREV 1 NEXT

코드 기어 Code Gear - 개발 강좌