Today I Learned_220830

HTTP

인프런 HTTP 강의 수강

HTTP 메서드 활용

개발할 때 HTTP 메서드가 어떻게 활용되는가?

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

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

데이터 전달 방식

1. 쿼리 스트링을 통한 데이터 전송
   1. GET에 많이 사용
   2. 주로 검색어, 게시판 리스트에 정렬 조건을 넣을 때 많이 사용
2. 메시지 바디를 통한 데이터 전송
   1. 데이터를 클라이언트에서 서버로 전송
   2. POST, PUT, PATCH
   3. 회원 가입, 상품 주문, 새로운 리소스 등록, 리소스 변경

클라이언트에서 서버로 데이터로 전송하는 것은 크게 네 가지 상황이 존재한다.

1. 정적 데이터 조회
2. 동적 데이터 조회
3. HTML Form을 통한 데이터 전송
4. HTTP API를 통한 데이터 전송

정적 데이터 조회

클라이언트 -> 서버 request message

GET /static/star.jpg HTTP/1.1
Host: localhost:8080

서버 -> 클라이언트 response message

HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: 34012
lkj123kljoiasudlkjaweioluywlnfdo912u34ljko98udjkla
slkjdfl;qkawj9;o4ruawsldkal;skdjfa;ow9ejkl3123123

• 이미지, 정적 텍스트 문서를 조회하는 상황으로, 주로 GET을 사용한다.
• 정적 데이터는 일반적으로 쿼리 스트링 없이 리소스 경로로 단순하게 조회가 가능하다.

동적 데이터 조회

클라이언트 -> 서버 request message

GET /search?q=hello&hl=ko HTTP/1.1
Host: www.google.com

• 서버에서 쿼리 스트링을 기반으로 정렬 필터를 하여 결과를 동적으로 생성
• 주로 검색, 게시판 목록에서 정렬하거나 필터를 걸 때 사용
• 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용
• 주로 GET 사용하며 쿼리 스트링을 사용해서 데이터를 전달함
  • GET도 body를 통해 데이터를 전달할 수 있으나, 지원하지 않는 서버가 있을 수 있기에 권장하지는 않음

HTML Form을 통한 데이터 전송

html form

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

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은 클라이언트와 서버가 약속되어 있으며, 웬만한 서버는 content-type을 파싱해서 쓸 수 있도록 되어 있다.

form 전송 시에도 get을 사용할 수는 있다.

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

이 경우 웹 브라우저가 생성하는 Http 메시지는 아래와 같다

GET /members?username=kim&age=20 HTTP/1.1
Host: localhost:8080

• body가 아니라 쿼리 스트링으로 값을 전달하는 것을 확인할 수 있다.
• url에 직접 입력해도 되지만, GET으로 전달하면 url 경로에 쿼리 스트링으로 전달한다.
• GET은 조회에서만 사용해야 하고, 리소스 변경이 발생하는 곳에 사용하면 안 된다 -> 조회할 때 사용

multipart/form-data 주로 바이너리 데이터를 전송할 때 사용하는 인코딩 데이터.

메시지 바디에 넣는 데이터 형식. 텍스트와 바이트로 되어 있는 파일들을 같이 전송

웹 브라우저가 boundary를 만들어서 자동으로 자른다. 경계를 자기 마음대로 자른다.

여러개 멀티로 여러 타입에 대한 데이터를 보낼 수 있다.

cf) 기본은 application/x-www-form-urlencoded -> 한글같은것이 들어가면 인코딩이 되어 넘어간다.

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
109238a9o0p3eqwokjasd09ou3oirjwoe9u34ouief...

맨 마지막에는 – 가 붙는다.

HTML Form 전송은 GET, POST만 지원한다.

PUT, DELETE는 안된다!

HTTP API를 통한 데이터 전송

웹 브라우저를 통한 것이 아니라 클라이언트에서 서버로 데이터를 바로 전송하는 것 -> request 메시지를 직접 만들어서 넘기면 된다.

POST /members HTTP/1.1
Content-Type: application/json
{
"username": "young",
"age": 20
}

• application/json : 데이터를 json 형태로 보내겠다는 뜻

사용하는 곳

• 서버 - 서버
  • 서버끼리 통신할 때는 html이 없기 때문
  • 기계끼리 통신하는 것
• 앱 클라이언트(iOS, AND)에서 서버로 전송할 때
• 웹 클라이언트
  • HTML에서 form 전송 대신 javascript를 통한 통신에 사용 -> AJAX
  • react, vue 등

사용 가능한 요소

• POST, PUT, PATCH : 메시지 바디를 통해 데이터 전송
• GET : 조회할 때는 쿼리 파라미터로 데이터 전달하는것이 좋다.
• Content-Type : application/json을 주로 사용 (사실상 표준)
  • json이 크기가 작고 이해하기 쉬우므로 사실상 표준이다.
  • 이외에도 text, xml, json 등이 존재한다.