[ 엘리스 SW 엔지니어 트랙 ] 19일차

📍 19일 차 11.19. 금.(온라인 강의)

오늘은 async - await, error처리, HTTP, REST API에 대해서 배웠다.

---

❏ async / await 문법

1. Promise 를 활용한 비동기 코드를 간결하게 작성하는 문법
2. async / await 문법으로 비동기 코드를 동기 코드처럼 간결하게 작성할 수 있다.
3. async 함수와 await 키워드를 이용한다.
4. await 키워드는 반드시 async 함수 안에서만 사용해야 한다.
5. async 로 선언된 함수는 반드시 Promise 를 리턴한다.
6. async 함수는 function 키워드 앞에 async 를 붙여 만든다
7. async 함수 내부에서 await 키워드를 사용한다.
8. fetchData, fetchUser는 Promise 를 리턴하는 함수이다.
9. then method chain 시 then 을 2번 이상 사용하면 순차적으로 실행된다. 첫번째 then을 기다렸다가 완료되면 다음 then 으로 이어진다. async 도 마찬가지로 await가 여러개 있을 때 순차적으로 실행된다.
10. await 키워드는, then 메서드 체인을 연결한것처럼 순서대로 동작한다.
11. 비동기 코드에 쉽게 순서를 부여한다.

// async 함수
async function asyncFunc1(){
    let data = await fetchData()
    let user = await fetchUser(data)
    return user
}

// await 키워드 실행 순서
async function asyncFunc2(){
    let data1 = await fetchData1()
    let data2 = await fetchData2(data1)
    let data3 = await fetchData(data2)
    return data3;
}

function promiseFunc(){
    return fetchData1()
            .then(fetchData2)
            .then(fetchData3)
}

12. Promise 를 리턴하는 함수의 경우, 에러가 발생하면 catch 메서드를 이용하여 에러를 처리한다.
13. catch 메서드를 사용하지 않는다면 async 함수에서 try-catch 구문을 이용하여 에러를 처리한다.
14. try 구절안에 await 가 2개 이상 있을 때 catch 문에 해당 error 가 들어간다. error 처리를 세분화 하고 싶으면 한 try 구절에 await 를 1개씩만 담자.

// promise error handling
function fetchData1(){
    return request()
            .then(response => response.requestData)
            .catch(error => // error)
}

// async - await error handling
async function asyncFunc(){
    try{
        let data1 = await fetchData1()
        return fetchData2(data1)
    } catch (e){
        console.log("error: ", e)
    }
}

15. async 함수는 동기적으로 보이지만 비동기적으로 실행됩니다. 단, 내부에서 await 키워드가 쓰이지 않았을 경우엔 Promise.resolve() 로 처리됩니다.
16. await 키워드는 프로미스를 리턴하지 않는 함수라도 사용할 수 있습니다. 단 이 경우 리턴한 데이터는 Promise.resolve()로 감싸 집니다.

728x90

❏ HTTP(HyperText Transfer Protocol)

1. Web 에서 서버와 클라이언트 간의 통신하는 방법을 정한 것.
2. 클라이언트는 웹 브라우저 등 서버로 요청을 보내는 대상
3. 서버는 클라이언트가 요청을 보내기 전까지 대응하지 않음
4. 서버와 클라이언트 사이에는 무수히 많은 요소가 존재
5. HTTP 는 이런 존재들 사이의 통신 방법을 규정
6. 규약을 통해 통신하지 않으면 복잡해지고 혼란스럽게 된다.
7. HTTP Message: 서버 주소, 요청 메서드(POST), 상태 코드(200, 404), target path, 헤더 정보, 바디 정보 등이 포함된다. 요청 메시지와 응답 메시지의 모양이 다르다. HTTP/1.1 메시지는 사람이 읽을 수 있다.
8. HTTP header: 콘텐츠 관련 정보(content-type: json...), 인증 관련 정보(Authorization), 쿠키 정보(헤더에 들어간다. 가벼운 정보 등), 캐시(페이지 조회정보를 클라이언트에 내릴 때 일정 시간 내에는 동일한 페이지를 그대로 사용하는 방법 등...) 관련 정보 등 서버와 클라이언트 통신 시 필요한 정보를 담는다. 클라이언트 요청 시, 서버 응답 시 모두 헤더에 정보를 담을 수 있다.
9. HTTP status : HTTP요청 시, 클라이언트는 요청의 결과에 대한 상태 정보를 얻는다. 200, 400, 500 등 숫자 코드와, OK NOT FOUND 등의 텍스트로 이루어진다. 코드를 이용해 각 결과에 해당하는 행위를 할 수 있다.
10. 요청 메서드: 클라이언트에서 서버로 요청에 의미를 부여할 때 사용하는 명령어(GET, POST, PUT, PATCH, DELETE)

❏ REST API(Representational State Transfer API)

1. HTTP를 이용하여 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐고 REST API 는 REST 를 기반으로 서비스 API 를 규정한 것
2. API는 사용자가 특정 기능을 사용할 수 있도록 제공하는 함수
3. REST API 의 요청 메소드에 응하는 서버API와 클라이언트 간 통신의 구조가 지켜야 할 좋은 방법을 명시한 것이다.
4. 요청 메서드의 의미, URI설계, 클라이언트의 상태에 대한 동작 등을 정의한다.
5. REST API 요청 메서드: GET - 리소스 정보를 얻음, POST - 리소스를 생성, PUT - 리소르르 생성하거나 업데이트 DELETE - 리소스를 제거

❏ Fetch API

1. HTTP 를 활용할 수있는 API
2. 기존 XMLHTTPRequest 를 대체하는 HTTP 요청 API (두 함수의 큰 차이점은 Promise 리턴 여부)
3. ES6 에 추가된 Promise 를 리턴하도록 정의 됨
4. 네트워크 요청 성공 시, Promise 는 resolve
5. 네트워크 요청 실패 시, Promise 는 reject
6. response. 객체는 결과에 대한 다양한 정보를 담는다.
7. response.ok : 200 <= HTTP status code <= 299 : true, 그 외 false
8. response.status: HTTP status code 를 담는다.
9. response.url : 요청한 URL 정보를 담는다
10. response.json(): body 정보를 json 으로 만드는 Promise 를 반환한다.
11. body 값은 json() 값을 resolve 해서 나온 값을 then 처리를 해줘야 사용가능하다. json() 을 한번만 사용하면 promise 를 사용하는 꼴이된다.
12. POST: fetch(url, options) 로 fetch 메서드 옵션을 넣는다. method 필드로 여러 요청 메서드를 활용한다. headers, body 필드를 활용해 서버에 추가 정보를 보낸다.

// response 객체 살펴보기
.fetch(URL)
    .then(response => {
        response.ok
        response.status
        response.statusText
        response.url
        response.bodyUsed
    })

// response header
.fetch("https://randomuser.me/api/").then(response => {
    for(let [k,v] of response.header){
        console.log(k,v)
    }}
);

// response body
.fetch(URL)
    .then(response => response.json()
    .then(console.log)

// POST 요청
fetch(serverURL, {
    method: "post",  // method 넣기
    headers: {
            'Content-Type': 'application/json; charset=utf-8',
    Authentication: 'mysecret'
    },
    body: JSON.stringify(formData)
})
    .then(res => res.json())
    .then(console.log)