HTTP (Hypertext Transfer Protocol)

• Web에서 서버와 클라이언트 간의 통신 방법을 규정한 프로토콜
• 클라이언트 : 웹 브라우저 등 서버로 요청을 보내는 대상
• 서버는 클라이언트가 요청을 보내기 전까지 대응하지 않음

HTTP 개요

1. 요청과 응답

• 클라이언트와 서버들은 개별적인 메시지 교환에 의해 통신한다.
• 보통 브라우저인 클라이언트에 의해 전송되는 메시지를 요청(request), 그에 대해 서버에서 응답으로 전송되는 메시지를 응답(response)이라고 한다.

1. URL (Uniform Resource Locators)

HTTP message

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

HTTP header

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

HTTP status

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

상태	상태 코드
응답	100
성공적인 응답	200
리다이렉트	300
클라이언트 에러	400
서버 에러	500

HTTP Methods

• HTTP에서 클라이언트는 서버로 요청을 보내는데, 요청 시 이 요청 메서드로 특정 요청에 대한 동작을 정의한다.

Method	설명
GET	암호화되지 않은 형태의 데이터를 서버로 전송하는데 사용되는 가장 일반적인 방법
HEAD	GET과 유사한 방법으로 Response Body를 포함하지 않고 사용
POST	특정 양식의 데이터를 암호화하여 서버로 전송하는데 사용
PUT	특정 대상의 데이터를 갱신(Update)하는데 사용
DELETE	URL에 지정된 대상을 삭제(DELETE)하는 데 사용됩니다.

API

API는 Application Programming Interface의 줄임말로 다양한 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 말한다. 즉, 프로그램과 프로그램을 연결해 주는 다리 역할을 하는 것이 API이다.

REST API (Representational State Transfer API)

• API(Application Programming Interface)는 사용자가 특정 기능을 사용할 수 있도록 제공하는 함수를 의미한다.
• REST API는 HTTP의 요청 메서드에 응하는 서버 API와 클라이언트 간 통신의 구조가 지켜야 할 좋은 방법을 명시한 것이다.
• 구체적으로는 요청 메서드의 의미, URI 설계, 클라이언트의 상태에 대한 동작 등을 정의한다.

REST API 요청 메서드

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

Fetch API

let result = fetch("URL")

result
	.then(response => {
		if (response.ok) {
			// 요청 성공
		}
	})
	.catch(error => {
		// 요청 실
	})

• fetch API는 기존의 XMLHTTPRequest를 대체하는 HTTP 요청 API로, 이 두 가지 방법의 차이는 fetch API가 ES6부터 Promise를 리턴하도록 정의된 것이다.
• fetch 네트워크 요청 성공 시 promise는 response 객체를 resolve하고, 요청 실패 시 에러를 reject한다.

Response

• Response 객체는 결과에 대한 다양한 정보를 담는다.

fetch("URL")
	.then(response => {
		response.ok // HTTP Status Code가 200-299 사이면 true, 그 외 false이다. 
		response.status // HTTP Status Code를 담는다.
		response.statusText // OK 또는 NOT FOUND
		response.url // 요청한 URL 정보를 담는다. 
		response.bodyUsed
	})

Header

• response.headers로 Response객체의 헤더 정보를 얻을 수 있다.

fetch("URL")
	.then(response => {
		for(let[k, v] of response.headers) {
			console.log(k, v)
		}
	})

Body 메서드 .json()

• response.json()메서드는 얻어온 body정보를 json으로 만드는 Promise를 반환한다.
• Promise가 resolve 되면 얻어온 body정보를 읽는다.
• response.text(), response.blob(), response.formData() 등의 메서드로 다른 형태의 바디를 읽는다.

fetch("URL")
	.then(response => {
		return response.json()
	})
	.then(json => {
		console.log('body : ', json)
	})

POST 요청

• fetch(url, options)의 options자리에 메서드 옵션을 넣는다.
• method 필드로 여러 요청 메서드를 활용한다.

fetch('URL', {
	method: 'post',
	headers: {
		'Content-Type': 'application/json;',
		Authentication: 'mysecret'
	},
	body: JSON.stringify(formData)
})
	.then //...생략

---

*이미지 출처 : 엘리스 코딩