Dev-Tino 8주차(2):: HTTP란?

HTTP 메소드 5가지 차이점과 특징, JS에서 API 호출하는 법

2024.08.15

HTTP:: (HyperText Transfer Protocol)

클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜.
사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 HTTP 요청을 전송하고, 웹 서버는 HTTP 응답으로 응답한다. 웹 서버와 사용자 브라우저는 데이터를 일반 텍스트로 교환한다.

간단히 말해, HTTP 프로토콜은 네트워크 통신을 작동하게 하는 기본 기술이다.

OSI(Open Systems Interconnection) 네트워크 통신 모델의 애플리케이션 계층 프로토콜인 HTTP는 여러 유형의 요청과 응답을 정의한다. (예를 들어, 웹 사이트의 일부 데이터를 보기만 하는 경우에는 HTTP GET 요청을 전송한다. 일부 정보를 보기만 하는 경우에는 HTTP PUT 요청을 전송한다.)
이와 같이, 서버는 숫자 코드 및 데이터 양식으로 다양한 유형의 HTTP 응답을 전송한다. 200(*정상), 400(*Bad Request), 404(*리소스를 찾을 수 없음) 등이 있다. 이는 일반적으로 사용자에게 보이지 않는다.

HTTP 요청과 응답

HTTP, 웹 브라우저가 서버와 통신하기 위한 규칙. 리소스를 요청하고 받는 등, TCP(*Transmission Control Protocol) 연결을 사용하여 사용자는 서버와 데이터를 주고받을 수 있다. 그 방법은 다음과 같다::

1. 요청을 보낸다

브라우저가 아래와 같은 HTTP 요청을 서버에 보낸다. 첫 줄에는 HTTP 요청 메소드와 URL 경로,, HTTP 프로토콜 버전 정보가 있다.

두 번째 줄부터는 모두 HTTP 요청의 헤더이다. key와 value의 쌍으로 이루어져 있으며 헤더는 웹사이트 도메인의 호스트, 언어, 사용자 브라우저 등 서버가 필요한 정보를 전달한다.

GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept-Language: ko-KR

2. 요청에 답한다

요청에 문제가 없다면 서버는 아래와 같은 응답을 돌려준다. 첫 줄에는 HTTP 프로토콜 버전 정보와 HTTP 상태 코드(*HTTP 요청이 성공적으로 완료되었는지 알려주는 코드. 5개의 그룹으로 나눠진다. 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 서버 에러이며, 이는 section 10 of RFC 2616에 정의되어 있다.)가 있다.
두 번째 줄부터 보이는 key:value의 쌍은 모두 헤더이다. 응답의 헤더는 브라우저가 필요한 정보를 전달해준다. 마지막으로 응답의 body는 브라우저가 요청한 데이터이다. 아래 예시에서는 HTML 데이터를 돌려주고 있다.

HTTP/1.1 200 OK
Date: Sat, 09 Oct 2023 14:28:02 GMT
Server: Apache
Content-Type: text/html

<html>
…
</html>

HTTP 요청과 응답

HTTP 요청에는 웹 브라우저와 같은 인터넷 통신 플랫폼에서 웹 사이트를 로드하는 데 필요한 정보를 요청하는 방법이다. 인터넷을 통해 이루어진 각 HTTP 요청은 서로 다른 유형의 정보를 전달하는 일련의 인코딩된 데이터를 전달한다. 일반적인 HTTP 요청에는 다음이 포함된다::

1. HTTP 버전 유형

2. URL

3. HTTP 메소드

4. HTTP 요청 헤더

5. 선택 사항인 HTTP 본문

이러한 요청을 보내면, 요청 내용을 사용하여 정보를 공유하거나 공유받을 수 있게 된다.

HTTP 메소드란?

개중에 중요한 것으로 HTTP 메소드를 뽑을 수 있다. HTTP 동사라고도 불리는 HTTP 메소드는 ‘클라이언트 - 서버 구조에서 요청(request)와 응답(response)가 이루어지는 방식’을 의미한다. 서버가 수행해야 할 동작을 지정하여 요청(request)을 보내는 방법이라고 정리할 수 있다. 이는 리소스와 동작을 분리하기 위해 사용되는데, HTTP 메소드를 통해 서버가 수행해야 할 동작을 지정하면 URL은 리소스만 식별하면 되기 때문이다.
가장 일반적인 두 가지 HTTP 메소드 ‘GET’과 ‘POST’가 있다. ‘GET’ 요청은 응답으로 정보를 기대하는 반면(일반적으로 웹사이트 형식이다. 정보를 서버에서 받아오기만 한다.) ‘POST’ 요청은 일반적으로 클라이언트가 웹 서버에 정보를 제출하고 있음을 나타낸다.(정보를 받고, 제출한다. 수정하기도 한다..)
아래로는, HTTP 메소드의 8가지를 서술한다.::

