클라이언트에서 서버로 데이터 전송
클라이언트에서 서버로 데이터를 전송할때 데이터를 전달하는 방식은 크게 2 가지가 존재합니다. 쿼리 파라미터를 통해 데이터를 전송하는 방식과 메세지 바디를 통한 데이터 전송 인데요, 전자의 경우 GET 을 이용하며 주로 정렬 필터에 사용합니다. 후자는 POST, PUT,PATCH 를 예로 들 수 있으며, 회원 가입, 상품 주문, 리소스 등록/변경 등에 사용합니다.
서버로 데이터를 전송할 때 여러 상황이 있는데요, 각각의 상황에서 어떤 전송방식이 쓰이는지 하나씩 알아보도록 하겠습니다.
정적 데이터 조회
정적 데이터(이미지, 정적 텍스트 문서) 조회의 경우 GET 을 사용하며, 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회가 가능합니다.
동적 데이터 조회
검색, 게시판 목록에서 정렬 필터를 할 때, 즉 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용합니다. 조회는 GET 을 사용하며, GET 은 쿼리 파라미터를 사용해서 데이터를 전달합니다.
HTML Form 데이터 전송
HTML Form 을 이용해 submit 할 때 POST 를 사용합니다. 예를 들어 회원가입, 상품 주문, 데이터 변경 등이 있습니다. 이때 Content-Type 은 application/x-www-form-urlencoded 사용하며(전송 데이터를 url encoding 처리), form 의 내용을 메세지 바디를 통해서 전송하게 됩니다. GET 또한 form 데이터 전송에 쓰일 수 있지만 메세지 바디를 통해 전송되는게 아닌 쿼리 파라미터를 통해 전송됩니다.
여러가지 형태의 데이터를 전송할때는 어떻게 해야할까요? Content-Type 을 multipart/form-data 로 두면 됩니다. 주로 파일 업로드 같은 바이너리 데이터 전송시에 사용하며 다른 종류의 여러 파일과 폼의 내용을 함께 전송할 수 있습니다. 이때 boundary 를 통해 메세지 바디에서 내용을 구분하는데, 그림을 통해 보여드리면 아래와 같습니다.
HTTP API 데이터 전송
HTTP API 데이터 전송은 주로 서버와 서버간, 즉 벡엔드 시스템들이 통신을 할 때 사용합니다. 이 외에도 앱 클라이언트(아이폰, 안드로이드) 나 웹 클라이언트에서도 HTTP API 를 사용합니다.
웹 클라이언트의 경우 form 대신 자바스크립트를 통한 통신에 사용합니다.(Ajax) React 와 VueJs 같은 웹 클라이언트와 API 통신을 예로 들수 있습니다.이때 POST, PUT, PATCH 를 이용하여 메세지 바디를 통해 데이터를 전송합니다. GET 도 쓰일 수 있지만 리소스가 변경이 되는 경우에 사용하는 것이 아닌 조회에 사용되며, 쿼리 파라미터로 데이터를 전달합니다. Content-Type 의 경우 application/json 을 주로 사용하며 이외에도 TEXT, XML 이 있습니다.