[왕초보] 웹개발 종합반 3주차 (2).

외부에서 API를 통해 데이터를 받아올 수 있게 되었다. 

            let url = ". . .";

            fetch(url).then(res => res.json()).then(data => { })

 

해당 코드를 이용하면 URL을 통해 외부에서 API를 받아올 수 있다.

fetch 코드를 이용하면 url에 저장된 특정 링크를 json으로 받아와 'data'라는 변수에 저정할 수 있다. 

이렇게 받아온 데이터는 리스트 딕셔너리의 형태를 띄고 있어서, 가져올 때 리스트 딕셔너리의 문법을 따른다. 

 

예시) 

            let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";

            fetch(url).then(res => res.json()).then(data => {

                let temp = data['temp']

                console.log(temp)

            })

 

이렇게 하면 해당 url에서 api를 받아와 data에 저장한 다음, data라는 변수에 저장된 리스트에서 temp라는 딕셔너리를 불러오는 식으로 특정 데이터를 뽑아올 수 있다. 

let url = "http://spartacodingclub.shop/sparta_api/seoulair";

            fetch(url).then(res => res.json()).then(data => {

                let seoul_mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']

                console.log(seoul_mise)

                $('#msg').text(seoul_mise)

            })

 

이런 식으로 데이터 안에 존재하는 딕셔너리에서 파일의 경로 찾듯 계속 안으로 들어간 다음, 원하는 데이터를 특정해서 가져오는 것도 가능하다. 

페이지를 시작하자마자 구동하게끔 하는 함수를 쓸 수 있게 되었다. 

$(document).ready(function () { })

 

이 코드를 사용하면 페이지를 구동하자마자, 내부에 설정된 함수를 발동할 수 있게끔 설정할 수 있다.

유희왕으로 따지면 특정 조건이 만족되면 발동하는 효과 같은 거려나? 

유발 즉시 효과라고 생각하면 편할 듯 하다. 

 

span 태그를 이용하여 텍스트 일부만을 유동적으로 바꿀 수 있게 되었다. 

<p>안녕하세요! 제 이름은 박민준입니다.<p>

 

여기에서 원래 박민준이라는 이름만을 name이라는 변수로 바꾸려고 했을 때. 

 

<p id = "change">라는 아이디를 주고

 

let name_html = ' <p>안녕하세요 제 이름은 ${name}입니다!<p>

$('#change').append(name_html)

 

이런 식으로 썼어야 했지만 더욱 간단하게

 

$('#change').text(name)

 

<p>안녕하세요 제 이름은 <span id="change">???<span>입니다!<p>

 

이런 식으로 간단 표기할 수 있게 되었다! 훨씬 쉬워졌다.