2022.01.07

HTTP 메서드 활용

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

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

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

4가지 예시

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

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

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

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

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
  파일 업로드 같이 바이너리 데이터를 전송할 때 사용하고 다른 종류의 여러 파일과 폼의 내용을 함께 전송 할 수 있다.

3-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

3-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로 나눠져서 데이터들이 전송된다.

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--

HTTP API를 통한 데이터 전송
회원 가입, 상품 주문, 데이터 변경할 때 사용한다.

• 서버 to 서버 : 백엔드 시스템 통신
• 앱 클라이언트 : 아이폰, 안드로이드
• 웹 클라이언트(Ajax)
  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
}