이전 포스팅에서 살펴본 HTTP 메서드들이 개발에서 어떤 식으로 활용이 되는지를 알아봅시다!
먼저 클라이언트에서 서버로 어떤 식으로 데이터를 전송하는지 알아봅시다. 그리고 HTTP API를 어떻게 설계할 지 살펴보도록 합시다.
클라이언트 → 서버 데이터 전송
데이터를 전송하는 방식은 크게 2가지로 나눌 수 있다.
1. 쿼리 파라미터를 통한 데이터 전송
URI 끝에 쿼리 파라미터를 넣어 데이터를 전송하는 방식
주로, GET 메서드와 사용하고, 정렬 필터(검색어) 같은 것을 사용할 때 이용한다.
검색창에 검색어를 입력하거나, 게시판 리스트에 정렬 조건을 넣거나 할 때 주로 이용한다.
2. 메시지 바디를 통한 데이터 전송
HTTP-message body에 데이터를 넣어 전송하는 방식
이때는 POST, PUT, PATCH 메서드를 사용한다.
회원 가입, 상품 주문, 리소스 등록 • 변경 등과 같은 경우 이용한다.
클라이언트에서 서버로 데이터를 전송하는 4가지 상황을 예시를 통해 알아보자.
1. 정적 데이터 조회
이미지, 정적 텍스트 문서 등과 같은 정적 데이터를 전송하는 과정
쿼리 파라미터 미사용
위 예시는 서버가 "별" 이미지를 클라이언트에게 내려주는 과정이다. 이런 경우에는 추가적인 데이터를 전달하는 것이 없다. 클라이언트는 단순하게 URI 경로만 넣으면 서버는 이를 받아 이미지 리소스를 만들어 클라이언트에게 전달한다. 이때는 쿼리 파라미터를 사용하지 않는다.
정리를 하자면,
- 이미지, 정적 텍스트 문서
- 조회는
GET사용 - 정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능
2. 동적 데이터 조회
주로 검색, 게시판 목록 등에서 정렬 필터(검색어)와 같은 동적 데이터를 전송하는 과정
쿼리 파라미터 사용
검색어와 같은 추가 데이터들을 전달하기 위해 쿼리 파라미터를 사용한다.
- 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용
- 조회는
GET사용 GET은 쿼리 파라미터를 사용해서 데이터를 전달
3. HTML Form 데이터 전송
회원 가입, 상품 주문, 데이터 변경 등에서 사용
POST 전송 - 저장
위의 예시에서 HTML로 작성된 폼을 통해 "전송" 버튼을 누르면, 웹 브라우저가 Form의 데이터를 읽어 왼쪽 그림과 같이 HTTP message를 생성해준다.
GET 전송 - 저장
HTML Form으로 데이터를 전송할 때, GET 메서드를 사용할 수도 있다. 이 경우에는 데이터를 쿼리 파라미터에 넣게 된다.
정리하자면,
POST의 경우 : 데이터는 message body에 입력
GET의 경우 : 쿼리 파라미터로 입력
GET 전송 - 조회
위의 예시는 잘못되었다! GET메서드는 다음과 같이 조회에만 사용되어야지, 리소스가 변경되는 곳(ex. 저장)에서 사용되면 안된다!
multipart/form-data
추가적으로, HMTL form 전송에서 파일과 같은 것들을 전송할 때 사용하는 타입이 있다. 바로 multipart/form-data이다.
왼쪽 HTTP 메시지를 보면, Content-Type은 mulitpart/form-data로 들어가고, boundary속성을 가지고 파싱하게 된다(웹 브라우저가 자동으로 만들어 준다).
이렇게 여러 개의 part로 분리되어 들어가 multipart이다.
HTTP Form 데이터 전송에 대한 정리를 해보면,
- HTML Form submit 시
POST전송- 예) 회원 가입, 상품 주문, 데이터 변경
Content-Type : application/x-www-form-urlencoded사용- form의 내용을 메시지 바디를 통해서 전송(Key=Value 형태, 쿼리 파라미터 형식)
- 전송 데이터를 url encoding 처리
- 예) abc김 → abc%EA%B9%80 (UTF-8)
- HTML Form은
GET전송도 가능 Content-Type : multipart/form-data- 파일 업로드 같은 바이너리 데이터 전송 시 사용
- 다른 종류의 여러 파일과 폼의 내용을 함께 전송 가능
- 참고 : HTML Form 전송은
GET,POST만 지원
4. HTTP API 전송
애플리케이션에서 클라이언트에서 서버로 바로 데이터를 전송하는 경우, 위의 예시처럼 직접 만들어 넘겨주면 된다.
- 서버 to 서버
- 백엔드 시스템 통신
- 앱 클라이언트
- 아이폰, 안드로이드
- 웹 클라이언트
- HTML에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용(AJAX)
- 예) React, VueJs 같은 웹 클라이언트와 API 통신
POST,PUT,PATCH: 메시지 바디를 통해 데이터 전송GET: 조회, 쿼리 파라미터로 데이터 전달Content-Type : application/json을 주로 사용(사실상 표준)- TEXT, XML, JSON 등등
참고
인프런 김영한님의 강의 - 모든 개발자를 위한 HTTP 웹 기본 지식
