[JavaScript] 09. JSON

서회정

Apr 07, 2025

Contents

1. JSON타입 데이터 2. JSON 데이터 받기 3. async/await로 JSON 데이터 가져오기 예제

1. JSON타입 데이터

💡

stringify()

자바스크립트 값을 JSON문자열로 변환함.

parse()

JSON문자열을 구문 분석하여 문자열로 설명된 자바스크립트 값 또는 객체 값을 구성함.

✅ 자바스크립트 오브젝트를 JSON으로

✅ JSON 오브젝트를 자바스크립트로

예제 전체 코드


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>json이 뭐니?</title>
  </head>
  <body>
    <h1>json</h1>
    <hr />

    <!-- 자바 스크립트 오브텍트 노테이션 -->
    <!-- JavaScript Object Notation -->
    <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);
        console.log(data.address.city);
      }

      let user = {
        id: 1,
        username: "ssar",
        password: "1234",
        hobby: ["축구", "농구"],
        address: {
          con: "한국",
          city: "부산",
          postCode: 56666,
        },
      };
      //console.log(user);
    </script>
  </body>
</html>

2. JSON 데이터 받기

💡

async

function 앞에 붙으면 해당 함수는 항상 프라미스를 반환함. 프라미스가 아닌 값이 반환되어도 이를 이행 상태의 프라미스로 값을 감싸, 결국 이행된 프라미스로 반환될 수 있도록 함.

await

async 안에서만 동작되는 키워드, 프라미스가 처리될 때까지 기다리고 처리 후 결과가 반환됨.

fetch()

fetch()는 네트워크 요청을 보낼 때 사용하는 최신 JavaScript API

Promise를 반환하며, 데이터를 가져오거나 처리할 수 있음

then 또는 async/await을 사용하여 데이터를 처리 가능

then

Promise 객체에서 비동기 작업이 끝난 후 후속 처리 코드를 실행하는 메서드.

.then()을 체이닝하여 여러 개의 비동기 작업을 순차적으로 실행 가능.

.catch()를 붙여 에러 처리도 가능.

✅ 동기와 비동기

동기 - 직렬적으로 태스크를 수행하는 방식, 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식을 말함. 어떤 태스크를 처리할 동안 나머지 태스크는 대기 상태로 존재함. cpu가 느려지는 것은 아니지만 시스템의 전반적인 효율이 떨어질 수 있음

비동기 - 병렬적으로 태스크를 수행하는 방식을 말함. 요청을 보낸 후 응답의 수락 여부와는 관계 없이 다음 태스크가 동작하는 방식, 자원을 보다 효율적으로 사용할 수 있음


<!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>
    //then 활용
      async function download() {
        let response = fetch("https://jsonplaceholder.typicode.com/todos/1", {
          method: "get",
        });

        response
          .then((res) => res.json)
          .then((res) => {
            console.log(res);
          });
      }

			//async/await 활용
      // 비동기 함수 async
      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. async/await로 JSON 데이터 가져오기 예제


<!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>