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

클라이언트에서 서버로 데이터를 전송하는 방법

HTTP 메서드를 어떻게 활용하는지에 대해 알아보자
클라이언트에서 서버로 어떻게 데이터를 전송하는지 HTTP API 설계할 때 어떻게 하면 좋은지 알아보자

클라이언트에서 서버로 데이터를 전송할 때 데이터의 전달 방식은 크게 2가지이다.

• 쿼리파라미터를 통한 데이터 전송
  GET, 주로 정렬필터(검색어)를 이용한 쿼리파라미터가 있고
• 메시지 바디를 통한 데이터 전송
  POST, PUT, PATCH를 주로 사용하는 메시지 바디가 있다.

클라이언트에서 서버로 데이터를 전송하는 상황

그럼 어떤 상황에서 클라이언트가 서버로 데이터를 전송하는지 알아보자

• 정적 데이터 조회
• 동적 데이터 조회
• HTML Form을 통한 데이터 전송
• HTTP API를 통한 데이터 전송

정적 데이터 조회

• 쿼리 파라미터 미사용 시

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

URI의 경로를 보내면 이미지나 정적 텍스트 문서로
GET을 이용하여 리소스 경로만으로도 단순하게 조회가 가능하다.

• 쿼리 파라미터 사용

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

위와 같이 보내면 search로 검색임을 인지하고 서버에서 key, value값을 인지한다.
그러면 서버에서 찾아서 value값을 도출하는 것이다.

주로 검색과 게시판 목록에서 정렬 필터(검색어)를 의미한다.
조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용하며
조회는 GET을 사용 GET은 쿼리 파라미터를 사용해서 데이터를 전달하는 순서를 가진다.

HTML Form 데이터 전송

POST를 이용하여 전송, 저장을 한다.

짧게 정리하면 HTML Form 태그로 전송을 할때 action과 method를 정의한다.
action을 /save로 정의하고 method를 post로 정의한 뒤
username을 kim, age=20이라고 생성해서 전송한다고 하면
아래와 같은 HTTP 메시지가 서버로 전송된다.

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

username=kim&age=20

그랬을 때 서버에서는 요청 HTTP메시지를 받은 뒤 데이터를 저장하게 되는 것이다.

• 위의 과정에서 method를 GET으로 바꾸면?

GET으로 보내는 순간 위의 HTTP 메시지는 아래같이 변경된다.

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

action이 발생하지 않고 쿼리파라미터로 들어가게 된다. action이 save인데
위의 action에 대한 GET메서드를 따로 정의하지 않으면 작동하지 않게된다.

• 위의 저장, 전송 기능을 이용할 때 파일을 전송하고 싶으면?

이 때 multipart/form-data라는 것을 이용한다.
이 경우에는 HTML의 form 태그 코드에 multipart/form-data를 추가해야하는데

<form action="/save" method="post" enctype="multipart/form-data">
	<input type="text" name="username" />
    <input type="text" name="age" />
    <input type="file" name="file1" />
</form>

위와 같이 form 태그를 변경한다. 이후 HTTP 메시지를 확인해보면

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

10923a9o0p3eqwokjasd09ou3oirwoe.........
------XXX--

이런식으로 보내지게 된다.
경계를 ------XXX로 잘라서 각각 어떤 형식의 데이터를 전송할지 HTTP 메시지를 통해 보내고
여러 부분으로 나눠서 보내기 때문에 multipart/form-data가 인코딩 타입이되는 것이다.

정리

• HTML Form submit시 POST전송
  - 예) 회원 가입, 상품 주문, 데이터 변경
• Content-Type: application/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 데이터 전송

클라이언트에서 서버로 데이터를 바로 전송한다면?
클라이언트에 라이브러리들이 HTTP 메시지를 작성해서 넘길 수 있도록 한다.

정리

• 서버 to 서버
  • 백엔드 시스템 통신
• 앱 클라이언트
  • 아이폰, 안드로이드
• 웹 클라이언트
  • HTML에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용(AJAX)
  • 예) React, Vue.Js 같은 웹 클라이언트 API 통신
• POST, PUT, PATCH : 메시지 바디를 통해 데이터 전송
• GET : 조회, 쿼리 파라미터로 데이터 전달
• Content-Type : application/json을 주로 사용(사실상 표준)
  • TEXT, XML, JSON 등등
• 데이터를 전달할 때는 보통 JSON이 통상 표준이 되었다. 이전에는 AJAX의 X가 XML일 정도로 XML이 통상표준이었으나 현재는 JSON이 표준이어서 Content-Type에는 주로 JSON이 온다!

다음에는 HTTP API 설계 예시에 대해 정리해보겠다!!

출처 : 모든 개발자를 위한 HTTP 웹 기본 지식(김영한 강사님 인프런 강의)