HTTP 웹 기본 지식 - 클라이언트에서 서버로 데이터 전송

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

HTTP 메서드 활용에 대해서 알아볼 것이다.

클라이언트에서 서버로 데이터를 전송하는 예를 알아보고,

HTTP API를 설계할 때 어떤식으로 하면 좋은지 예시를 알아보자.

클라이언트에서 서버로 데이터를 전송할 때 어떻게 할까?
데이터 전달 방식은 크게 2가지 이다.

• 쿼리 파라미터를 통한 데이터 전송
  • GET
  • 주로 정렬 필터(검색어)
    • 예를 들어서 구글에 검색 할때 q = hello 같은 경우..가 있다.
• 메시지 바디를 통한  데이터 전송
  • POST, PUT, PATCH
  • 회원 가입, 상품 주문, 리소스 등록, 리소스 변경

 

클라이언트에서 서버로 데이터를 전송하는 상황을 4가지 예시를 통해서 알아보자.

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

먼저, 정적 데이터를 조회하는 예시이다.

예를 들어, 클라이언트에서 서버로 GET요청으로 /static/star.jpg 라고 요청하면,

서버에서는 /static/star.jpg에 있는 별 이미지를 클라이언트에게 내려준다.
이런 경우에는,  사실 클라이언트가 서버에 추가적인 데이터를 전달하는 것이 없다.

그냥 단순하게 URI경로만 넣어서 요청하는 것이다.
그러면 서버에서 해당 경로의 리소스를 클라이언트에게 내려준다.

그래서 이미지, 정적 텍스트 문서같은 경우에는 조회는 GET을 사용한다.

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

데이터를 조회할 때, 클라이언트가 서버에 데이터를 전달해서 요청해야 하는 경우가 있다.

동적 데이터를 조회할 때가 그렇다.

구글에 어떤 정보를검색 할때,
q = hello&hl=ko 처럼 동적 데이터를 조회할 때는, 쿼리 파라미터를 사용한다.

그래서 HTTP 요청메시지를 만들 때, 쿼리 파라미터를 사용해서 만든다.

해당 HTTP 요청 메시지가 서버에 전달이 되면,

서버는 이것을 받아서 쿼리 파라미터를 기반으로 key value로 꺼내서,
"쿼리 언어가 hello라고 나왔군!"하고서 서버의 뒷단에서 hello로 데이터를 찾는 여러가지 일들이 벌어질 것이다.
그리고 hello에 맞는 결과를 찾아서 해당 결과를 클라이언트에게 응답하게 된다.

동적 데이터 조회 를 정리해보면,

• 주로 검색, 게시판 목록에서 정렬 필터(검색어)를 할때 쿼리 파라미터가 추가 데이터로 넘어간다.
• 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용한다.
• 조회는 GET을 사용
• GET은 쿼리 파라미터를 사용해서 클라이언트에서 서버로 데이터를 전달.

 

이번에는 HTML Form을 가지고 데이터를 전송하는 예시를 살펴보자.

username 은 kim, 그리고 age는 20을 전송하고 싶다면,

form태그를 쓰고, action은 /save, method은 post로 (/save라는 곳에 저장이 된다고 가정),
input type은 text로 하고, name 은 "username", name은 "age"로 해서 전송 버튼을  만들어서 누르면,

이게 어떻게 되냐면, form submit 버튼을 누르면, form태그의 데이터를 읽어서 HTTP 메시지를 생성해준다.

어떤식으로 생성해주냐면,
POST/save HTTP/1.1
Host:localhost:8080
Content-Type: application/x-www.-form-urlencoded

username=kim&age=20

이런식으로 생성해준다.

Content-Type은 apllication/x-www-form-urlencoded라는  컨텐트타입으로 보낸다.

컨텐트타입 apllication/x-www-form-urlencoded 은 뭐냐면, username=kim&age=20 이렇게 거의 쿼리파라미터와 유사한 형식(key value 스타일로)이고, 이렇게 쿼리 파라미터와 거의 유사한 형식으로 데이터를 만들고 http메시지 바디에 넣는다.

그다음 서버에 들어오면 데이터를 저장 할 것이다.

그런데 HTML Form 으로 데이터를 전송할 때, method가 post가 아니라 get으로 바꿀 수도 있다.
get으로 바꿔서 전송 버튼을 누르면, 웹브라우져가 어떻게 하냐면
당연히 웹브라우저가 생성한 요청 HTTP 메시지를 GET메서드로 바꾼다.

