클라이언트에서 서버로 데이터 전송
1. 쿼리 파라미터를 통한 데이터 전송
- GET
- 주로 정렬 필터(검색어, 게시판에 정렬 조건)
2. 메시지 바디를 통한 데이터 전송
- POST, PUT, PATCH
- 회원 가입, 상품 주문, 리소스 등록, 리소스 변경
클라이언트에서 서버로 데이터 전송
4가지 상황 예시
- 정적 데이터 조회
- 동적 데이터 조회
- 주로 검색, 게시판 목록에서 정렬 필터(검색어)
- HTML Form을 통한 데이터 전송
- HTTP API를 통한 데이터 전송
- 회원 가입, 상품 주문, 데이터 변경
- 서버 to 서버, 앱 클라이언트, 웹 클라이언트(Ajax)
1. 정적 데이터 조회
- HTTP 메시지의 경로를 보고 데이터를 클라이언트로 그대로 넘겨주면 된다.
정리
- 이미지, 정적 텍스트 문서의 경우
- 조회는 GET 사용
- 정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능
2. 동적 데이터 조회
쿼리 파라미터 사용 : 경로 + 추가데이터를 전달해야할 때
- 쿼리 파라미터를 기반으로 key, value 값으로 꺼낼 수 있다.
- 서버에서 파라미터 값으로 결과를 동적으로 생성
정리
- 주로 검색, 게시판 목록에서 정렬 필터(검색어) -> 검색어는 조회 조건을 줄여주기에 필터라고 부름
- 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용
- 조회는 GET 사용
- GET은 쿼리 파라미터 사용해서 데이터를 전달
POST 전송 - 저장
- HTML Form 작성 후 웹페이지의 submit버튼을 누르면 HTTP 메시지를 생성해준다.
- form action="/save" method="post"면 POST 메서드로 /save 경로의 메시지 생성
- Content-Type: 의 내용이 달라짐, message body의 내용도 쿼리 파라미터와 비슷한 형식!
GET 전송 - 저장
- method="get"으로 form 작성 시 경로에 쿼리 파라미터로 input 값 전달
- GET이니까 당연히 조회에만 사용!
- enctype="multipart/form-data" : byte로 된 파일까지 전송해야될 경우
- boundary : 데이터별 경계표시 -> 웹브라우저가 자동으로 만들어줌
- 여러 데이터를 multipart로 보낼 수 있다!
정리
- HTML Form submit시 POST 전송
- Content-Type: application/x-www-form-urlencoded 사용
- form 내용 messagebody를 통해 전송(쿼리 파라미터와 같은 형식)
- 전송 데이터를 url encoding 처리
- ex) abc김 -> abc%EA%B9%80 (utf-8형식으로 인코딩한거)
- HTML Form은 GET 전송 가능
- Content-Type:
- Content-Type: multipart/form-data
- 파일 업로드 같은 바이너리 데이터 전송시 사용
- 다른 종류의 여러 파일과 폼의 내용 함께 전송 가능 -> multipart
- 참고 : HTML Form 전송 GET, POST만 지원
4. HTTP API 데이터 전송
- HTML Form이 아닌 경우
- 클라이언트가 직접 서버로 데이터 전송할 때 (라이브러리 활용)
정리
- 서버 to 서버
- 앱 클라이언트
- 웹 클라이언트
- HTML에서 Form 전송 대신 자바스크립트를 통해 통신(AJAX)
- ex) React, VueJs 같은 웹 클라이언트와 API 통신
- POST, PUT, PATCH: 메시지 바디를 통해 데이터 전송 -> 활용 가능
- GET : 조회, 쿼리 파라미터로 데이터 전달
- Content-Type: application/json을 주로 사용 (사실상 표준)
- TEXT, XML, JSON 등등 사용할 수 있음