-GET: 리소스를 조회

-POST: 데이터 추가, 등록

-PUT: 리소스 대체, 수정/ 해당 리소스가 없으면 새롭게 생성

-DELETE: 리소스 삭제

-PATCH: 리소스 부분 변경(수정)

-HEAD: GET과 동일하나, HTTP 메세지의 body 부분을 제외하고 조회

-OPTIONS: 서버와 브라우저가 통신하기 위한 통신 옵션을 확인하기 위해 사용. 서버가 어떤 메소드, 헤더, 컨텐츠 타입을 제공하는지 알 수 있음

-CONNECT: 대상 자원으로 식별되는 서버에 대한 연결 요청

이 중 주로 사용하는 메소드는 GET, POST, PUT, DELETE, PATCH 다섯 가지이다.

GET 메소드

리소드를 조회하는 메소드.

서버에게 클라이언트가 페이지를 보여달라 요청하는 경우, URL 입력, 링크를 클릭하는 경우 등이 모두 GET 요청이다. 멱등성(*동일한 연산을 여러 번 수행해도 결과가 달라지지 않는 성질)때문에 여러번 조회 요청을 하더라도 리소스는 변하지 않는다.
GET 요청으로 서버에 데이터를 전달하는 경우 쿼리스트링(*URL의 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법, 웹 개발에서 데이터를 요청하는 방식 중 주로 GET 방식으로 데이터를 요청할 때 쓰이는 방법.)을 통해 전달한다. (이 때, 해당 쿼리 스트링은 클라이언트에게 전달하는 데이터 정보가 무방비 상태로 노출되므로 이를 유의하여야 한다.)

POST 메소드

POST /user
body : {date : "example"}
Content-Type : "application/json"

새로운 리소스를 생성(Create)하는 데에 사용하는 메소드.

성공적으로 creation을 완료하면 201 (Created) HTTP 응답을 반환한다. 데이터를 메세지 바디에 쿼리 파라미터(*URL 뒤에 물음표와 함께 붙는 키-값의 쌍. 여러 개의 쿼리 파라미터를 전달하려면 파라미터 사이에 앰퍼샌드-&-를 추가하여 하나의 문자열로 전달해야 한다. 쿼리 파라미터로는 문자열뿐만 아니라 숫자, 리스트 등 다양한 형태의 데이터를 넣을 수 있다.) 형식으로 전달한다. 이는 GET 방식과 비교할 때 데이터가 외부로 노출되지 않는다는 보안상의 이점이 존재한다.
POST로 조회가 가능하긴 하나, 해당 메소드는 멱등성을 지니지 않으므로, POST 메소드를 여러 번 수행할 경우 같은 결과값이 나올 것이라 보장할 수 없다. GET 메소드는 캐싱을 이용하기에 조회 속도 면에서는 POST 메소드보다 우수하고 말이다. 그러나 이는 데이터를 전송할 때 Body에 담아 전송하기에 메세지 길이의 제한이 없으며, 문자열 데이터뿐만 아니라 라디오 버튼과 같은 객체들의 값도 전송할 수 있다는 장점이 있다.

PUT 메소드

PUT /user/1
body : {date : "update example"}
Content-Type : "application/json"

리소스를 생성/업데이트하기 위해 서버로 데이터를 보내는 데에 사용된다.

요청 페이로드(*HTTP 요청을 보낼 때 전달되는 데이터.)를 이용해 새로운 리소스를 생성하거나 대상 리소스를 나타내는 데이터를 대체한다. PUT과 POST의 차이는 멱등성이다. PUT은 멱등성을 가지나(한 번을 보내도 여러번을 연속으로 보내도 같은 효과를 보인다. 부수 효과가 없다.) POST는 멱등성이 없다.
데이터를 수정하는 것이기에 요청 시에 Body 값과 Content-Type 값을 작성해야 하며, URL을 통해 어떤 데이터를 수정할지 파라미터를 받는다. 수정할 데이터 값을 Body 값을 통해 받는다. 데이터 조회에 성공한다면 Body 값에 저장한 데이터 값을 저장하여 성공 응답을 보낸다.

DELETE 메소드

DELETE /user/1

지정된 리소스를 삭제한다.

데이터를 삭제하는 메소드이기에 요청 시에 Body 값과 Content-Type 값이 비워져있다. URL을 통해서 어떤 데이터를 삭제할지 파라미터를 받는다. 데이터 삭제에 성공한다면 Body 값 없이 성공 응답만 보내게 된다.

PATCH 메소드

리소스의 부분적인 수정을 할 때에 사용하는 메소드

