Fetch API와 jQuery 사용법

오늘 배운 내용을 토대로, fetch API와 jQuery의 사용법에 대해 정리해보겠습니다.

Fetch API를 통한 데이터 가져오기

Fetch API를 사용하면, 웹에서 데이터를 쉽게 가져올 수 있습니다. 이를 통해 원격 서버로부터 데이터를 요청하고 가져올 수 있습니다. 간단한 예제 코드는 아래와 같습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

이 코드는 다음 단계를 거쳐 작동합니다:

fetch() 함수를 사용하여 원격 서버에서 데이터를 요청합니다.
요청한 데이터를 받으면, .then() 메서드를 사용해 JSON 형식으로 변환합니다.
JSON 데이터를 사용하여 원하는 작업을 수행합니다 (여기서는 콘솔에 출력합니다).

jQuery를 통한 HTML 요소 제어

jQuery는 자바스크립트 라이브러리로, HTML 문서의 요소를 쉽게 제어할 수 있게 해줍니다. 간단한 예제 코드는 아래와 같습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>미세먼지 API로Fetch 연습하고 가기!</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style type="text/css">
      div.question-box {
        margin: 10px 0 20px 0;
      }
      .bad {
        color: red;
      }
    </style>

    <script>
      function q1() {
        fetch("http://spartacodingclub.shop/sparta_api/seoulair")
          .then((res) => res.json())
          .then((data) => {
            let rows = data["RealtimeCityAir"]["row"];
            $("#names-q1").empty();
            rows.forEach((a) => {
              let gu_name = a["MSRSTE_NM"];
              let gu_mise = a["IDEX_MVL"];

              let temp_html = ``;
              if (gu_mise > 40) {
                temp_html = `<li class='bad'>${gu_name} : ${gu_mise}</li>`;
              } else {
                temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
              }
              $("#names-q1").append(temp_html);
            });
          });
      }
    </script>
  </head>

  <body>
    <h1>Fetch 연습하자!</h1>

    <hr />

    <div class="question-box">
      <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
      <p>모든 구의 미세먼지를 표기해주세요</p>
      <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
      <button onclick="q1()">업데이트</button>
      <ul id="names-q1"></ul>
    </div>
  </body>
</html>

이 코드는 다음 단계를 거쳐 작동합니다:

jQuery 라이브러리를 사용하기 위해 CDN을 이용해 로드합니다.
$("#names-q1").empty()을 사용하여 names-q1이 붙어있는 ul 태그를 비어줍니다.
$("#names-q1").append() 를 이용하여 새로운 요소를 추가하여줍니다.
클릭 이벤트가 발생하면, .css() 메서드를 사용해 해당 요소의 CSS 속성을 변경합니다 (여기서는 색상을 빨간색으로 변경합니다).

이러한 방법으로, fetch API와 jQuery를 사용하여 데이터를 가져오고 웹 페이지의 요소를 쉽게 제어할 수 있습니다. 이를 통해 다양한 웹 애플리케이션을 구현할 수 있습니다.