일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- Operating System
- C#
- 열혈 TCP/IP 소켓 프로그래밍
- inflearn
- 2475번
- HTTP
- Four Squares
- 이펙티브코틀린
- 우아한레디스
- 윤성우 저자
- OS
- 스프링 핵심 원리
- 에러핸들링
- 김영한
- 운영체제
- 스프링 입문
- Spring
- Operating System.
- 10026번
- 토마토
- C++
- Window-Via-c/c++
- FIFO paging
- 제프리리처
- 열혈 tcp/ip 프로그래밍
- BOJ
- n타일링2
- 우아한 테크 세미나
- redis
- TCP/IP
- Today
- Total
나의 브을로오그으
#5. [HTTP] HTTP 메서드 활용 본문
클라이언트에서 서버로 데이터 전송
데이터 전달 방식은 크게 2가지
- 쿼리 파라미터를 통한 데이터 전송
* GET
* 주로 정렬 필터(검색어)
- 메시지 바디를 통한 데이터 전송
* POST, PUT, PATCH
* 회원 가입, 상품 주문, 리소스 등록, 리소스 변경
클라이언트에서 서버로 데이터 전송
4가지 상황
- 정적 데이터 조회
* 이미지, 정적 텍스트 문서
- 동적 데이터 조회
* 주로 검색, 게시판 목록에서 정렬 필터(검색어)
- HTML Form을 통한 데이터 전송
* 회원 가입, 상품 주문, 데이터 변경
- HTTP API를 통한 데이터 전송
* 회원 가입, 상품 주문, 데이터 변경
* 서버 to 서버, 앱 클라이언트 ,웹 클라이언트(Ajax)
정적 데이터 조회
쿼리 파라미터 미사용
GET /static/star.jpg HTTP/1.1
Host: localhost:8080
/static/star.jpg
HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: 34012
lkj1laksjdflkasdjfsdkvnekvnedkfnsdofnweofnsldfne
sdklfjslfknwmelfknflksnmflkwemfnlsdcnmweokfnmwslfnm123141234
그냥 단순하게 URI경로(URL)만 타겟으로 설정하고 GET 요청을 보내면 단순하게 쿼리 파라미터 없이
해당 데이터를 응답해준다.
정리
- 이미지, 정적 텍스트 문서
- 조회는 GET 사용
- 정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능
동적 데이터 조회
쿼리 파라미터 사용
GET /search?q=hello&hi=ko HTTP/1.1
Host:www.google.com
해당 경로(요청 타겟)은 /search인건 알겠고, 실제 검색을 위해 필요한 단어, 조건등을 쿼리 파라미터를 추가하여 동적으로 요청함.
정리
- 주로 검색, 게시판 목록에서 정렬 필터(검색어)
- 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용
- 조회는 GET 사용
- GET은 쿼리 파라미터 사용해서 데이터를 전달
HTML Form 데이터 전송
POST 전송 - 저장
<form action="/save" method="post">
<input type="text" name="username" />
<input type="text" name="age" />
<button type=submit">전송</button>
</form>
해당 html 문서를 웹브라우저에서 랜더링 해보면 username과 age를 입력받을 수 있는 input box가 보이게 된다. hello, 200 입력 후 전송 버튼을 누르면 웹 브라우저는 다음의 HTTP 요청 메시지를 만들게 된다.
POST /save HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded
username=hello&age=200
만들어진 POST요청을 서버에 전송하게되면 저장하게 된다.(전송 코드는 따로 작성해야 함.)
<form action="/save" method="get">
<input type="text" name="username" />
<input type="text" name="age" />
<button type=submit">전송</button>
</form>
만약 method를 GET으로 바꾸게 되면 웹브라우저에서 message body에 실었던 데이터를 쿼리 파라미터로 바꾸고, 전송하게된다. 기본적으로 GET은 조회를 하기 때문에 우리가 원하는 데이터 저장은 일어나지 않는다.
GET /save?username=hello&age=200 HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded
HTML Form 데이터 전송
multipart/form-data
html에서 enctype을 설정해주면, 저렇게 웹브라우저가 HTTP메시지를 생성한다. 주로 binary 데이터 전송시 사용한다.
HTML Form 데이터 전송
정리
- HTML Form submit시 POST 전송
* 예) 회원 가입, 상품 주문, 데이터 변경
- Content-Type: applciation/x-www-form-urlencoded 사용
* form의 내용을 메시지 바디를 통해서 전송(key=value, 쿼리 파라미터 형식)
* 전송 데이터를 url encoding 처리
* 예) abc김 -> abc%EA%B9%80
- HTML Form은 GET 전송도 가능
- Content-Type: multipart/form-data
* 파일 업로드 같은 바이너리 데이터 전송시 사용
* 다른 종류의 여러 파일과 폼의 내용 함께 전송 가능(그래서 이름이 multipart)
- ※ 참고 : HTML Form 전송은 GET, POST만 지원
HTTP API 데이터 전송
POST /members HTTP/1.1
Content-Type: application/json
{
"username": "han",
"age": 20
}
정리
- 서버 to 서버
* 백엔드 시스템 통신
- 앱 클라이언트
* 아이폰, 안드로이드
- 웹 클라이언트
* HTML에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용 (AJAX)
* 예) React, VueJs 같은 웹 클라이어늩와 API 통신
- POST, PUT, PATCH: 메시지 바디를 통해 데이터 전송
- GET: 조회, 쿼리 파라미터로 데이터 전달
- Content-Type: application/json을 주로 사용 (사실상 표준)
* TEXT, XML, JSON 등등
'HTTP' 카테고리의 다른 글
#7. [HTTP] HTTP 상태코드 (0) | 2022.08.03 |
---|---|
#6. [HTTP] HTTP API 설계 예시 (0) | 2022.08.02 |
#4. [HTTP] 클라이언트 서버 구조와 HTTP 특징 (0) | 2022.08.01 |
#3-2. [HTTP] 클라이언트 서버 구조와 HTTP 특징 (0) | 2022.07.31 |
#3-1. [HTTP] HTTP 기본 (0) | 2022.07.31 |