[HTTP] 클라이언트에서 서버로 데이터 전송 방법

---

데이터 전달 방식

Query parameter

Message body

---

정적 데이터 조회

이미지나 텍스트 문서 같은 정적 데이터는

조회할 때 GET을 사용하고

쿼리 파라미터도 없이 리소스 경로만으로 단순하게 조회 가능합니다.

// Request
GET /static/hyeok.jpa HTTP/1.1
Host: localhost:8080

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

lkj123kjhgjhg41234klh345fsfds1234j7767hs;12jh3fgjhf32145
k23jgk;sdoiuoxcv;35463456lhkj3k4jg....

---

동적 데이터 조회

데이터를 받아서 서버 뒷단에 비즈니스 로직을 처리한 결과 데이터를 동적 데이터라 하는데

게시판 목록에서 정렬해주는 버튼이나 조회 조건을 줄여주는 필터에 주로 사용합니다.

이외에도 사용할 수 있는 곳은 많습니다.

GET을 사용하며 쿼리 파라미터를 사용해서 데이터를 전달합니다.

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

---

HTML Form 데이터 전송

application/x-www-form-urlencoded (default)

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

// Browser가 바꾼 HTTP 메세지
POST /save HTTP/1.1
Host: localhost:8080
Content_Type: application/x-www-form-urlencoded

username=kim&age=20

// GET메서드로 바꿔도 가능?
GET /save?username=kim&age=20 HTTP/1.1
Host: localhost:8080
Content_Type: application/x-www-form-urlencoded

HTML의 form 태그로 받은 데이터는 자동으로

Browser가 HTTP message로 변환합니다.

이후 POST 메서드를 통해 서버에 요청합니다.

 

이때 message body 타입은 application/x-www-form-urlencoded으로 되며

이는 key=value형식으로 Query parameter 형식과 유사한 형태를 띕니다.

이는 default 타입 값으로 모든 문자를 인코딩하겠다고 명시하는 것입니다.

 

만일 저장하는데 GET메서드를 사용한다면

form태그에서 "get"으로 바꾸고

message body에 있는 내용을 Query parameter로 바꿔서 사용은 가능하나

GET 메서드 자체의 의의는 리소스를 조회하는데만 사용하도록 되어 있어서

사용하면 안됩니다.

 

만약 조회만 한다면

GET메서드도 사용이 가능합니다.

 

multipart/form-data

만일 HTML로 텍스트 이외에 file을 전송하고 싶다면

다음과 같이 form 태그안에 enctype에 "multipart/form-data"라고 명시하면 됩니다.

 

multipart가 생긴 유래는

username과 age 그리고 user의 사진을 하나의 form 태그에 넣어서 하나의 HTTP request를 만들어 전송하고 싶은데

header의 Content-Type 하나만으로는 텍스트와 이미지 인코딩 타입을 정의하기 힘들었습니다.

두 타입을 body에서 나눠서 정의할 필요가 있어졌고 이 때문에 등장한 것이 바로 multipart입니다.

 

mulitpart/form-data의 정확한 의미는

모든 문자를 인코딩하지 않음을 의미합니다.

텍스트, 이미지 두개나 보내는데 인코딩을 왜 안하는가에 대해서는

위에서 언급한 것 처럼 body에서 Content_Type을 각각 정의하기 위해서 header에서는 아무일도 안하는 것입니다.

 

영상, 이미지, 음성파일 등 Binary 코드로 된 모든 파일을 전송 가능합니다.

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

// HTTP message (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"

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

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

23945a0g8d44jdfsdfahg9324lkld...
------XXX--

참고로 HTML의 Form 전송은 GET, POST만 지원 가능합니다.

---

HTTP API 데이터 전송

form 태그로 전송하는 것은 HTML을 띄워야 하는 환경에 한해서 이루어졌다면

이제는 다양한 데이터 타입을 통한 API 통신이 대세입니다.

 

• 서버에서 서버의 백엔드 시스템 통신
• 아이폰이나 안드로이드 환경에서의 앱 클라이언트 통신
• form 태그로 전송하는 것 대신 javascript의 AJAX를 통한 통신 (React, VueJS의 API통신)

다양한 환경에서의 통신이 가능하다는 장점이 있습니다.

 

이는 GET, POST 이외에도 PUT, PATCH, DELETE 등 모든 HTTP 메서드를 활용가능합니다.

POST나 PUT, PATCH는 message body를 통해서 데이터를 전송할 때 사용하며

GET은 주로 조회할 때, Query parameter로 데이터를 전달하여 원하는 정보를 조회할 때 사용합니다.

 

Content-Type은 Text, XML 등이 있지만 요즘에는 대부분 JSON을 사용합니다.

사실상 JSON이 HTTP API의 표준이 되었습니다.

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

{
    "username": "Hyeok",
    "age": 24
}

---

참조

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

HTTP multipart/form-data 란?