Post

[JavaScript] 복습 3

Posted Updated
By 79gun79
3 min read
[JavaScript] 복습 3

데브자스

JavaScript fetch

WEB API

  • 웹 브라우저가 제공해주는 API
  • 웹 브라우저를 기반으로 해서 사용해야 함

fetch()

  • 자바스크립트에서 HTTP 요청을 보내는 내장 함수
  • API 호출하기 위해서 사용함

  • 대표적인 API ENDPOINT

    JSONPlaceholder - Free Fake REST API

  • 사용 방법

    1

      fetch(요청 보낼 주소, 다양한 options)

    내부적으로, Promise 객체(resolve,reject)를 반환 → 성공, 실패로 나뉨
    실질적으로, Response 객체를 반환

  • 사용 방법 (JSON 객체를 반환)

    Response 객체.json()을 사용하여 반환 받음

    • 코드

      1
2
3
4
5
6
7
8
9
10
11
12
13

        const API = "https://jsonplaceholder.typicode.com/users";
  fetch(API) //
    .then((response) => {
      console.log(response);
      return response.json();
    })
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.error(error);
    });

      Image

  • 에러 처리 방식

    • 도메인 주소가 잘못됨 → reject됨
      Image

    • 도메인 주소 하위가 잘못됨 → Response 객체.ok:false
      Image

    • 코드 (수정된 처리방식)

      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

        const API = "https://jsonplaceholder.typicode.com/users2";
  fetch(API) //
    .then((response) => {
      if (!response.ok) {
        throw new Error("요청 주소가 올바르지 않습니다!");
      }
      return response.json();
    })
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.error(error);
    });

      Image

  • async & await 문으로 변경

    • 코드

      1
2
3
4
5
6
7
8
9
10
11
12
13
14

        const API = "https://jsonplaceholder.typicode.com/users2";
        
  async function fetchUserData() {
    try {
      const response = await fetch(API);
      if (!response.ok) {
        throw new Error("요청 주소가 올바르지 않습니다!");
      }
      const data = await response.json();
      console.log(data);
    } catch (err) {
      console.error(err);
    }
  }


SPA, Single Page Application

SPA 구현

  • Single Page Application
  • 필요한 부분만 router를 통해 URL만 바뀌어 렌더링함.
  • 경로 동작을 하기 위해, HTML 페이지 3개를 제작한다.
    • home, about, contact HTML 페이지
    • 각각 구분을 위한 문구만 간단히 작성

index.html

  • 보여지는 문서를 작성함

  • 코드

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

      <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>router를 위해</title>
    </head>
    <body>
      <div id="root">
        <ul>
          <li>
            <a href="/">Home</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/contact">Contact</a>
          </li>
        </ul>
      </div>
      <main></main>
      <script src="./router.js"></script>
    </body>
  </html>

router.js

  • 라우팅 테이블 정의
  • 링크 클릭 이벤트를 만들어, 해당 경로에 맞게 HTML 로딩
  • HTML 파일은 비동기로 로딩하여, main으로 보여줌
  • 추가로 popstate로 뒤로가기, 앞으로가기 구현

  • 코드

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

      const routes = {
    "/": "./spa/pages/home.html",
    "/about": "./spa/pages/about.html",
    "/contact": "./spa/pages/contact.html",
  };
    
  function router(e) {
    e.preventDefault();
    window.history.pushState({}, "", e.target.href);
    handleLocation();
  }
    
  async function handleLocation() {
    const pathname = window.location.pathname;
    const data = await (await fetch(routes[pathname])).text();
    document.querySelector("main").innerHTML = data;
    console.log(data);
  }
    
  window.addEventListener("DOMContentLoaded", () => {
    Array.from(document.querySelectorAll("a")) //
      .forEach((element) => {
        element.addEventListener("click", router);
      });
  });

    Image

프로그래머스 데브코스, 자바스크립트
study programmers javascript
This post is licensed under CC BY 4.0 by the author.