![[자바스크립트] 6. JSON](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-04-01T08%3A47%3A50.838Z-697462a0-aec3-4cfe-9cb1-43a23541b842&w=2048&q=75)
1. JS Object vs JSON
- 통신을 진행하기 위해서는 자신의 오브젝트를 그대로 전달해서는 안 됨
- 데이터를 받는 쪽에서 데이터를 이해(parse)할 수 없음
- 중간 언어가 필요 : JSON 사용
- JSON (JavaScript Object Notation) : JS Object를 표기하는 방법
- id에 쌍따옴표(””)가 추가되는 것 이외에는 JS Object와 전부 동일
<!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()">JS Object to JSON</button>
<button onclick="m2()">JSON to JS Object</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);
console.log(data.address.city);
}
let user = {
id: 1,
username: "ssar",
password: "1234",
hobby: ["축구", "농구"],
address: {
country: "대한민국",
city: "부산광역시",
postcode: 56666
}
};
// console.log(user);
</script>
</body>
</html>2. Promise & Asynchronous Functions
- JS는 Single Thread로 동작 : 하나의 Process를 진행하면 다른 일을 수행할 수 없음
- File IO 등이 발생할 경우 waiting 발생 : 다른 이벤트 확인이 불가
- 이 때문에 브라우저에서는 Promise 생성 : 나중에 해당 데이터를 건네줌
- 비동기 함수(Asynchronous Function) : 대기 상태를 해결하기 위해 함수 내에 checkpoint를 지정
- checkpoint를 지정하지 않은 Process(stack)부터 처리
- 이후 다시 checkpoint로 이동하여 남은 Process 처리
<!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>
// promise
function download() {
let response = fetch("https://jsonplaceholder.typicode.com/todos/1", {
method: "get"
});
// console.log(response);
response
.then((res) => res.json())
.then((res) => {
console.log(res);
});
}
// 비동기 함수(Asynchronous Function) : 대기에 걸리지 않고 빠져나갈 수 있음
async function download2() {
let response = await fetch("https://jsonplaceholder.typicode.com/todos/1", {
method: "get"
});
// console.log(response);
let responseBody = await response.json();
console.log(responseBody);
}
</script>
</body>
</html>3. Post
- 비동기 함수를 사용하여 온전한 JS Object를 받을 수 있음
- 동기적 함수를 사용할 경우 Promise 객체를 받음 : 이후 추가적인 대기시간 소요
- 값을 삽입할 dom의 id를 참조하여 값(innerHTML)을 변경
<!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>4. Dom Tree
- HTML이 로딩됨 = 표시할 태그들을 전부 로딩하여 Tree 형태로 만듦
- Tree 내 요소들이 전부 로딩되지 않으면, HTML이 그려지지 않음
- 이는 동기적 프로그래밍으로 작성되었을 경우 확실히 드러나게 됨
- 서버의 비동기성을 확인하기 위한 Thread.sleep(5000) 코드 추가
- 프로세스를 강제로 5초간 멈춤
@GetMapping("/api/boards/{id}")
public ApiUtil<?> findById(@PathVariable("id") int id) {
Board board = boardRepository.selectOne(id);
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
throw new RuntimeException(e);
}
return new ApiUtil<>(board); // MessageConverter
}- 비동기적 함수를 사용하여 HTML을 구상
- 데이터를 담을 3번째 박스를 기다리는 동안 나머지 박스를 그림
- 데이터 박스를 그리는 함수가 3번째 위치에 있더라도 맨 마지막에 그려짐
- 비동기 함수의 특징 : 나머지 process를 우선 처리
<!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 → 동기 요청
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>
- 동기적 함수를 사용했을 경우
- Tree가 전부 구상되지 않았기 때문에, process의 대기 시간동안 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();
makeWhiteBox();
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 → 동기 요청
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>- 처음에 화면이 멈추어 있는 모습 : process 진행으로 인한 HTML 생성 X
- 모든 프로세스 처리 후 순서대로 HTML을 다시 그림
Share article