HTTP(9) - 클라이언트에서 서버로 데이터를 전송하는 케이스
클라이언트에서 서버로 데이터를 전송할 때에 대해서 상세하게 알아보자.
우선 데이터를 전달하는 방식은 두 가지가 있다.
1. 쿼리 파라미터
- GET 메서드에서 많이 쓰인다.
- 주로 정렬 필터(검색어) 파라미터를 보낼 때 많이 쓰이곤 한다.
2. 메시지 바디
- POST, PUT, PATCH에서 많이 쓰인다.
- 회원 가입, 상품 주문, 글 수정 등에서 많이 쓰인다.
그렇다면 어떤 상황일 때 데이터를 전송하게 될까?
1. 정적 데이터 조회
- 쿼리 파라미터 미사용
- 이미지나 정적 텍스트 문서 조회
- 주로 GET 사용
2. 동적 데이터 조회
- 쿼리 파라미터 사용
- 주로 검색, 게시판 정렬 등에서 사용
- 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 사용
- 주로 GET 사용
3. HTML Form 사용
다소 느낌이 다른 사용 방식이다.
기본적으로 아래와 같은 형태의 HTML Form에서 사용하게 된다.
<form action="/save" method="post">
<input type="text" name="username" />
<input type="text" name="age" />
<button type="submit">전송</button>
</form>
여기서 button을 누르면 브라우저에서 HTTP 요청 메시지를 만들게 된다.
| POST /save HTTP/1.1 Host: localhost:8080 Content-Type: application/x-www-form-urlencoded username=kim&age=20 |
자세히 보면 form 내의 action, method, input 내의 name 프로퍼티 등 데이터를 읽어서 HTTP 메시지를 만드는 것을 볼 수 있다.
예제는 username과 age를 저장하는 용도로 POST가 쓰였지만
GET 메서드로도 사용 가능하며 GET으로 할 경우에는 적절한 URL을 조합하여 조회하는 형태가 될 것이다.
여기에 더하여 파일 업로드와 같은 바이너리 데이터 전송 시에도 사용 가능하다.
<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>이 경우에 만들어진 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 109238a9o0p3eqwokjasd09ou3oirjwoe9u34ouief... ------XXX-- <!-- 맨 끝에는 --가 추가 된다. --> |
HTTP 요청 메시지 두 개를 보면 Content-Type을 강조 했는데 이에 대해서도 간단하게 알아보도록 하자.
Content-Type: application/x-www-form-urlencoded
- form의 내용을 메시지 바디를 통해 전송(key=value, 쿼리 파라미터 형식)
- 전송 데이터를 url encoding 처리
Content-Type: multipart/form-data
- 파일 업로드와 같은 바이너리 데이터 전송에 사용
- 다른 종류의 파일들과 함께 전송 가능 (그래서 multipart라는 단어가 들어감)
4. HTTP API 데이터 전송
개발을 하다보면 많이 보게 되는 방식이다. 우리가 직접 만들어서 전송하게 된다.
이 케이스 내에서도 여러 케이스로 갈리게 된다.
1) 서버 to 서버 - 백엔드 시스템끼리의 통신
2) 앱 클라이언트에서 서버로 전송
3) 웹 클라이언트에서 서버로 전송
- 이 방식의 경우, JavaScript 등을 통해 통신에 사용하는 방식을 많이들 짜봤을 것이라 생각한다. 대표적으로 ajax가 있다.
POST, PUT, PATCH 사용 시 메시지 바디를 이용하고,
GET 사용 시 쿼리 파라미터로 데이터를 전송하게 되는 것은 다른 케이스들과 거의 동일하다.
참고로 Content-Type 헤더는 주로 application/json을 사용한다.