[HTTP] HTTP 메서드 활용(1)

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

🍃 데이터 전송 방법

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

    ▪ GET (주로 검색어/정렬 필터)

 

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

    ▪ POST, PUT, PATCH

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

 

🍃 4가지 예시 상황

1. 정적 데이터 조회

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

서버는 경로에 있는 리소스를 단순히 전달

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

 

2. 동적 데이터 조회

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

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

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

조회는 GET 사용 (쿼리 파라미터를 사용해서 데이터를 전달)

 

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

* GET, POST 메서드만 지원

- application/x-www-form-urlencoded

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

username=kim&age=20

form submit 버튼을 누르면 웹 브라우저가 method 속성에 맞게 HTTP 메시지를 생성해줌

application/x-www-form-urlencoded: form에 있는 내용을 key, value로 쿼리 파라미터와 동일한 형식으로 전달

 

GET /save?username=kim&age=20 HTTP/1.1
Host: localhost:8080

만약 form 태그의 method 속성값을 GET으로 한다면 메시지 바디에 있는 내용이 query 부분으로 옮겨 GET으로 HTTP 메시지를 생성함

* GET은 어디까지나 조회만 한다는 것을 주의, 리소스 변경이 발생하는 곳에서 사용하면 안됨

 

- multipart/form-data

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

HTTP 메시지에 파일 업로드 같은 바이너리 데이터까지 같이 전송해야 할 경우 form의 속성에서 enctype 속성을 myltipart/form-data로 지정---XXX로 경계를 잘라줌으로써 각 부분마다 다른 컨텐트 타입이 올 수 있음 

 

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

서버끼리 통신하거나 앱 클라이언트와 통신할 때, 웹 클라이언트 중 자바 스트립트를 통한 통신(AJAX, React, VueJs)에 사용한다.

GET는 query를, POST, PUT, PATCH는 메시지 바디를 통해 전송한다.

Content-Type: application/json을 주로 사용한다.

 

 

---

참고자료

https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC/dashboard

모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의