HTTP 메서드 활용 (클라이언트에서 서버로 데이터 전송)

•  클라이언트에서 서버로 데이터 전송
• HTTP API 설계 예시

클라이언트에서 서버로 데이터 전송(데이터 전달 방식은 크게 2가지)

• 쿼리 파라미터를 통한 데이터 전송
  • GET
  • 주로 정렬 필터(검색어)

URI의 끝에 파라미터를 붙여서 보내는 방식 이 방식은 주로  GET방식에서 많이 사용함. 

주로 검색어를 칠때 게시판 리스트에 정렬 조건을 넣을 때 쿼리파라미터를 많이넣음. 

• 메시지 바디를 통한 데이터 전송 
  • POST, PUT, PATCH
  • 회원 가입, 상품 주문, 리소스 등록, 리소스 변경 

 

클라이언트에서 서버로 데이터 전송 (4가지 상황)

• 정적 데이터 조회 
  • 이미지, 정적 텍스트 문서
• 동적 데이터 조회
  • 주로 검색, 게시판 목록에서 정렬 필터(검색어)
• HTML Form을 통한 데이터 전송
  • 회원 가입, 상품 주문, 데이터 변경
• HTTP API를 통한 데이터 전송
  • 회원 가입, 상품 주문, 데이터 변경
  • 서버 to 서버, 앱 클라이언트, 웹 클라이언트(Ajax)

 

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

=========================================

GET /static/star.jsg HTTP/1.1 

Host: localhost: 8080

=========================================

 

클라이언트에서 서버로 static/star.jpg를 들어가면 start.jpg를 서버는 별 이미지를 클라이언트에게 내려주는 것이다. 

이러한 경우에는 굳이 클라이언트에서 사실 추가적인 데이터를 전달하는게 없다. 

클라이언트가 그냥 단순하게 URI경로만 넣어서 보내면 서버에서 이미지를 쭉 만들어서 클라이언트에게 내려준다. 

 

==========================================

HTTP/1.1 200 OK

Content-Type : image/jpeg

Content-Length : 34012 

lkj123kljoiasudlkjaweioluywinfd912u34ljko98udjkla

slkjdfl;qkawj9;o4ruawsldkal;skdjfa;ow9ejk3123123 

==========================================

 

정적 데이터 조회 정리

• 이미지, 정적 텍스트 문서
• 조회는 GET 사용
• 정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능 

동적 데이터 조회 쿼리 파라미터 사용 

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

 

 

=====================================

GET /search?q=hello&hl=ko HTTP/1.1 

Host: www.google.com  

=====================================

 

위에 있는 요청 메시지를 클라이언트에서 보내면 이를 서버에서 받아서 이걸 서버에서는 Key,Value로 꺼낼 수 있음. 

꺼내가지고 뒷단에서 hello를 찾아서 결과를 응답해준다. 

 

동적 데이터 조회

• 주로 검색, 게시판 목록에서 정렬 필터(검색어)
• 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용
• 조회는 GET 사용
• GET은 쿼리 파라미터 사용해서 데이터를 전달 

GET도 HTTP Method의 스펙상 body에 넣어서 보낼 수 있지만 지원하지 않는 서버가 많음. 

실무에서는 권장하지 않는 방식. 

 

HTMP Form 데이터 전송 POST 전송 - 저장 

<form action = "/save" method = "post>
   <input type = "text" name = "username"/>
   <input type = "text" name = "age" />
</form>

  위에 보이는 name이 중요함. name들을 정해서 전송 버튼 눌르면 웹 브라우저가 form submit버튼을 누르면 form의 데이터를 읽어서 http message를 생성을 해준다. 

어떤 방식으로 생성하냐면 아래와 같이 생성해준다.

 

웹 브라우저가 생성한 요청 HTTP 메시지

=========================================

POST /save HTTP/1.1

Host : localhost:8080

Content-Type : application/x-www-form-urlencoded

