![[JavaScript] 5. 중간언어 JSON](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-04-03T03%3A36%3A21.133Z-faaeed2a-e842-479b-8967-43c00b3f1ae0&w=2048&q=75)
ex06/test01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>json</h1>
<hr />
<button onclick="m1()">자바스크립트 오브젝트를 JSON으로</button>
<button onclick="m2()">JSON을 자바스크립트 오브젝트로</button>
<script>
function m1() {
let data = JSON.stringify(user);
console.log(data);
}
let user = {
id: 1,
username: "ssar",
password: "1234",
hobby: ["축구", "농구"],
address: {
con: "한국",
city: "부산",
code: 56666,
},
};
// console.log(user);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>json</h1>
<hr />
<button onclick="m1()">자바스크립트 오브젝트를 JSON으로</button>
<button onclick="m2()">JSON을 자바스크립트 오브젝트로</button>
<script>
function m1() {
let data = JSON.stringify(user);
console.log(data);
}
function m2() {
let temp = `{"id":1,"username":"ssar","password":"1234","hobby":["축구","농구"],"address":{"con":"한국","city":"부산","code":56666}}`;
let data = JSON.parse(temp);
console.log(data);
}
let user = {
id: 1,
username: "ssar",
password: "1234",
hobby: ["축구", "농구"],
address: {
con: "한국",
city: "부산",
code: 56666,
},
};
// console.log(user);
</script>
</body>
</html>
동기적 함수(Promise) & 비동기적 함수
ex06/test02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>fetch get</h1>
<hr />
<button onclick="download()">다운로드</button>
<hr />
<button onclick="download2()">다운로드2</button>
<script>
function download() {
// 동기적함수
let response = fetch("https://jsonplaceholder.typicode.com/todos/1", {
method: "get",
});
response
.then((res) => res.json())
.then((res) => {
console.log(res);
});
}
async function download2() {
// 비동기적 함수
let response = await fetch(
// await fetcg -> checkpoint
"https://jsonplaceholder.typicode.com/todos/1",
{
method: "get",
}
);
let responseBody = await response.json();
console.log(responseBody);
}
</script>
</body>
</html>
ex06/test04.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 10px;
margin-bottom: 5px;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div id="outer-box"></div>
<script>
let site = document.querySelector("#outer-box");
makeRedBox();
makeOrangeBox();
makeWhiteBox2();
makeYellowBox();
makeGreenBox();
function makeRedBox() {
let divDom = document.createElement("div");
divDom.setAttribute("class", "red");
site.append(divDom);
}
function makeOrangeBox() {
let divDom = document.createElement("div");
divDom.setAttribute("class", "orange");
site.append(divDom);
}
function makeYellowBox() {
let divDom = document.createElement("div");
divDom.setAttribute("class", "yellow");
site.append(divDom);
}
function makeGreenBox() {
let divDom = document.createElement("div");
divDom.setAttribute("class", "green");
site.append(divDom);
}
function makeWhiteBox() {
let request = new XMLHttpRequest();
request.open("GET", "http://localhost:8080/api/boards/1", false); // 마지막 인자 false → 동기 요청
// body 데이터가 없어서 null을 보냄
request.send(null);
let responseBody = JSON.parse(request.responseText);
let divDom = document.createElement("div");
divDom.innerHTML = responseBody.body.title;
site.append(divDom);
}
async function makeWhiteBox2() {
let response = await fetch("http://localhost:8080/api/boards/1");
let responseBody = await response.json();
let divDom = document.createElement("div");
divDom.innerHTML = responseBody.body.title;
site.append(divDom);
}
</script>
</body>
</html>
➡ 비동기적 프로그램 (ex. Youtube)
💡 White Box가 그려지기 전에 Red, Orange, Yellow, Green Box가 먼저 그려짐
🕐 5초 뒤
💡 Red, Orange, Yellow, Green Box가 그려지고 나서 White Box가 그려지고 Data가 채워짐
➡ 동기적 프로그램
💡 전체 코드를 다 읽고 나서 그림을 그리기 시작하는데, White Box에서 멈춰있기 때문에 흰 화면만 보임
🕐 5초 뒤
💡 White Box에 Data를 채워넣은 뒤 Yello, Green Box가 그려져서 그림을 다 그리기까지 시간이 오래 걸린다
ex06/test03.html
CSR: Client Side Rendering
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div>
<div id="userId"></div>
<div id="id"></div>
<div id="title"></div>
<div id="body"></div>
</div>
<script>
async function getPost() {
let response = await fetch(
"https://jsonplaceholder.typicode.com/posts/1"
);
let responseBody = await response.json(); //js Object
// console.log(responseBody.userId);
// console.log(responseBody.id);
// console.log(responseBody.title);
// console.log(responseBody.body);
document.querySelector("#userId").innerHTML = responseBody.userId;
document.querySelector("#id").innerHTML = responseBody.id;
document.querySelector("#title").innerHTML = responseBody.title;
document.querySelector("#body").innerHTML = responseBody.body;
}
getPost();
</script>
</body>
</html>
Share article