HTTP 요청

1. 현대 인터넷의 공용어, HTTP

1.1 HTTP 트랜잭션

1.2 HTTP 메시지

1.2.1 HTTP 버전

• HTTP/1.1
요청과 응답이 순차적으로 이루어진다. 이에 따라 요청문서 내에 포함된 많은 양의 리소스를 처리하려면 요청할 리소스의 개수에 비례하여 대기시간이 길어질 수 있다. 예를 들어, 한 웹 페이지에 여러 아이콘 이미지가 있다면 그 개수만큼 파일 요청을 하게 된다.

• HTTP/2.0
2022년 5월 기준으로 모든 웹사이트의 46.4%가 HTTP/2.0 버전을 사용하고 있다. HTTP/2.0은 HTTP/1.1과 완전히 다른 HTTP가 아니라 속도 향상이라는 목적에 맞춰 개선된 버전이다. 응답은 요청 순서에 상관없이 이루어지고 HTTP 메시지를 압축하여 전송한다.

1.2.2 요청 메시지의 구조

• HTTP 요청 메서드
클라이언트가 서버에게 리소스에 대해 수행해주길 바라는 동작이다. 즉, 클라이언트가 웹 서버에 요청하는 목적과 그 종류를 알리는 수단이 HTTP 요청 메서드다. ‘GET’, ‘POST’와 같이 한 단어로 되어 있다.

메서드 종류	설명
GET	리소스 취득을 목적으로 클라이언트가 서버에게 URL에 해당하는 자료의 전송을 요청한다.
POST	서버에 데이터를 보내기 위해 사용한다. 주로 HTML 폼(Form)을 지원하기 위해 사용된다. 채워진 폼에 담긴 데이터는 서버로 전송되며, 서버는 이를 모아서 필요로 하는 곳에 보낸다.
PUT	GET 메서드가 서버로부터 문서를 읽어 들이는 데 반해 PUT 메서드는 서버에 문서를 생성 또는 교체한다. 서버는 요청 메시지의 본문을 가지고 요청 URL의 이름대로 새 문서를 만들거나, 이미 URL이 존재한다면 메시지의 본문으로 교체한다.
PATCH	리소스의 일부분을 수정할 때 사용된다. PUT 메서드는 문서 전체의 완전한 교체만을 허용하는 반면, PATCH 메서드는 수정하고 싶은 부분만 수정할 수 있다.
DELETE	클라이언트가 서버에게 URL로 지정한 리소스를 삭제해줄 것을 요청한다.

