[사전캠프 3주차] Fetch 여기저기 사용해보기

아래 코드는 fetch를 사용해서 미세먼지 API로 정보를 얻고, 미세먼지가 40이 넘어갈 때는 클래스를 추가하여 빨간색으로 표시함.

<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() {
        let url = "http://spartacodingclub.shop/sparta_api/seoulair";
        $("#names-q1").empty(); //이미 append로 추가되어 보여지던 정보들 다 비워버리는(지워버리는) 매소드
        fetch(url)
          .then((res) => res.json())
          .then((data) => {
            let rows = data["RealtimeCityAir"]["row"];
            rows.forEach((element) => {
              let gu_name = element["MSRSTE_NM"];
              let gu_mise = element["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>

업데이트 버튼을 누르면(onclick) 함수 실행됨. 그리고, empty()를 사용해서 추가된 내용이 지워지고 새로 씌여지게함.

 

 

---

이전에 만들었던 album 표지에 서울 미세먼지 상태 표현.

      <p>현재 서울의 미세먼지 : <span id="msg">나쁨</span></p> 
      <!-- span 태그로 특정 구간의 텍스트만 따로 지정 가능 -->

span 태그는 HTML에서 인라인 요소 정의하는데 사용되고, 텍스트나 다른 요소를 스타일링하거나 특정 동작을 적용할 때 유용. 레이아웃에 변화를 주지 않고도 특정부분을 강조할 수 있음.

 

      // 페이지가 열릴때 혹은 새로고침되었을 떄 이미 미세먼지 API가져와서 서울 미세먼지 상태 표시해야함: $(document).ready(함수 내용); 쓰기!!
      $(document).ready(function () {
        let url = "http://spartacodingclub.shop/sparta_api/seoulair";
        fetch(url)
          .then((res) => res.json())
          .then((data) => {
            let mise = data["RealtimeCityAir"]["row"][0]["IDEX_NM"];
            $("#msg").text(mise); //text 바꿔주는 매소드
          });
      });

 

1) $(document).ready()는 jQuery에서 문서가 완전히 로드되고 DOM(Document Object Model)이 준비된 후에 특정 코드를 실행하도록 하는 메서드

 

2) text()는 jQuery에서 DOM 요소의 텍스트 내용을 가져오거나 설정하는 메서드

• Getter 로 쓰일 때(값 가져오기): let content = $("#msg").text(); // #msg 요소의 텍스트 내용을 가져오기
• Setter로 쓰일 때(값 설정하기): $("#msg").text("새로운 텍스트"); // #msg 요소의 텍스트 내용을 "새로운 텍스트"로 바꾸기

 

---

이전에 만들었던 jiflix에 현재 기온 추가하기

 

$(document).ready(function () {
        let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
        fetch(url)
          .then((res) => res.json())
          .then((data) => {
            let temp = data["temp"];
            $("#tem").text(temp);
          });
      });

위와 같은 방식으로 span태그 부분 텍스트 바꾸기.

 

 

---

3주차 강의 수강 완료! 과제까지 끝!

---

내일부터는 퀘스트 진행할 예정!!