2022.01.02

2일로 고치려고 했는데 썸넬이 안지워지네..

HTTP 메서드 활용법

클라이언트에서 서버로 데이터 전송

데이터 전송 방식은 크게 2가지로 나눌 수 있다.

• 쿼리 파라미터를 통한 데이터 전송
  GET 예) 주로 정렬 필터(검색어)
• 메시지 바디를 통한 데이터 전송
  POST, PUT, PATCH 예) 회원 가입, 상품 주문, 리소스 등록과 변경

1. 정적 데이터 조회

이미지, 정적 텍스트 문서를 GET으로 조회한다. 정적 데이터는 쿼리 파라미터 없이 리소스 경로만으로 조회할 수 있다.

GET /static/image.jpg HTTP/1.1
Host: localhost:8080

2. 동적 데이터 조회

서버는 클라이언트에서 전달받은 쿼리 스트링 기반으로 정렬 필터해서 결과를 동적으로 생성한다. GET은 쿼리 파라미터를 사용해서 서버로 데이터를 전달하고 주로 검색과 게시판 목록에서 정렬 필터(검색어)에서 사용한다.

GET /search?q=hello&hl=ko HTTP/1.1
Host: www.google.com

3. HTML Form을 통한 데이터 전송

• HTML Form submit할 때 POST 전송 : 회원 가입, 상품 주문, 데이터 변경
• Content-Type: application/x-www-form-urlencoded
  form의 내용을 메시지 바디를 통해 전송(key=value, 쿼리 파라미터 형식)
  전송 데이터를 url encoding 처리
• HTML Form은 GET으로 전송도 가능하다. (GET, POST만 가능)
• Content-Type: multipart/form-data
  파일 업로드 같이 바이너리 데이터를 전송할 때 사용하고 다른 종류의 여러 파일과 폼의 내용을 함께 전송 할 수 있다.

예시 1

<form action="/save" method="post">
  <input type="text" name="username" />
  <input type="text" name="age" />
  <button type="submit">전송</button>
</form>

HTML form에 입력된 정보를 갖고 웹 브라우저는 요청 HTTP 메시지를 생성한다.

POST /save HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded

username=kim&age=20

예시 2
사용자의 이름과 나이 그리고 파일까지 전송해야 되는 경우

<form action"/save" method="post" enctype="multipart/form-data">
  <input type="text" name="username" />
  <input type="text" name="age" />
  <input type="file" name="file1" />
  <button type="submit">전송</button>
</form>

웹 브라우저가 생성한 요청 HTTP 메시지 - multipart로 나눠져서 데이터들이 전송된다. boundary값은 랜덤으로 생성된다.

POST /save HTTP/1.1
Host: localhost:8080
Content-Type: multipart/form-data; boundary=----XXX
Content-Length: 10457

------XXX
Content-Disposition: form-data; name="username"

kim
------XXX
Content-Disposition: form-data; name="age"

20
------XXX
Content-Disposition: form-data; name="file1";filename="intro.png"
Content-Type: image/png

109495782agfgjlkh561...
------XXX--

4. HTTP API를 통한 데이터 전송

회원 가입, 상품 주문, 데이터 변경할 때 사용한다.

• 서버 to 서버 : 백엔드 시스템 통신
• 앱 클라이언트 : 아이폰, 안드로이드
• 웹 클라이언트(Ajax): HTML 에서 폼 전송 대신 js를 이용해 통신에 사용한다. (React같이 웹 클라이언트와 API 통신)
• POST, PUT , PATCH : 메시지 바디를 통해 데이터를 전송한다.
• GET : 조회, 쿼리 파라미터로 데이터를 전달한다.
• Content-Type: application/json을 주로 사용한다. (Text, xml, json)

POST /members HTTP/1.1
Content-Type: application/json

{
  "username":"kim",
  "age":20
}