<aside> 📌 요약: 비동기 처리에 순서를 부여하는데 있어서 Callback → Promise → async / await 순으로 발전해 왔다. async로 선언된 함수는 반드시 Promise를 반환한다.
비동기 처리를 순서대로 하는데 한 함수 내에서 데이터를 조작하고 싶으면 콜백지옥이 발생한다. 이를 해결하기 위해서 Promise가 등장했고, then chaing을 통해서 쉽게 데이터와 연속 비동기 처리가 가능해졌다. 이 프로미스를 더 간단하게 사용하기 위해서 async await 문법으로 비동기처리에 순서를 쉽게 부여가 가능해졌다.
Promise와 async / await는 효과적으로 사용될 수 있는 상황이 다르다. 개인 함수를 호출하여 값을 받아오는 경우에는 async / await이 효과적이고, 메소드 체이닝이 많이 사용되는 코드에서는 Promise가 코드에 일관성을 지켜서 더 깔끔하게 보일 수 있다.
HTTP는 Web에서 서버와 클라이언트 간의 통신 프로토콜이다. OSI 7계층에서 애플리케이션단이며, request, response 메시지가 따로 존재하고, 이 메시지에는 서버 주소(Host), 요청 메서드(POST, GET, …), 상태 코드(status ex 404…), target path, 헤더 정보, 바디 정보 등이 포함되어 있다. HTTP/1.1 메시지는 사람이 읽을 수 있지만 HTTP/2 메시지는 사람이 읽을 수 없다.
HTTP 메시지의 헤더에는 콘텐츠 관련 정보(Content-type), 인증 관련 정보, 쿠키 정보, 캐시 정보 등 서버와 클라이언트 간 통신 시 필요한 정보를 담는다.
HTTP Status는 HTTP 요청 시, 클라이언트는 요청의 결과에 대한 상태 정보를 얻는다. 200, 400, 500 등 숫자 코드와 OK, NOT FOUND 등의 텍스트로 이루어져 있다. 코드를 이용해서 각 결과에 해당하는 행위를 할 수 있다.
HTTP 클라이언트에서 서버로 요청을 보내고 특정 요청에 대한 동작을 정의하는데 요청 메서드는 GET, POST, PUT, PATCH, DELETE 와 OPTIONS, CONNECT, TRACE가 있다. 전자는 개발자가 활용이 가능하고, 후자는 브라우저가 자동으로 하는것.
API(Application Programming Interface)는 사용자가 특정 기능을 사용할 수 있도록 제공하는 함수를 의미하며, REST API(Representational State Tranfer API)는 HTTP의 요청 메서드에 응하는 서버 API와 클라이언트 간 통신의 구조가 지켜야 할 좋은 방법을 명시한 것이다. REST API 요청 메서드: GET - 리소스 정보를 얻음, POST - 리소스를 생성, PUT - 리소스를 생성하거나 업데이트, DELETE - 리소스를 제거
Fetch API는 기존 XMLHTTPRequest를 대체하는 HTTP 요청 API다. Promise를 리턴하며, 네트워크 요청 성공 시, Response 객체를 resolve 한다. 요청 실패 시에는 에러를 reject 한다. Response 객체에는 결과에 대한 다양한 정보가 담기는데, response.ok는 Status가 200-299 사이면 true, 그 외면 false다. response.status는 status code를 담는다. response.url은 요청한 URL정보를 담는다.
response.headers로 Response 객체의 헤더 정보를 얻을 수 있다. response.json() 메서드는 얻어온 body 정보를 json으로 만드는 Promise를 반환한다. 그래서 바로 사용하지 말고 then 체인을 통해서 사용해야 한다. response.text(), response.blob(), response.formData() 등의 메서드로 다른 형태의 바디를 읽는다.
fetch(url, options)로, fetch 메서드 옵션을 넣어 POST 요청과 같은 여러 요청 메서드 활용이 가능하다. 이때 headers, body 필드를 활용해 서버에 추가 정보를 보낸다.
Array.prototype.flatMap() 은 [ [c], [c], [c] ] 와 같은 배열을 [c, c, c]와 같이 풀어줄 수 있다.
</aside>