3월 9일 HTTP 실제 활용

HTTP 실제 활용

1.클라이언트에서 서버로 데이터 전송

2.HTTP API설계 예시

 

1.클라이언트에서 서버로 데이터 정송하는 2가지 방법

-1. 쿼리 파라미터를 통한 데이터 전송(URI 방법)

get

주로 정렬 필터(검색어)

 

-2.메시지 바디를 통한 데이터 전송(HTTP Message body) 방법

post , put , patch

회원가입 , 상품주문 , 리소스 등록 , 리소스 변경

 

데이터를 전송하는 4가지 상황

1.정적 데이터 조회

-이미지 , 정적 텍스트 문서

 

2.동적 데이터 조회

-주로 검색, 게시판목록에서 정렬 필터(검색어)

 

3.HTML Form 을 통한 데이터 전송

-회원가입 , 상품주문 , 데이터 변경

 

4.HTTP API 를 통한 데이터 전송

-회원가입 , 상품주문 , 데이터변경

-서버to서버 , 앱 클라이언트 , 웹 클라이언트(ajax)

 

1.정적 데이터 조회(쿼리 파라미터 미사용)

(request)

Get /static/star.jpg HTTP/1.1

Host : localhost:8080

 

데이터를 조회해서 받아만 오는거라 추가적인 데이터 전달이 없다.

경로만 있어도 가능

 

(response)

/static/star.jpg

http/1.1 200 ok

content-type : image/jpg

content-length : 34012

 

<message>

 

보통 이미지나 정적 텍스트 문서 조회

조회는 GET 사용

정적 데이터는 일반적으로 쿼리파라미터없이 리소스 경로로 단순하게 조회가능

 

2.동적 데이터 조회(쿼리 파라미터 사용)

https:www.google.com/search?q=hello&h1=ko

                                                           ㄴ데이터 전송

 

(response)

Get /search?q=hello&h1=ko HTTP/1.1

Host : www.google.com & 

쿼리 파라미터를 기반으로 정렬 , 필터에서 결과를 동적으로 생성

주로 검색, 게시판 목록에서 정렬 필터(검색어)

조회 조건을 줄여주는 필터 , 조회 결과를 정렬하는 정렬 조건에 주로 사용

조회는 GET사용

GET은 쿼리파라미터를 사용해서 데이터를 전달

 

3.HTML Form 으로 데이터 전송(post 전송 - 저장)

 

<form action ="save" method ="post">

<input type="text" name="username"/>

<input type="text" name="age"/>

<button type ="submit"> 전송 </button>

</form>

 

HTTP 메세지

(request)

Post /save Http/1.1

host : localhost : 8080

content-type : application / x-www-form-urlencoded

                                                           ㄴ값을 키 , 벨류 화 , 인코딩

username = kim&age=20 //전송 데이터를 body에 표현

 

<form action="/save" method ="get">

메소드가 get인 경우

 

Get /save?username=kim&age=20 HTTP/1.1

Host : localhost : 8080

GET은 메시지 body를 사용하지 않아서 URI경로에 데이터를 표현

*get은 조회이외에 용도로는 사용해선 안된다.

 

form에서 파일 전송

<form action="/save" method ="post" enctype = "multipart/form -data">

                                                                                      ㄴ여러 컨텐츠를 보낼 수 있다.

전송시 Content-type

Content-type : multipart/form-data;boundary = ~~

 

 

정리

HTML from submit 시 post 전송

ex) 회원가입 , 상품주문 , 데이터 변경

content-type = application/x-www.form-urlencoded 사용 (default)

-form의 내용을 메시지 바디를 통해서 전송(key-value , 쿼리 파라미터 형식)

-전송데이터를 url= encoding 처리

 

HTML form 은 get전송도 가능

content-type multipart / form-data

-파일 업로드 같은 바이너리 데이터 전송시 사용

-다른 종류의 여러파일과 폼의 내용, 함께 전송가능 (그래서 multipart)

 

form 은 GET 과 POST 만 지원한다.