[ HTTP ] 데이터 전송 방식

클라이언트 -> 서버 데이터 전송

1) 방식 2가지

• 쿼리 파라미터를 통한 데이터 전송
  GET 을 사용함.
• 메시지 Body를 통한 데이터 전송
  POST, PUT, PATCH 사용

2) 상황 4가지

• 정적 데이터 조회
  이미지, 정적 텍스트 문서
  조회는 GET을 사용.
  정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능하다.
  
• 동적 데이터 조회
  주로 검색, 게시판 목록에서 정렬 필터(검색어)
  조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용
  조회는 GET 사용. GET은 주로 쿼리 파라미터를 사용해서 데이터를 전달한다.
• HTML Form을 통한 데이터 전송
  회원 가입, 상품 주문, 데이터 변경 시 사용한다.
  HTML Form 전송은 GET, POST만 지원한다.

 

POST의 바디에 key-value 스타일로 데이터를 만들어서 넣음. 쿼리 파라미터와 거의 동일한 방식으로 서버에 전송. GET는 메시지 바디를 안 쓰기 때문에 쿼리 파라미터(url 경로) 안에 넣어서 서버로 전달한다.

 

Form을 사용한 POST 파일 전송 방식 (2가지)

- 단순한 form 전송 방식: application/x-www-form-urlencoded
   이렇게 Body에 key와 vaule를 =로 연결하고 각 항목이 &로 열결된다. 브라우저는 Body에 있는 값을 변환 포맷에 따라 변환 실시.

- 파일 전송 방식: multipart/form-data

   Body 부분에 데이터를 여러 부분으로 나눠서 보내는 방식. 주로 바이너리 데이터를 보낼 때 사용

 

multipart/form-data 전송방식이 생겨난 이유는?

만약 사진을 업로드 한다고 생각해보자. 그럼 사진을 담은 input가 사진 설명을 담은 input 으로 3개가 body로 들어간다. 사진의 content-type은 image/jpeg일 것이고 사진 설명의 content-type은 application/x-www-form-urlencoded 일 것이다. 두 종류의 데이터가 하나의 HTTP Request Body에 들어가야하는데, 하나의 Body에서 2 종류의 데이터를 구분해서 넣지 못하기 때문에 2종류 이상의 데이터를 넣기 위해 이 방식이 생기게 되었다.

 

• HTTP API를 통한 데이터 전송 (HTML Form을 사용하지 않은 거의 모든 상황)
  회원 가입, 상품 주문, 데이터 변경 시 사용한다.
  서버 to 서버 (백엔드 시스템 통신)
  앱 클라이언트
  웹 클라이언트 (HTML Form 통신이 아닌 자바 스크립트를 통한 통신에 사용한다. - Ajax, React, VueJs)
  POST, PUT, PATCH : 메시지 바디를 통해 데이터 전송
  GET: 쿼리 파라미터로 데이터 전달
  Content-type: application/json 을 주로 사용(거의 표준)