[4주차] HTTP와 API

2월 11일 자 학습 내용 정리입니다.

 

 

✅ HTTP

HTTP(Hypertext Transfer Protocol)는 Web에서 서버와 클라이언트 간의 통신 방법을 정한 것이다.

클라이언트는 웹 브라우저 등 서버로 요청을 보내는 대상이며 서버는 클라이언트가 요청을 보내기 전까지는 대응하지 않다가 요청이 들어오면 요청을 처리한다.

서버와 클라이언트 사이에는 DNS, Proxy, Tunnel 등 무수히 많은 요소가 존재하고 HTTP는 이런 존재들 사이의 통신 방법을 규정한 것이다.

 

✔️ HTTP Message

HTTP 메세지에는 서버 주소, 요청 메서드, 상태 코드, target path, 헤더 정보, 바디 정보 등이 포함되어 있다.

요청 메세지와 응답 메세지로 구분되며 이 둘의 모양은 다르다.

 

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

 

HTTP 메세지의 헤더에는 콘텐츠, 인증, 쿠키, 캐시 관련 정보 등 서버와 클라이언트 간 통신시 필요한 정보가 담겨있다.

요청 메세지와 응답 메세지 모두 헤더에 정보를 담을 수 있다.

 

HTTP/1.1 메세지는 사람이 읽을 수 있는 형태인데 그 예를 살펴보면 다음과 같다.

 

 

예를 들어 해당 요청 메세지에서 요청하는 주체는 Host의 주소이고 이 Host가 어떤 환경을 사용했는지 User-Agent를 통해 알 수 있다. 

 

✔️ HTTP Status

HTTP 요청 시 클라이언트는 요청의 결과에 대한 상태 정보를 얻는다.

이는 200, 403, 404, 500 등의 숫자 코드와 OK, NOT FOUND 등의 텍스트로 이루어진다.

상태 코드를 통해 요청의 결과가 정상적으로 이루어 졌는지, 만약 정상적으로 이루어지지 않았다면 어느 부분이 문제였는지 파악할 수 있다.

 

✔️ HTTP 요청 메서드

HTTP에서 클라이언트가 서버로 요청을 보낼 때 특정 요청에 대한 동작을 정의한다.
GET, POST, PUT, PATCH, DELETE 등이 있다.

 

 

✅ REST API

API(Application Programming Interface)는 다양한 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스로 사용자가 특정 기능을 사용할 수 있도록 제공하는 함수를 의미한다.

REST API(Representational State Transfer API)는 REST 아키텍쳐를 준수하는 웹 API로 RESTful API라고 하기도 한다.

HTTP의 요청 메서드에 응하는 서버 API와 클라이언트 간 통신 구조가 지켜야할 것을 명시한 것이다.
요청 메서드의 의미, URI 설계, 클라이언트의 상태에 대한 동작 등을 정의한다.

 

REST API가 정의하는 요청 메서드의 의미는 다음과 같다.

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

 

REST API는 API의 동작을 HTTP method + 명사형 URL로 표현한다.
REST API URL의 자원은 복수형으로 표현되며 하나의 자원에 대한 접근은 복수형 + 아이디이다.
게시글 전체를 뜻하는 URL을 '/posts'라고 할 때 1번 게시글은 '/posts/1'로 작성해야 한다.

또한 REST API는 URL을 통해 자원을 계층적으로 표현해야 한다.
예를 들어 'users/1/posts'라는 url은 1번 유저의 게시글 전체라는 자원을 나타낸다.

 

REST의 장점은 개방형 표준을 사용하므로 API 또는 클라이언트 애플리케이션의 구현이 특정 구현에 바인딩되지 않는다는 것이다.

예를 들어 REST 웹 서비스는 ASP.NET으로 작성할 수 있으며, 클라이언트 애플리케이션은 HTTP 요청을 생성하고 HTTP 응답을 구문 분석할 수 있는 모든 언어 또는 도구 집합을 사용할 수 있다.

 

 

✅ Fetch API

Fetch API는 기존 XMLHttpRequest를 대체하는 HTTP 요청 API이다.

Promise를 리턴하도록 정의되었으며 기본 동작은 GET 요청 메서드를 사용한 형태이다.
네트워크 요청 성공 시 Promise는 response 객체를 resolve 하며 실패시 에러를 reject 한다.

 

fetch(url)
  .then(res => {
      console.log(res.ok)
      console.log(res.status)
      console.log(res.statusText)
      console.log(res.url)
      console.log(res.bodyUsed)
      ...
  })

 

response 객체는 결과에 대한 다양한 정보를 가지고 있다. (위 코드에서 res가 response 객체이다.)

• ok : HTTP status code가 200-299 사이이면 true, 아니면 false 반환
• status : HTTP status code
• url : 요청한 URL 정보
• headers : 헤더 정보

 

fetch(url)
  .then(res => res.json())
  .then(data => console.log(data))

 

response 객체는 response.json()으로 요청의 결과인 body 정보를 json 형태로 만드는 promise를 얻을 수 있다.
Promise로 반환되었기 때문에 실제 data를 읽기 위해서는 .then 메서드가 한 번 더 필요하다.
이는 response.text(), response.blob(), response.formData() 등의 메서드로 다른 형태의 바디(이미지, 파일 등)를 읽을 수 있다.

 

fetch(url, {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json'
  },
  body: JSON.stringify({ title: '...', context: '~~~' })
})
  .then(res => res.json())
  .then(data => console.log(data))

 

fetch로 GET 이외의 요청을 보내기 위해서는 fetch(url, option)으로 option을 넣는다.
method 필드에 해당하는 요청 메서드를 넣고 headers, body 필드에 알맞은 추가 정보를 기입한다.

 

 

🔍 참조

REST API https://docs.microsoft.com/ko-kr/azure/architecture/best-practices/api-design