[week_05] async/await과 API

1. async/await

• Promise를 활용한 비동기 코드를 간결하게 작성하는 문법
• async/await 문법으로 비동기 코드를 동기 코드처럼 간결하게 작성 가능
• await 키워드는 반드시 async 함수 안에서만 사용해야 함
• async로 선언된 함수는 반드시 Promise를 리턴

• async function asyncFunc() {
  	let data = await fetchData();
      let user = await;
      fetchUser(data);
      return user;
  }

• async 함수는 function 키워드 앞에 async를 붙여 만든다.
• fetchData, fetchUser는 Promise를 리턴!
• await 키워드는 then 메서드 체인을 연결한 것처럼 순서대로 동작

• async function asyncFunc() {
  	let data1 = await fetchData1();
      let data2 = await fetchData2(data1);
      let data3 = await fetchData3(data2);
      return data3;
  }
  
  function promiseFunc() {
  	return fetchData1()
      	.then(fetchData2)
          .then(fetchData3);
  }

• try-catch 구문으로 에러 처리

• async function asyncFunc() {
  	try {
      	let data1 = await fetchData1();
          return fetchData2(data1);
      } catch (e) {
      	console.log("실패: ", e);
          // e = Promise의 catch 메서드가 받는 반환 값과 동일
      }
  }

 

2. HTTP (Hypertext Transfer Protocol)

• Web에서 서버와 클라이언트 간의 통신하는 방법을 정한 것
  • 클라이언트: 웹 브라우저 등 서버로 요청을 보내는 대상
  • 서버: 클라이언트가 요청을 보내기 전까지 대응 X
• 서버와 클라이언트 사이에는 무수히 많은 요소가 존재하며, HTTP는 이런 존재들 사이의 통신 방법을 규정

2-1. HTTP Message

• 서버 주소, 요청 메서드, 상태 코드, target path, 헤더 정보, 바디 정보 등이 포함
• 요청 메시지, 응답 메시지의 모양이 다름
• HTTP/1.1 메시지는 사람이 읽을 수 있음

출처: https://developer.mozilla.org/ko/docs/Web/HTTP/Messages

2-2. HTTP Header

• 콘텐츠 관련 정보, 인증 관련 정보, 쿠키 정보, 캐시 관련 정보 등
• 서버와 클라이언트 간 통신 시 필요한 정보를 담는다.
• 클라이언트 요청 시, 서버 응답 시 모두 헤더에 정보를 담을 수 있다.

2-3. HTTP Status

• HTTP 요청 시, 클라이언트는 요청의 결과에 대한 상태 정보를 얻는다.
• 200, 400, 500 등 숫자 코드와, OK, NOT FOUND 등의 텍스트로 이루어진다.
• 코드를 이용해 각 결과에 해당하는 행위를 할 수 있다.

2-4. 요청 메서드

• HTTP에서, 클라이언트는 서버로 요청을 보낸다.
• 요청 시 요청 메서드로 특정 요청에 대한 동작을 정의한다.
• GET, POST, PUT, PATCH, DELETE, OPTIONS, CONNECT, TRACE 등이 규정된다.

 

3. REST API(Representational State Transfer API)

• REST를 기반으로 만들어진 API
• REST API는 HTTP의 요청 메서드에 응하는 서버 API와 클라이언트 간 통신의 구조가 지켜야 할 좋은 방법을 명시한 것이다.
• 구체적인 내용으로는 요청 메서드의 의미, URI 설계, 클라이언트의 상태에 대한 동작 등을 정의한다.

3-1. REST(Represetational State Transfer)

• 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것
• HTTP URI(Uniform Resource Identifier)를 통해 자원을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것
• REST의 구성 요소
  • 1. 자원(Resource): HTTP URI
  • 2. 자원에 대한 행위(Verb): HTTP Method
  • 3. 자원에 대한 행위의 내용(Representations): HTTP Message Pay Load

3-2. API(Application Programming Interface)

• 사용자가 특정 기능을 사용할 수 있도록 제공하는 함수
• 애플리케이션과 운영체제, 그리고 애플리케이션과 프로그래밍 언어가 제공하는 기능 사이의 상호 작용을 도와준다.
• 예를 들어, 레스토랑을 간다고 가정하자. 점원이 가져다준 메뉴판을 보면서 스테이크를 고르면, 점원이 주문을 받아 요리사에게 요청한다. 그러면 요리사는 스테이크를 만들어 점원에게 주고, 우리는 점원이 가져다준 맛있는 스테이크를 먹을 수 있게 된다.
  • 여기서 점원의 역할은? 손님에게 메뉴를 알려주고, 주방에 주문받은 요리를 요청한다. 그 다음, 주방에서 완성된 요리를 손님께 다시 전달한다.
  • API는 여기서의 점원과 같은 역할을 한다.
  • API는 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면 요리사(응용 프로그램)와 상호작용하여 요청된 메뉴(명령에 대한 값)를 전달한다.
  • 즉, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체이다.

출처: https://blog.wishket.com/api%EB%9E%80-%EC%89%BD%EA%B2%8C-%EC%84%A4%EB%AA%85-%EA%B7%B8%EB%A6%B0%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8/

3-3. REST API 요청 메서드의 의미

• GET: 리소스 정보를 얻음
• POST: 리소스를 생성
• PUT: 리소스를 생성하거나 업데이트
• DELETE: 리소스를 제거

3-4. REST API의 설계 가이드

1. URI는 동사보다는 명사를, 대문자보다는 소문자를 사용해야 한다.

👎 Bad http://www.example.com/Running/
👍 Good http://www.example.com/run/

2. 마지막에 슬래시(/)를 포함하지 않는다.

👎 Bad http://www.example.com/test/
👍 Good http://www.example.com/test

3. 언더바 대신 하이픈(-)을 이용한다.

👎 Bad http://www.example.com/test_value
👍 Good http://www.example.com/test-value

4. 파일확장자는 URI에 포함하지 않는다.

👎 Bad http://www.example.com/test.jpg
👍 Good http://www.example.com/test

5. 행위를 포함하지 않는다.

👎 Bad http://www.example.com/delete-something/1
👍 Good http://www.example.com/something/1

 

4. Fetch API

• 기존의 XMLHTTPRequest를 대체하는 HTTP 요청 API
• ES6에 추가된 Promise를 리턴
• 네트워크 요청 성공시, Promise는 Response 객체를 resolve
• 네트워크 요청 실패시, Promise는 에러를 reject

4-1. Response 객체

• 결과에 대한 다양한 정보를 담는다.
• response.ok: HTTP Status code가 200-299 사이면 true, 그 외 false
• response.status: HTTP status code
• response.url: 요청한 URL 정보
• response.headers: Response 객체의 헤더 정보
• response.json(): 얻어온 body 정보를 json으로 만드는 Promise를 반환
• Promise가 resolve 되면 얻어온 body 정보를 읽음
• .text(), .blob(), .formData() 등의 메서드로 다른 형태의 바디 읽음
• fetch(url, options)로 fetch 메서드 옵션을 넣는다.
• method 필드로 여러 요청 메서드 활용
• headers, body 필드를 활용 ➡ 서버에 추가 정보 전송

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

 

 

 

참고

https://khj93.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-REST-API%EB%9E%80-REST-RESTful%EC%9D%B4%EB%9E%80