5. HTTP 메서드 활용 (1)

앞선 게시글에서 HTTP 메서드의 전반적인 내용에 대해 알아보았다.

메서드를 설명함에 있어서, 서버쪽에 치중하여 설명하였기 때문에, 이번에는 클라이언트 입장에서 주로 설명해보려 한다.

---

데이터 전달방식

● Query Parameter

주로 GET 메서드에서 Query Parameter를 통해 데이터를 전달할 때 사용한다.

검색어나, 정렬 등이 필요한 경우 사용한다.

● Message Body

주로 POST, PUT, PATCH 메서드에서 Message Body를 통해 데이터를 전달할 때 사용한다.

CASE 1 : 정적 데이터 조회 (Query 미사용)

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

※ 요청 메세지 (Request Message)

HTTP/1.1 200 OK Content-Type: image/jpeg Content-Length: 34012 lkj123kljoiasudlkjaweioluywlnfdo912u34ljko98udjkla slkjdfl;qkawj9;o4ruawsldkal;skdjfa;ow9ejkl3123123

※ 응답 메세지 (Response Message)

 

이미지 및 정적 텍스트 문서를 조회할 때 사용한다.

Query parameter 없이 단순히 Resource의 경로만으로 조회가 가능하다.

CASE 2 : 동적 데이터 조회 (Query 사용)

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

※ 요청 메세지 (Request Message)

 

Query parameter를 기반으로 정렬하여, 결과를 동적으로 생성한다.

주로, 검색어를 통한 정렬 등이 필요할 때 사용한다.

GET 메서드를 통한 조회 조건을 줄여거나, 조회한 결과를 정렬하는 경우 사용한다.

※ GET 메서드는 Query parameter를 사용하여 데이터를 전달

CASE 3 : HTML Form을 통한 데이터 전송

1. POST 전송 - 저장

Form	웹 브라우저가 생성한 Request Message
<form action="/save" method="post">   <input type="text" name="username" />   <input type="text" name="age" />   <button type="submit">전송</button> </form>	POST /save HTTP/1.1 Host: localhost:8080 Content-Type: application/x-www-form-urlencoded username=username_text&age=age_text

Form을 통한 데이터 전달 및 저장시, 웹 브라우저가 메서드가 POST인 것을 확인하여 Message Body에 데이터를 넣어준다.

Form의 내용을 url encoding 처리하여 전송해준다.

2. GET 전송

Form	웹 브라우저가 생성한 Request Message
</form action="/save" method="get">   <input type="text" name="username" />   <input type="text" name="age" />   <button type="submin">전송</button> </form>	GET /save?username=kim&age=20 HTTP/1.1 Host: localhost:8080

Form을 통한 데이터 저장시, 메서드를 GET으로 할 경우, 웹 브라우저가 해당 내용을 Query parameter로 바꾸어준다.

※ 위의 경우에는 하나의 예시로써, GET 메서드를 Resource의 변경이 발생하는 곳에서 사용하는 것은 옳지 않다. 

URI를 "/save"가 아닌, 조회가 가능한 URI로 설정하면 올바르게 사용할 수 있다.

3. multipart/form-data

파일 업로드와 같은 Binary 데이터들을 전송하기 위한 방식으로 사용이 된다. (이미지 등)

Form

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

웹 브라우저가 생성한 Request Message

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 109238a9o0p3eqwokjasd09ou3oirjwoe9u34ouief... ------XXX--

웹 브라우저가 boundary를 만들어주고, 여러 데이터 타입을 전송할 수 있도록 해준다.

HTML Form 전송은 GET, POST 메서드만 지원한다.

CASE 4 : HTTP API 데이터 전송

POST /members HTTP/1.1 Content-Type: application/json { "username": "young", "age": 20 }

애플리케이션에서 서버로 데이터를 전송해야할 때, 혹은 백엔드에서 시스템 통신이 필요할 때 HTTP API로 데이터를 전송한다.

앞 포스트에서 봤던 HTTP 메서드를 사용하면 된다.

GET, POST, PUT, PATCH 메서드 모두 사용 가능하다.

Content-Type: application/json을 주로 사용한다. (사실상 표준이라고 봐도 무방함)