[자바스크립트] 18. 동기 / 비동기

Apr 02, 2025

Contents

동기 요청

: 요청을 보내고 응답이 올 때까지 코드의 실행이 멈춥니다


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);
}

서버로부터 응답이 도착하기 전까지 이후의 코드가 실행되지 않기 때문에 UI가 멈추거나(프리즈) 느려질 수 있습니다.

>>>>>>> 5초 후 >>>>>>>

비동기 요청

: 요청을 보내고 다른 작업을 계속 수행


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);
}

fetch() 함수는 기본적으로 비동기 요청을 수행합니다. (async/await 사용)

await 키워드를 사용하면 해당 요청이 완료될 때까지 기다린 후, 응답을 변수에 할당합니다.

>>>>>>> 5초 후 >>>>>>>

전체 코드


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