클라이언트에서 서버로 데이터 전송
HTTP ·‘클라이언트 → 서버’ 데이터 전송 방법
클라이언트에서 서버로 데이터를 전송하는 데에는 크게 두 가지 방법으로 나뉩니다.
- 쿼리 파라미터를 통해 데이터 전송 : GET을 사용하며, 정렬 필터(검색어)를 만들 때 사용합니다.
- 메시지 바디를 통한 데이터 전송 : POST, PUT, PATCH를 사용하며, 회원 가입, 상품 주문, 리소스 등록 등을 만들 때 사용합니다.
정적 데이터 조회
이미지, 문자 전송과 같은 정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로를 통해 단순하게 조회합니다. 이 때 GET을 사용하게 됩니다.
동적 데이터 조회
GET, 쿼리 파라미터를 사용하여 데이터를 전달하고 조회를 하는 방법입니다. 검색, 게시판 목록에서 정렬 필터, 조회 조건을 줄여주는 필터 등에 사용됩니다. 메시지 바디를 쓸 수 있지만 지원하는 곳이 많지 않아 권장되지는 않습니다.
HTML Form으로 전송하기
HTML에 자체적으로 내장된 Form이라는 태그를 이용하여 데이터를 전송할 수 있습니다. 이 때, content-type의 default는 application/x-www-form-urlencoded로 설정이 되어 있습니다. HTML Form 전송은 GET, POST 만을 지원합니다.
HTML Form을 통한 데이터 전송
위 그림과 같이 Form을 만들어 메시지를 보낼 시, HTTP body에 쿼리 파라미터와 동일한 방식으로 적어서 서버에 전송하게 됩니다. 여기서form-urlencoded라는 것이 쓰이는 이유는 한글같은 다른 언어가 들어올 시 “?” 같은 문자들을 같이 작성해 넘기기 때문입니다.
method = “get”으로 보낼 시, 쿼리 파라미터에 담아서 보내게 되는데, 이 때 ‘get’은 조회의 용도로만 사용해야 하며, 저장을 하는 데에는 사용할 수 없습니다.
HTML Form으로 파일 전송
파일 전송 시 multipart/form-data를 사용하게 됩니다. 이 때, boundary라는 것(여기서는 —-XXX)을 브라우저가 자체적으로 만들며, 아래에 name에 따라 구분된 상태로 요청을 보내게 됩니다. 위 그림과 같이 multipart 즉 여러 부분들의 형태로 데이터를 보내는 데에 multipart/form-data를 사용합니다.
HTTP API 데이터 전송
주로 서버끼리 통신할 때 사용하는 형태로, 위 예시와 같이 정보들을 직접 작성해서 서버에 넘기게 됩니다. POST, PUT, PATCH는 메시지 바디를 통해 데이터를 전송합니다. Content-type: application/json을 주로 사용하고, XML을 이전에 많이 사용했으나 요즘에는 JSON 위주로 사용하고 있습니다.
이러한 형태는 아이폰, 안드로이드 앱 클라이언트에서 넘길 때, HTML에서 Form 전송 대신 자바스크립트로 통신할 때(React, Vue와 같은 웹 클라이언트 통신) 같은 상황에서도 사용됩니다.