HTTP를 통한 데이터 전송 방법

클라이언트 → 서버로 데이터 전송하는 방식은 크게 두 가지

1. 쿼리 파라미터를 통한 데이터 전송
   1. 주로 GET에서 많이 사용
   2. 주로 정렬 필터 (검색어)를 쓸 때 사용
   3. 예를 들어, 구글에 검색어를 치거나, 쿠팡에서 정렬 조건을 넣거나 할 때, 쿼리 파라미터를 많이 사용한다.
2. 메세지 바디를 통한 데이터 전송
   1. POST, PUT, PATCH 사용
   2. 회원가입, 상품 주문, 리소스 등록, 리소스 변경 등에 사용

---

클라이언트 → 서버로 데이터가 전송되는 4가지 예시

1. 정적 데이터 조회

GET /static/star.jpg

• 단순히 이미지, 정적 텍스트 문서를 조회할 때 사용
• GET 사용
• 정적 데이터는 일반적으로 쿼리 파라미터 없이 단순 리소스 경로로 조회 가능.

2. 동적 데이터 조회

https://www.google.com/search?q=hollo&hl=ko

• 조회시 데이터를 전달해야 할 때가 있다
• 쿼리문을 붙여 사용
• 주로 검색, 게시판 목록에서 정렬 필터(검색어)
• 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용
• 조회는 GET 사용
• GET은 쿼리 파라미터 사용해서 데이터를 전달 → 메시지 바디를 사용할 수 있으나 아직 지원하지 않는 곳이 더 많음.

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

• HTML Form submit시 POST 전송
  • 예) 회원가입, 상품 주문, 데이터 변경
• Content-Type : application/x-www-form-urlencoded 사용
  • form의 내용을 메세지 바디를 통해 전송 (key=value, 쿼리 파라미터 형식)
  • 전송 데이터를 url encoding 처리
    • 예) abc김 → abc%EA%B9%80
• HTML Form은 GET, POST만 전송 가능
• Content-Type : multipart/form-data
  

• 위에서 "전송" 버튼을 누르면, username 뿐만 아니라 파일까지 같이 전송해야 한다. 이럴 때는 multpart/form-data 라는 메세지 바디에 넣는 형식을 사용해야 한다.
• 파일 업로드 같은 바이너리 데이터 전송시 사용
• 다른 종류의 여러 파일과 폼의 내용 함께 전송 가능
• POST이면 메세지 바디에 데이터를 넣고, GET이면 쿼리 파라미터에 넣는다.

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

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

• HTML form을 쓰지 않는 거의 모든 상황!
  • 서버 to 서버 (백엔드 시스템 통신)
  • 앱 클라이언트 (아이폰, 안드)
  • 웹 클라이언트
  • HTML에서 Form 전송 대신 JS 통한 통신에 사용 (AJAX)
    • 예) React, Vue 같은 웹클라이언트와 API 통신
• POST, PUT, PATCH : 메세지 바디를 통해 데이터 전송
• GET : 조회, 쿼리 파라미터로 데이터 전달
• Content-Type : application/json을 주로 사용 (사실상 표준) 그 외에도 TEXT, XML 등이 있음