✴️ 클라이언트에서 서버로 데이터 전송
클라이언트에서 서버로 데이터를 전송하는 방식은 크게 두 가지로 나눌 수 있다.
📌 쿼리 파라미터를 통한 데이터 전송
이 방식은 주로 GET 요청에서 사용되며, 정렬 필터를 사용하는 경우에 자주 사용된다.
📌 메세지 바디를 통한 데이터 전송
이 방식은 POST, PUT, PATCH 요청에서 주로 사용되며, 회원 가입, 상품 주문, 리소스 등록 및 변경 등에서 자주 사용된다.
다음과 같이 4가지 상황에 대해 살펴보자.
1️⃣ 정적 데이터 조회
정적 데이터는 이미지나 정적 텍스트 문서를 예로 들 수 있을 것이다.
위 예시에서 클라이언트가 서버에게 보낸 GET 요청 메세지를 보면 단순히 /static/star.jpg 경로에 있는 별 이미지를 요청하는 것에 불과하기 때문에, 서버는 이 메세지를 받아 이미지 리소스를 생성한 후 클라이언트에게 전송한다. 쿼리 파라미터를 사용하지는 않기 때문에, 클라이언트에서 서버로 추가적으로 전달하는 데이터는 없는 것을 확인할 수 있다.
2️⃣ 동적 데이터 조회
동적 데이터 조회는 보통 검색과 게시판에서 사용하는 정렬 필터 등을 예로 들 수 있다.
위 예시를 보자.
데이터 조회이므로 HTTP 메서드로는 GET을 사용하며, path 내 쿼리 파라미터를 사용해 데이터를 전달하게 된다. 서버는 /search?q=hello&hl=ko 를 통해 쿼리 스트링이 "hello" 이고, 언어가 한국어임을 알 수 있다. 그 후 쿼리 파라미터를 기반으로 데이터를 필터링한 후 결과를 동적으로 생성한다.
3️⃣ HTML Form을 통한 데이터 전송
⚡️ POST 전송 - 저장
위와 같이 작성되어 있는 HTML 코드가 있다고 가정하고, 홈페이지에서 전송 버튼을 눌렀을 때 웹 브라우저가 생성한 POST 요청 HTTP 메세지를 살펴보자.
POST /save HTTP/1.1
form 태그 내 action 속성으로 설정했던 uri가 path 부분에 들어간다.
Content-Type: application/x-www-form-urlencoded
username=kim&age=20
사용자가 input 태그 내 입력한 데이터를 key-value 형태로 메세지 본문에 넣는다.
위와 같은 형태의 콘텐츠 타입을 application/x-www-form-urlencoded 라고 한다. 타입명 내 encode가 들어가는 이유는 전송 데이터를 url 인코딩 처리하기 때문이다.
⚡️ GET 전송 - 저장
이번에는 HTTP 메소드를 GET으로 변경하고, 같은 방식으로 홈페이지에서 전송 버튼을 눌렀을 때 웹 브라우저가 생성한 GET 요청 HTTP 메세지를 살펴보자.
보통 GET 요청 메세지는 메세지 바디를 가지지 않기 때문에, 사용자가 input 태그를 통해 입력한 내용이 path 내 쿼리 파라미터를 통해 입력된 것을 확인할 수 있다.
⚡️ GET 전송 - 조회
하지만 이전 포스팅에서도 말했다시피, GET 요청은 조회에만 사용해야 한다❗️
따라서 리소스를 변경할 수 있는 작업에는 GET을 사용하지 않고, 위와 같이 데이터를 조회할 때만 사용해야 한다.
⚡️ multipart/form-data
폼 데이터 전송 시 기본 컨텐츠 타입은 application/x-www-form-urlencoded 이지만, 위 예시처럼 text, file 등 다양한 타입의 데이터를 전송해야 할 경우 multipart/form-data 타입을 사용한다. 그리고 설정된 boundary로 데이터를 개별로 구분한다.
4️⃣ HTML API를 통한 데이터 전송
말 그대로 클라이언트 쪽에서 직접 HTTP API를 만들어서 서버로 전달하는 형태이다.
이 경우는 보통 서버에서 서버로 통신할 때 많이 사용하며, 앱 클라이언트(ex> 아이폰, 안드로이드)에서 전송할 때도 많이 사용한다. 또한 React나 Vue와 같은 웹 클라이언트와 API 통신을 할 때도 사용한다.
컨텐츠 타입으로는 application/json 을 기본으로 사용하며, GET, POST, PUT, PATCH 메서드 모두 사용 가능하다.
Reference
