"> Document

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="post-1"></div>
    </div>

    <script>
      async function download() {
        let res = await fetch("<https://jsonplaceholder.typicode.com/posts/1>");
        console.log(res);

        const contentType = res.headers.get("content-type");
        console.log(contentType);

        let post = await res.json(); // json문자열을 javascript object로 변환
        console.log(post);

        let dom = document.querySelector("#post-1");
        dom.innerHTML = `
            userId : ${post.userId} <br>
            id : ${post.id} <br>
            title : ${post.title} <br>
            body : ${post.body} <br>
        `;
      }

      download();

      //while (true) {}
    </script>
  </body>
</html>

1. 이 코드가 하는 일 (한 문장)

브라우저가 https://jsonplaceholder.typicode.com/posts/1 로 GET 요청을 보내서 글 1개를 받아오고, 그 내용을 #post-1 div에 HTML로 출력한다.

2. 전체 코드 (원본)

<!DOCTYPE html>
<htmllang="en">
<head>
<title>Document</title>
<style>
div {
border:1px solid black;
padding:10px;
      }
</style>
</head>
<body>
<divclass="container">
<divid="post-1"></div>
</div>

<script>
asyncfunctiondownload() {
let res =awaitfetch("<https://jsonplaceholder.typicode.com/posts/1>");
console.log(res);

const contentType = res.headers.get("content-type");
console.log(contentType);

let post =await res.json();// json문자열을 javascript object로 변환
console.log(post);

let dom =document.querySelector("#post-1");
        dom.innerHTML = `
            userId :${post.userId} <br>
            id :${post.id} <br>
            title :${post.title} <br>
            body :${post.body} <br>
        `;
      }

download();

//while (true) {}
</script>
</body>
</html>

3. HTML 구조 설명

3.1 `<!DOCTYPE html>`

<!DOCTYPE html>

“이 문서는 HTML5 문서입니다” 라고 브라우저에게 알려주는 선언

3.2 화면에 출력할 자리 만들기

<divclass="container">
<divid="post-1"></div>
</div>

container : 바깥 박스(그냥 묶어주는 용도)
#post-1 : 실제로 데이터를 출력할 목표 지점

즉, 나중에 JS가:

1. 이 코드가 하는 일 (한 문장)

2. 전체 코드 (원본)

3. HTML 구조 설명

3.1 <!DOCTYPE html>

3.2 화면에 출력할 자리 만들기

3.1 `<!DOCTYPE html>`