• 경로(Path)
요청 대상이 되는 리소스의 경로를 의미한다. 가져오려는 리소스의 경로는 프로토콜(http://), 도메인(developer.mozilla.org), 또는 TCP 포트(80)인 요소들을 제거한 리소스의 URL이다.

• HTTP 버전
이 메시지에서 사용 중인 HTTP의 버전을 나타낸다. 정확하게는 지원할 수 있는 가장 높은 HTTP 버전을 의미한다. 예를 들어, 응답 메시지의 HTTP 버전이 HTTP/1.1이라는 것은 응답 메시지를 보낸 애플리케이션이 HTTP/1.1까지 이해할 수 있다는 것을 의미한다.

• 헤더(Headers)
요청 메시지에 대한 추가적인 정보를 담는다. 기본적으로 이름-값 쌍의 목록이다. 헤더의 예시는 다음과 같다.

헤더의 예	설명
Host: developer.mozilla.org	요청하려는 서버 호스트 이름과 포트번호를 나타낸다.
Accept-Language: fr	클라이언트가 지원할 수 있는 언어를 나열한다.
Accept: image/gif, image/jpeg, text/html	클라이언트가 처리 가능한 MIME 타입* 종류를 나열한다.
Content-type: image/gif	메시지 본문 리소스의 media 타입*을 명시한다.
Content-length: 15040	메시지 본문의 바이트 단위 크기를 의미한다.

Accept 헤더에서 나타내는 MIME 타입은 무엇일까? 다목적 인터넷 메일 확장자(Multipurpose internet mail extensions)라는 뜻으로, 처음에는 메일의 첨부 파일에 사용되어서 붙여진 이름이다. 서버는 웹에서 전송되는 객체 각각에 MIME 타입이라는 데이터 포맷 라벨을 붙인다. 웹 브라우저는 그 라벨을 통해 다룰 수 있는 객체인지 확인한 후 실행 준비를 할 수 있다. MIME 타입은 월드와이드웹이 보편화되면서 ‘media type’이라는 이름으로 확장되었다.

• 본문(Body)
요청 메시지에서 본문은 선택적으로 사용된다. ‘POST’, ‘PUT’ 메서드 등은 본문을 가진다.

1.2.3 응답 메시지의 구조

• HTTP 버전
요청 메시지와 내용이 동일하다.

• 상태 코드(Status code)
메서드가 서버에게 무엇을 해야 하는지 말해주는 것처럼, 상태코드는 요청이 성공적으로 완료되었는지를 나타낸다. 상태코드는 크게 다섯 가지로 나뉜다. 100번대 상태코드는 정보 상태, 200번대는 성공 상태, 300번대는 리다이렉션 상태, 400번대는 클라이언트 에러, 500번대는 서버 에러를 의미한다. 가장 흔한 상태 코드 중 몇 가지를 나열하면 다음과 같다.

상태코드	설명
200	서버가 요청을 제대로 처리했음을 의미한다.
301	요청한 리소스가 주어진 URL로 완전히 옮겨졌다는 것을 의미한다.
302	클라이언트가 요청한 리소스가 주어진 URL에서 일시적으로 이동되었음을 의미한다.
401	인증이 필요한 요청임을 의미한다. 서버는 로그인이 필요한 페이지에 대해 이 요청을 전달할 수 있다.
403	요청이 서버에 의해 거부되었음을 의미한다. 일반적으로 서버가 거절의 이유를 숨기고 싶을 때 사용된다.
404	요청한 리소스를 서버에서 찾을 수 없음을 의미한다.
500	서버에 오류가 발생하여 요청을 수행할 수 없음을 의미한다.

• 사유 구절(Status message)
사람이 HTTP 메시지를 이해하는 데 도움이 되는 텍스트 설명이다. 상태 코드에 대해 간략한 정보를 제공하지만 그 내용을 완전히 신뢰할 수는 없다는 특징이 있다.

• 헤더(Headers)
헤더에는 일반 헤더, 요청 헤더, 응답 헤더, 엔터티 헤더 총 4가지 종류가 있다. 일반 헤더는 요청과 응답 모두에 사용할 수 있지만 최종적으로 전송되는 본문(Body) 데이터와는 무관하다. 요청 헤더는 요청하는 리소스나 클라이언트에 대한 자세한 정보를 포함하며, 응답헤더는 서버에 대한 정보와 같이 응답에 대한 부가적인 정보를 갖는다. 엔터티 헤더는 콘텐츠 길이나 MIME 타입과 같이 엔터티 본문(Body)에 대한 자세한 정보를 포함한다.

• 본문(Body)
가져온 리소스를 담고 있다.

2. JSON

<book>
		<title>나라사랑 비동기사랑</title>
		<author>김사자</author>
		<publish_date>2022-10-10</publish_date>
		<category>IT</category>
</book>

2.1 JSON 표기법

{
	  "name": "Unicorn Startup",
		"location": "Seoul",
		"business": ["e-commerce", "fashion"]
		"established": 2020
}

2.2 JSON.stringify

const profile = {
    name: "Lee",
    age: 30,
	  language: ["JavaScript", "Python"]
}

const str = JSON.stringify(profile);
console.log(str);

2.3 JSON.parse

const obj = JSON.parse(str);
console.log(obj);

3. Ajax

3.1 Ajax의 등장

3.2 여러 비동기 기술의 비교

3.2.1 네트워크 탭으로 동작 확인하기

3.2.2 XMLHttpRequest와 jQuery 사용 비교

const xhr = new XMLHttpRequest(); // (1)
xhr.onreadystatechange = function() { // (2)
  if (xhr.readyState === xhr.DONE) { // (3)
    if (xhr.status === 200 || xhr.status === 201) { // (4)
      console.log(xhr.responseText);
    } else {
      console.error(xhr.responseText);
    }
  }
};
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users'); 
xhr.send(); 

(3) readyState 는 XMLHttpRequest 객체의 현재 상태를 나타내며, 다음과 같은 주기로 변화한다.

1. UNSENT (숫자 0) : XMLHttpRequest 객체가 생성됨.

2. OPENED (숫자 1) : open() 메서드가 성공적으로 실행됨.

3. HEADERS_RECEIVED (숫자 2) : 모든 요청에 대한 응답이 도착함.

4. LOADING (숫자 3) : 요청한 데이터를 처리 중임.

5. DONE (숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.

const url = "https://jsonplaceholder.typicode.com/users";

$.ajax({
  url: url,
  type: "GET",
  success: function onData(data) {
    console.log(data);
  },
  error: function onError(error) {
    console.error(error);
  },
});

3.2.3 XHR과 fetch의 차이

3.2.4 fetch와 axios의 차이

4. REST API

4.1 REST architecture란?

4.2 REST API의 구성

• 리소스(Resource) 리소스를 의미하며 URI(엔드포인트)로 표현한다.

• 행위(Verb) 리소스에 대한 행위를 의미하며 HTTP 요청 메서드로 표현한다.

• 표현(Representations) 리소스에 대한 행위의 구체적인 내용을 의미하며 전송되는 데이터로 표현한다.

4.3 REST API 설계원칙

• 클라이언트 / 서버 구조(Client-Server)

• 무상태 (Stateless)

• 캐시 처리 가능 (Cacheable)

• 유니폼 인터페이스 (Uniform Interface)

• 계층화 (Layered System)

• 바로 실행할 수 있는 코드 (Code on Demand)

4.4 식별할 수 있는 리소스 (identification of resources)

// 아래 URI는 설명을 위해 추가했을 뿐 작동하지 않습니다.
const url = "https://jsonplaceholder.typicode.com/get/users"

fetch(url)
  .then(response => response.json())
  .then(json => console.log("users: ", json)

const url = "https://jsonplaceholder.typicode.com/users"

fetch(url)
  .then(response => response.json())
  .then(json => console.log("users: ", json))

const url = "https://jsonplaceholder.typicode.com/users/1/posts"

fetch(url)
  .then(response => response.json())
  .then(json => console.log("users: ", json))

4.5 REST API 실습

4.5.1 GET 요청

// fetch는 기본 메서드가 GET이다.
const url = "https://jsonplaceholder.typicode.com/users"

fetch(url)
  .then(response => response.json())
  .then(json => console.log("users: ", json))

// expected output
users: [
	{
		"id": 1,
		"name": "Leanne Graham",
		"username": "Bret",
		"email": "Sincere@april.biz",
		"address": {
		"street": "Kulas Light",
		"suite": "Apt. 556",
		"city": "Gwenborough",
		"zipcode": "92998-3874",
		"geo": {
			"lat": "-37.3159",
			"lng": "81.1496"
		}
	},
		"phone": "1-770-736-8031 x56442",
		"website": "hildegard.org",
		"company": {
		"name": "Romaguera-Crona",
		"catchPhrase": "Multi-layered client-server neural-net",
		"bs": "harness real-time e-markets"
		}
	},
	{"id": 2, "name": "....",},
	{"id": 3, "name": "....",},
	/* ... */
	{"id": 10, "name": "....",},
]

4.5.2 POST 요청

const url = "https://jsonplaceholder.typicode.com/posts"

fetch(url, {
  method: "POST",
  body: JSON.stringify({
    title: "test title",
    body: "test body",
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

// expected output
{
	"title": "test title",
	"body": "test body",
	"userId": 1,
	"id": 101
}

4.5.3 PUT 요청

const url = "https://jsonplaceholder.typicode.com/posts/1"


fetch(url, {
  method: 'PUT',
  body: JSON.stringify({
    id: 1,
    title: "updated title",
    body: "updated body",
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

// expected output 
{
	"id": 1,
	"title": "updated title",
  "body": "updated body",
  "userId": 1
}

4.5.4 PATCH 요청

const url = "https://jsonplaceholder.typicode.com/posts/1"

fetch(url, {
  method: "PATCH",
  body: JSON.stringify({
    title: "patch title",
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

// expected output
{
    "userId": 1,
    "id": 1,
    "title": "patch title",
    "body": "..."
}

4.5.5 DELETE 요청

const url = "https://jsonplaceholder.typicode.com/posts/1"

fetch(url, {
  method: "DELETE",
});