#5. [HTTP] HTTP 메서드 활용

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

데이터 전달 방식은 크게 2가지

- 쿼리 파라미터를 통한 데이터 전송

  * GET

  * 주로 정렬 필터(검색어)

- 메시지 바디를 통한 데이터 전송

  * POST, PUT, PATCH

  * 회원 가입, 상품 주문, 리소스 등록, 리소스 변경

 

 

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

4가지 상황

- 정적 데이터 조회

  * 이미지, 정적 텍스트 문서

- 동적 데이터 조회

  * 주로 검색, 게시판 목록에서 정렬 필터(검색어)

- HTML Form을 통한 데이터 전송

  * 회원 가입, 상품 주문, 데이터 변경

- HTTP API를 통한 데이터 전송

  * 회원 가입, 상품 주문, 데이터 변경

  * 서버 to 서버, 앱 클라이언트 ,웹 클라이언트(Ajax)

 

 

정적 데이터 조회

쿼리 파라미터 미사용

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

 

/static/star.jpg

HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: 34012

lkj1laksjdflkasdjfsdkvnekvnedkfnsdofnweofnsldfne
sdklfjslfknwmelfknflksnmflkwemfnlsdcnmweokfnmwslfnm123141234

그냥 단순하게 URI경로(URL)만 타겟으로 설정하고 GET 요청을 보내면 단순하게 쿼리 파라미터 없이 

해당 데이터를 응답해준다.

 

정리

- 이미지, 정적 텍스트 문서

- 조회는 GET 사용

- 정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능

 

 

동적 데이터 조회

쿼리 파라미터 사용

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

해당 경로(요청 타겟)은 /search인건 알겠고, 실제 검색을 위해 필요한 단어, 조건등을 쿼리 파라미터를 추가하여 동적으로 요청함.

 

정리

- 주로 검색, 게시판 목록에서 정렬 필터(검색어)

- 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용

- 조회는 GET 사용

- GET은 쿼리 파라미터 사용해서 데이터를 전달

 

 

HTML Form 데이터 전송

POST 전송 - 저장

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

해당 html 문서를 웹브라우저에서 랜더링 해보면 username과 age를 입력받을 수 있는 input box가 보이게 된다. hello, 200 입력 후 전송 버튼을 누르면 웹 브라우저는 다음의 HTTP 요청 메시지를 만들게 된다.

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

username=hello&age=200

만들어진 POST요청을 서버에 전송하게되면 저장하게 된다.(전송 코드는 따로 작성해야 함.)

 

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

만약 method를 GET으로 바꾸게 되면 웹브라우저에서 message body에 실었던 데이터를 쿼리 파라미터로 바꾸고, 전송하게된다. 기본적으로 GET은 조회를 하기 때문에 우리가 원하는 데이터 저장은 일어나지 않는다.

GET /save?username=hello&age=200 HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded

 

 

HTML Form 데이터 전송

multipart/form-data

html에서 enctype을 설정해주면, 저렇게 웹브라우저가 HTTP메시지를 생성한다. 주로 binary 데이터 전송시 사용한다.

 

HTML Form 데이터 전송

정리

- HTML Form submit시 POST 전송

  * 예) 회원 가입, 상품 주문, 데이터 변경

- Content-Type: applciation/x-www-form-urlencoded 사용

  * form의 내용을 메시지 바디를 통해서 전송(key=value, 쿼리 파라미터 형식)

  * 전송 데이터를 url encoding 처리

    * 예) abc김 -> abc%EA%B9%80

- HTML Form은 GET 전송도 가능

- Content-Type: multipart/form-data

  * 파일 업로드 같은 바이너리 데이터 전송시 사용

  * 다른 종류의 여러 파일과 폼의 내용 함께 전송 가능(그래서 이름이 multipart)

- ※ 참고 : HTML Form 전송은 GET, POST만 지원

 

 

HTTP API 데이터 전송

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

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

 

정리

- 서버 to 서버

  * 백엔드 시스템 통신

- 앱 클라이언트

  * 아이폰, 안드로이드

- 웹 클라이언트

  * HTML에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용 (AJAX)

  * 예) React, VueJs 같은 웹 클라이어늩와 API 통신

- POST, PUT, PATCH: 메시지 바디를 통해 데이터 전송

- GET: 조회, 쿼리 파라미터로 데이터 전달

- Content-Type: application/json을 주로 사용 (사실상 표준)

  * TEXT, XML, JSON 등등