PUT 메소드는 문서 전체의 완전한 교체만을 허용한다. 반면 PATCH 메소드는 PUT 메소드와 달리 멱등성을 가지지 않는다. 이는 동일한 Patch 요청이 다른 결과를 야기할 수도 있음을 뜻한다. 하지만 PATCH를 PUT과 같은 방식으로 사용함으로써 멱등성이 있도록 설계할 수도 있다.

자바스크립트에서 API를 호출하는 방법

1. XML HTTP Request를 이용한 방법

-모든 최신 브라우저는 서버에 데이터를 요청하기 위해 XMLHttpRequest 객체를 지원한다.

-최신 브라우저뿐만 아니라 가장 오래된 브라우저에서도 작동한다.

-ES6에서는 더 이상 사용되지 않지만 여전히 널리 사용된다.

이는 객체와 서버가 상호작용할 때 쓰인다. XHR이라고도 줄이는 이것을 이용하면 페이지의 새로고침 없이도 UPL에서 데이터를 가져올 수 있다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있다.
AJAX(https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data 참고) 프로그래밍에 많이 사용된다. 이름에 XML이 들어가긴 하지만, XMLHttpRequest는 XML뿐만 아니라 모든 종류의 데이터를 가져올 수 있다.

복사됨

2. Fetch API를 이용한 방법

-Fetch API는 비동기 방식으로 리소스(네트워크 포함)를 가져오기 위한 인터페이스를 제공한다.

-Fetch API는 Promise를 반환한다.

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공한다. XMLHttpRequest보다 강력하고 유연한 대체제이다. FetchAPI는 Request와 Response 객체, 그리고 기타 네트워크 요청에 관련된 것들을 사용하고, CORS와 HTTP Origin 헤더 행동 등 관련한 개념을 포함한다. 요청을 생성하고 리소스를 취득하려면 fetch 메소드를 사용한다. fetch()는 컨텍스트 양쪽에서 사용할 수 있는 전역 메소드이다.
fetch()는 리소스를 위한 fetch() 메소드이다. Headers 는 요청/응답 헤더를 나타내며, 헤더를 질의하고 그 결과에 따라 다양한 동작을 취하기 위해 사용할 수 있다. Request는 리소스 요청을 나타내며, Response는 요청에 대한 응답을 나타낸다.

복사됨

3. Axios를 이용한 방법

-HTTP 요청을 만들기 위한 오픈 소스 라이브러리

-브라우저와 Node.JS 모두에서 작동한다.

-외부 CDN을 사용하여 HTML에 포함시킬 수 있다.

-Fetch API와 동일하게 PROMISE를 반환한다.

AXIOS란 Node.JS와 브라우저를 위한 Promise 기반의 HTTP 클라이언트이다. 동일한 코드 베이스로 Node.JS와 브라우저에서 모두 실행할 수 있다. 서버에서는 네이티브 Node.JS의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다.

복사됨

AXIOS를 시작하기 위해서는 다음 링크를 참고하면 좋다.

4. jQuery AJAX를 이용한 방법

-비동기 HTTP 요청을 수행한다.

-$.ajax() 메소드를 사용하여 요청을 보낸다.

복사됨

번외:: OSI 계층 모델

개방형 시스템 상호 연결(OSI) 모델은 표준 프로토콜(*네트워킹에서, 데이터 형식 지정 및 처리를 위한 표준화된 규칙 세트. 프로토콜을 사용하면 컴퓨터가 서로 통신할 수 있다. 컴퓨터의 공통 언어와 같다고 한다.)을 사용하여 다양한 통신 시스템이 통신할 수 있도록 국제표준화기구에서 만든 개념 모델이다.

쉽게 말하자면 이는, 상이한 컴퓨터 시스템이 서로 통신할 수 있는 표준을 제공한다.

OSI 모델의 각 계층은 특정 작업을 처리하고 그 위와 아래 계층과 통신한다.

OSI 모델이 중요한 이유

현대 인터넷은 OSI 모델을 엄격히 따르지 않고, 더 단순한 인터넷 프로토콜 제품군을 따르지만 OSI 모델은 여전히 네트워크 문제를 해결하는 데 아주 유용하다. 어떤 웹사이트가 다운되었을 때, OSI 모델을 통해 문제를 분석하고 모델의 어느 특정 계층으로 문제를 좁힐 수 있을 경우 불필요한 많은 작업을 피할 수 있기 때문이다.

OSI 모델의 7가지 계층

7. 응용 프로그램 계층

사용자의 데이터와 직접 상호 작용하는 유일한 계층이다. 웹 브라우저 및 이메일 클라이언트와 같은 소프트웨어 애플리케이션은 이 애플리케이션 계층에 의지한다.

6. 프레젠테이션 계층

이 계층은 주로 데이터를 준비하는 역할을 하여 애플리케이션 계층이 이를 사용할 수 있게 한다. 즉 이 계층은 애플리케이션 계층이 데이터를 프레젠테이션하는 계층이다. 데이터의 변환, 암호화, 압축을 담당한다.

