개발공부 11일차 [Jabascript, JQuery, Fetch]

노션에 정리중이다가 넘어왔습니다.

항해 14기 합격해서 어제부터 제공된 웹개발종합반 강의를 듣고있습니다.

1주차(html, css)는 어제 1회 완강을 했습니다.

 

오늘은 2주차(javascript) 강의를 들었다.

JQuery 및 Fatch를 배웠는데 남자친구는 옆에서 JQuery는 요새 잘 안쓰인다고 자바스크립트를 열심히 하라고한다.

 

지역변수 , 전역변수에 대해 먼저 이해하는게 좋을 것 같아 유튜브를 찾아봤지만 변수를 var를 쓴다 

생활코딩에선 var를 쓰고 노마드 강의에선 var는 무조건 쓰지말라하고.. ;; 

 

자주쓰이는 함수

forEach - 반복문

forEach(() => {

})

empty - 비우다

forEach - 반복문

append - 추가하다

function checkResult() {
let peoples = [
        { name: "서영", age: 24 },
        { name: "현아", age: 30 },
        { name: "영환", age: 12 },
        { name: "서연", age: 15 },
        { name: "지용", age: 18 },
        { name: "예지", age: 36 },
      ];
      $("#q2").empty();
      peoples.forEach((people) => {
        const name = people['name'];
        const age = people['age']
        let temp_html = `<p>${name}는 ${age}살입니다.</p>`;
        $("#q2").append(temp_html);
      });
    }

const로 변수를 추출하고 그 변수를 백틱에 넣어서 추가 후 반복시킴

서버에서 크라이언트로 데이터를 내려줄 때 dictionary형태로 내려주는걸 json 이라고 한다고 함.

<style>
	color : red;
</style>

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

fetch()에 괄호에 데이터를 가지고올 링크를 넣어주고 가지고 올 데이터 정보를

rows에 넣어주고서 forEach(a)로 rows데이터 중 가지고 올 데이터를 적어주면 됨.
then -> fetch에서 가지온 데이터를 어떻게 처리할것인지를 의미함.
li에 class를 넣어서 css로 색상을 넣어주고 거기에 조건문을 넣어서 조건에 맞으면 class가 들어간 백틱내용을 넣어주고

아닐 경우 class가 없는 백틱 내용을 넣어줌

결과적으로 40보다 클 경우 빨간글씨로 나오고 아닐 경우 기본 검정글씨로 나옴

 

2주차 숙제

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

결과 값 ⬇️

위에서 했던 배열을 리스트에 넣어주는게 아닌 현재 서울의 날씨 : 에 숫자만 변경 하는거다 보니 forEach를 쓰는게 아닌 현재값만 

없애주고 .text() 변수명을 입력해서 실시간 API를 보여줬음.

 

강의 내내 forEach만 쓰다보니 해당 숙제에도 적고서 왜 안되지? 하면서 한참 헤매다가 결국 남자친구에게 도움을 요청해서 풀었다...

그냥 똑같이 내면 숙제가 아니겠지....

 

오늘은 공부 여기까지 하는걸로 하겠습니다😵‍💫😵‍💫😵‍💫😵‍💫