username = kim & age = 20

==========================================

 

웹 브라우저가 application/x-www-form-urlencoded라는 컨텐트타입으로 보낸다.  

쿼리파라미터랑 유사한 형식으로 데이터 형식을 만들고 이거를 HTTP Body에 딱 넣어준다. 

POST는 HTTP Body가 있어야함. 

쿼리파라미터와 비슷한 방식으로 데이터가 넘어옴. 

그러고 요런 형식의 컨텐트 타입으로 웹만한 웹서버들은 나올 수 있음. 파싱해서 사용할 수 있음.  

 

HTML form에서 데이터를 전송할 때, 이 메서드를 GET으로 바꿀 수 있음. POST만 되는게 아니라 GET으로 바꿀 수 있음. 

이것이 어떻게 되냐면 웹브라우저가 당연하게 애를 GET메서드로 바꾼다. 

<form action = "/save" method = "get">
    <input type = "text" name = "username" />
    <input type = "text" name = "age" />
    <button type = "submit"> 전송 </button>
</form>

GET전송

============================================

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

Host:localhost:8080

=============================================

 

get이니깐 parameter로 보내줌. body에다가 넣어주지않음. 

URL 경로에다가 넣어줌. 

주의! GET은 조회에만 사용!

리소스 변경이 발생하는 곳에 사용하면 안된다. 

 

 

 

HTML Form 데이터 전송 multipart/form-data 

<form action = "/save" method = "post" enctype = "multipart/form-data">
     <input type="text" name = "username" />
     <input type= "text" name = "age" />
     <input type = "file" name = "file1" />
     <button type="submit"> 전송 </button>
 </form>

파일 같은 것을 전송할 때 사용하는 enctype이 있음. 그게 바로 multipart/form-data이다. 

username age 뿐만아니라 바이트파일도 같이 전송해주어야 한다. 

 

 

웹 브라우저가 생성한 요청 HTTP 메시지

=============================================

POST /save HTTP/1.1 

Host: localhost:8080

Content-Type : multipart/form-data; boundary=-----XXX

Content-Length: 10457

 

-------XXX

Content-Disposition: form-data; name="username"

 

kim 

 

--------XXX

Content-Disposition: form-data; name="age"

 

 

20

---------XXX

Content-Disposition: form-data; name="file1"; filename="intro.png"

Content-Type: image/png 

 

109238a9i0p3eqwokjasd09ou3oirjwoe9u3 

=================================================

 

여기서 boundary라는 것이 Content-Type에 들어가서 ----XXX를 기준으로 짜른다. 

웹브라우저가 자동으로 만들어준다.  웹브라우저가 랜덤으로 이런걸 다 만들어줌. 

 

이렇게해서 여러개 멀티로 여러개타입에 대한 데이터로 보내줄 수 있다. 

애네들은 주로 바이너리 데이터를 전송할 때 사용한다. 

 

HTML Form 데이터 전송 정리 

• HTML Form submit시 POST 전송
  • 예) 회원 가입, 상품 주문, 데이터 변경
• Content-Type: application/x-www-form-urlencoded 사용 
  • form의 내용을 메시지 바디를 통해서 전송(key=value, 쿼리 파라미터 형식)
  • 전송 데이터를 url encoding 처리 
• 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" : "young",

     "age" : 20

}

===============================================

 

HTTP API 데이터 전송 정리

 

• 서버 to 서버 
  • 백엔드 시스템 통신
• 앱 클라이언트
  • 아이폰, 안드로이드
• 웹 클라이언트
  • HTML에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용(AJAX)
  • 예) React, VueJs 같은 웹 클라이언트와 API 통신
• POST, PUT, PATCH: 메시지 바디를 통해 데이터 전송
• GET: 조회, 쿼리 파라미터로 데이터 전달 
• Content-Type: application/json을 주로 사용(사실상 표준)
  • TEXT, XML, JSON 등등