서로 통신하는 두 개의 통신 장치는 서로 다른 인코딩 방법을 사용하고 있을 수 있으므로, 이 계층에서는 수신 장치의 애플리케이션 계층이 이해할 수 있는 구문으로 수신 데이터를 변환하는 일을 담당한다.

장치가 암호화된 연결을 통해 통신하는 경우, 계층 6은 최종 송신자에게 암호화를 추가할 뿐만 아니라 최종 수신자에게 암호화를 디코딩하여 암호화되지 않은, 읽기 쉬운 데이터로 애플리케이션 계층을 제시할 수 있도록 하는 역할을 한다.

또, 이 계층은 애플리케이션 계층에서 수신한 데이터를 계층 5로 전송하기 전에 압축하는 일도 담당한다. 전송할 데이터의 양을 최소화함으로써 통신의 속도와 효율을 높이는 데에 도움된다.

5. 세션 계층

두 기기 사이의 통신을 시작하고 종료하는 일을 담당하는 계층.

통신이 시작될 때부터 종료될 때까지의 시간을 세션이라 하는데, 세션 계층은 교환되고 있는 모든 데이터를 전송할 수 있도록 충분히 오랫동안 세션을 개방한 후, 리소스를 낭비하지 않기 위해 세션을 즉시 닫을 수 있도록 보장한다.

또, 이 계층은 데이터 전송을 체크포인트와 동기화한다. 예를 들어 100mb의 파일이 전송되는 경우 세션 계층은 5mb마다 체크포인트를 설정한다.

이 체크포인트가 없다면 전체 전송을 처음부터 다시 시작해야 한다.

4. 전송 계층

계층 4는 두 기기 간의 통신을 담당한다. 세션 계층에서 가져온 데이터를 계층 3으로 보내기 전 세그먼트라는 조각으로 분할하는 일이 포함된다. 수신 기기의 전송 계층은 세그먼트를 세션 계층이 이용할 수 있는 데이터로 재조립해야 한다.

전송 계층은 또한 흐름 제어 및 오류 제어 기능의 역할도 한다. 흐름 제어는 연결 속도가 빠른 송신자가 연결 속도가 느린 수신자를 압도하지 않도록 최적의 전송 속도를 결정한다. 전송 계층은 수신된 데이터가 완료되었는지 확인하고 수신되지 않은 경우 재전송을 요청하여 최종 수신자에 대해 오류 제어를 수행한다. 전송 계층 프로토콜에는 TCP 및 UDP가 있다.

3. 네트워크 계층

네트워크 계층은 서로 다른 두 네트워크 간 데이터 전송을 용이하게 하는 역할을 한다. 서로 통신하는 두 장치가 동일한 네트워크에 있는 경우 네트워크 계층이 필요하지 않다. 네트워크 계층은 전송 계층의 세그먼트를 송신자의 장치에서 패킷이라고 불리는 더 작은 단위로 세분화하여 수신 장치에서 이러한 패킷을 다시 조립한다. 또한, 네트워크 계층은 데이터가 표적에 도달하기 위한 최상의 물리적 경로를 찾는데 이를 라우팅이라 한다.

IP, ICMP, IGMP, IPsec 제품군이 이 네트워크 계층 프로토콜에 속한다.

2. 데이터 연결 계층

데이터 연결 계층은 네트워크 계층과 매우 비슷하지만, 데이터 연결 계층은 ‘동일한’ 네트워크에 있는 두 개의 장치 간 데이터 전송을 용이하게 하는 계층이다.

데이터 연결 계층은 네트워크 계층에서 패킷을 가져와 ‘프레임’이라 불리는 더 작은 조각으로 세분화한다.

네트워크 계층과 마찬가지로 데이터 연결 계층도 인트라 네트워크 통신에서 흐름 제어 및 오류 제어를 담당한다. (전송 계층은 네트워크 간 통신에 대해서만 흐름 제어 및 오류 제어만을 담당한다.)

1. 물리적 계층

이 계층에는 케이블, 스위치 등 데이터 전송과 관련된 물리적 장비가 포함된다. 이 계층은 또한 1과 0의 문자열인 비트 스트림으로 변환하는 계층이다. 뿐만 아니라 두 장치의 물리적 계층은 신호 규칙에 동의하여 1과 0이 구별될 수 있어야 한다.

[참고 자료]

-https://www.cloudflare.com/ko-kr/learning/ddos/glossary/hypertext-transfer-protocol-http/

-https://developer.mozilla.org/ko/docs/Web/HTTP

-https://aws.amazon.com/ko/compare/the-difference-between-https-and-http/

-https://docs.tosspayments.com/resources/glossary/http-protocol