[엘리스 sw 엔지니어 트랙] 19일차 async/await, API, HTTP, Fetch API

수업 19일차

오늘은 어제와 같은 내용을 엘리스에서 교육 듣고 문제 위주로 풀어봤다. 이론내용은 어제 잘 정리 했으니 다시 읽어보고 실습으로 대처해야겠다!

이론

• async/await : Promise를 활용한 비동기 코드를 간결하게 작성하는 문법
  HTTP : Web에서 서버와 클라이언트 간의 통신하는 방법을 정한것
  HTTP Message : 서버 주소, 요청 메서드, 상태 코드, target path, 해더 정보, 바디 정보 등이 포함, 사람이 읽을수 있음
  HTTP Status : HTTP 요청시, 클라이언트는 요청의 결과에 대한 상태 정보를 얻는다.
  요청 메서드 : HTTP에서 클라이언트는 서버로 요청을 보낸다.
  REST API : 사용자가 특정 기능을 사용할 수 있도록 제공하는 함수
  Fetch API : XMLHTTPRequest를 대처하는 HTTP 요청 API
  Response : 결과에 대한 다양한 정보를 담는다.
  Header : 객체의 헤더정보
  Body 메서드 : response.json() 메서드는 얻어온 body 정보를 json으로 만드는 Promise를 반화함
  POST 요청 : fetch(url, options)로, fetch 메서드 옵션을 넣는다.

실습

API 통신후 숫자 이상의 나이를 가진 사람의 이름목록을 보여줌

const btn = document.querySelector("#buttonSubmit")
const inputdata = document.querySelector("#inputNumber")
const li = document.querySelector("#userList")

btn.addEventListener("click",getAPI)

async function getAPI(e){
    e.preventDefault()
    const input = inputdata.value;
    let inner = ""
    // res, data 등 변수 이름은 자유롭게 정합니다.
const res = await fetch('https://randomuser.me/api/?results=100')
const data = await res.json()
const datas = data.results

for(let i=0;i<datas.length;i++){

    if(Number(datas[i].dob.age) >= input){
        inner += `<li>${datas[i].name.title},${datas[i].name.first},${datas[i].name.last}</li>`
    }

}

    li.innerHTML = inner
    
}```