티스토리 뷰
JSON이 대체 뭘까!! JSON.stringify도 있고 parse도 있고... 한데 JSON이 뭐길래 이 형식으로 바꿔치기를 해야하는 걸까??
궁금해서 MDN 사이트에 들어갔다가 대문짝만하게 내 생각을 써놔서 웃겼다
MDN의 묘한 번역체 때문에 절반정도 읽다가 그냥 다른 블로그 참조하는 일도 많았는데... JSON에 대한 설명은 읽다보니까 이해도 되고 마지막에 무려 과제까지(!!) 내줘서 개념과 메소드를 익힐 겸 따라해보기로 했다.
JSON = JavaScript Object Notation
JSON은 JavaScript Object Notation의 약자로, 데이터를 주고받기 위해 자바스크립트 객체 문법으로 작성한 포맷이다. 데이터를 주고 받을 때 JSON형태로 전송하며 JS의 문법으로 작성돼 JS의 객체로 변환하는 것과 그 반대가 가능하다.
1. 과제
MDN에서 다음 json을 받아서 화면에 출력하라는 과제를 내줬다...
https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json
2. html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/JSON_project.css">
<title>JSON 연습</title>
</head>
<body>
<div id="container">
<header>
</header>
<section>
</section>
</div>
<script src="/js/JSON_project.js"></script>
</body>
</html>
빈 태그들을 두고 JS에서 appendChild메소드를 사용해 자식 태그를 연결시켜 주었다.
3. JS
let header = document.querySelector('header');
let section = document.querySelector('section');
let JsonDataLink = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
fetch(JsonDataLink)
.then(res => {
return res.json();
})
.then(data => {
CreateH1(data);
CreateH2(data);
CreateHeroes(data);
})
function CreateH1(jsonobj) {
let h1 = document.createElement('h1');
h1.innerHTML = jsonobj.squadName;
h1.id = "title";
header.appendChild(h1);
}
function CreateH2(jsonobj) {
let h2_top = document.createElement('h2');
let h2_bottom = document.createElement('h2');
h2_top.innerHTML = 'Hometown: ' + jsonobj.homeTown;
h2_top.className = "sub_title";
h2_bottom.innerHTML = "Formed: " + jsonobj.formed;
h2_bottom.className = "sub_title";
header.appendChild(h2_top);
header.appendChild(h2_bottom);
}
function CreateHeroes(jsonobj) {
let heros = jsonobj.members;
for (let i = 0; i < heros.length; i++) {
let article = document.createElement('article');
let hero_name = document.createElement('p');
let hero_age = document.createElement('p');
let hero_secret = document.createElement('p');
let powers = document.createElement('ul');
let my_hero = heros[i];
hero_name.innerHTML = my_hero.name;
hero_age.innerHTML = my_hero.age;
hero_secret.innerHTML = my_hero.secretIdentity;
article.className = "hero_list";
hero_name.className = "hero_name";
for (let power_count = 0; power_count < my_hero.powers.length; power_count++) {
let hero_power = document.createElement('li');
hero_power.innerHTML = my_hero.powers[power_count];
powers.appendChild(hero_power);
}
section.appendChild(article);
article.appendChild(hero_name);
article.appendChild(hero_age);
article.appendChild(hero_secret);
article.appendChild(powers);
}
}
fetch로 받아온 데이터를 json메소드로 처리한 후 return 해 주어야 json 데이터에 접근할 수 있다.
4. 결과
css를 적용하지 않고 데이터만 나열한 모습.
아래는 CSS 입힌 모습이다.
+ )
자식 태그를 JS에서 연결해주고... CSS로 마저 작업하다보니까 실제로 웹 제작하려면 이것저것 다 잘게 나눠야겠구나...라는 생각이 들었다
여기다가 CSS 애니메이션 효과도 주는 사람들이 있다는 건데 어떻게 그런게 가능하지...???
나도 예쁜 걸 만들고 싶은 욕구는 가득가득하지만...어디서 어떻게 배워야 하는지 모르겠다 ㅜ.ㅜ
'Computer Science' 카테고리의 다른 글
| [복습] OTT 서비스가 웹에서 재생되는 방법 (0) | 2023.05.06 |
|---|---|
| [CSS] fixed 와 sticky (0) | 2022.06.02 |
| [용어정리] 정적 타입 언어 / 동적 타입 언어 (0) | 2022.05.23 |
| [용어정리] 프레임 워크 / 라이브러리 (0) | 2022.05.23 |
| [용어 정리] 비동기처리 (0) | 2022.04.21 |