GET이니까 메시지 바디를 사용하지 않고, username=kim&age=20을 쿼리파라미터에 넣어버린다.

그다음 서버에 전달한다.

 

우리가 URL에 직접 쳐도 되지만, form태그에 자료를 입력하고 버튼을 눌러도 이것을 post면 메시지 바디에 넣어주고,
get이라고 표현이 되어 있으면 url경로에 쿼리파라미터로 넣어준다.

 

예시를 이렇게 들긴 했지만,위의 예시처럼 뭔가를 저장하는데 GET을 사용하면 안된다.
GET은 조회에만 사용해야 한다!!!!  GET은 조회에만 사용해야 한다는 것을 이야기하기위해 save에다가 예시를 들고 언급한 것이다. 예시는 예시로 알아두자!!

 

GET같은 경우에는 이렇게 회원을 조회하는데에 사용하면 된다.

이름이 kim이고 나이가 20살인 데이터를 조회할 수 있을 것이다.

 

그리고, HTML Form 데이터 전송에서 파일같은 것을 전송할 때 사용하는 Content-Type이 있다.

multipart/form-data 라는 Content-Type이다.

username은 kim이고 age는 20인데, 사진을 같이전송을 해야한다고 가정해보자.

username, age뿐만 아니라 바이트로 되어있는 파일까지 같이 전송해야하는 상황이다.

이럴 때는 multipart/form-data 라는 HTTP메시지 바디에 넣는 데이터 형식을 사용해야 한다.

이렇게 enctype을 multipart/form-data로 사용하면, 웹브라우저가 HTTP 요청 메시지를 어떻게 만들어주냐면,

ContentType:multipart/form-data 로 들어가고, boundary를 가지고 자른다.

boundary가 ----XXX를 경계로 자동으로 경계를 잘라준다. 웹브라우저가 해준다.

주로 Binary data를 전송할 때 사용한다.

HTML Form 데이터를 전송하는 것을 정리를 해보면,

 

• 먼저 HTML Form submit 시 POST 전송
  
  • 예) 회원 가입, 상품 주문, 데이터 변경
• Content-Type:application/x-www-form-urlencoded 사용
  • form의 내용을 메시지 바디를 통해서 전송(key=value, 쿼리 파라미터 형식)
  • 전송 데이터를 url encoding 처리
    • 예) abc김 → abc%EA%B9%80 (한글을 인코딩 ex utf-8)
• HTML Form은 GET 전송도 가능 (GET은 조회할 때만 사용)
• Content-Type:multipart/form-data
  • 파일 얼보드 같은 바이너리 데이터 전송시 사용
  • 다른 종류의 여러 파일과 폼의 내용 함께 전송 가능(그래서 이름이 multipart)
• 참고 HTML Form 전송은 GET, POST만 지원

 

이번에는 HTTP API 데이터 전송에 대해서 살펴보자.

예를 들어서, 안드로이드나 아이폰 애플리케이션에서 클라이언트에서 서버로 데이터를 바로전송해야한다고 가정해보자.
이러한 경우에는 "HTTP API로 데이터를 전송한다" 라고 표현한다.

그냥 내가 직접 HTTP요청 메시지를 다 만들어서 넘기면 된다.

보통은, 클라이언트에 라이브러리들이 다 있어서 해준다.

POST/members HTTP/1.1
Content-Type: application/json

{
"username": "young",
"age":20
}

이런식으로 key value 형태의 jason데이터를 넣고
Content-Type에 application/json이라고하고 데이터를 넘기면 된다. 물론 다른 타입이면 그에 맞게 바꾸면 된다.

HTTP API 데이터 전송은

• 서버 to 서버처럼 백엔드 서버끼리 통신할 때 많이 사용한다.
  왜냐하면 서버끼리 통신할 때는 HTML같은게 전혀 없기 때문이다.
• 앱 클라이언트에서도 많이 사용한다.(아이폰, 안드로이드)
• 웹 클라이언트도 많이 사용하는데, HTML에서 Form을 전송하는게 아니라 자바 스크립트를 통한 통신에 사용한다.(AJAX통신) 요즈음에 React, VueJs 같은 웹 클라이언트와 API 통신
• POST, PUT, PATCH 같은 메시지 바디를 통해 데이터 전송할 수 있다.
• GET: 조회, 쿼리 파라미터로 데이터 전달 가능
• Content-Type: application/json을 주로 사용 (사실상 표준)
  • TEXT, XML, JSON 등등 (예전에는 XML이 많이 사용되었지만, 최근에는 JSON을 주로 사용한다.)