HTTP 메서드 3. 메서드 활용

🙌 이전 포스팅 참고

📜 클라이언트에서 서버로 데이터 전송하는 방법에 대해 알아보자.

📕 데이터 전달 방식

데이터 전달방식 크게 두가지로 나뉜다.

1. 쿼리 파라미터를 통한 데이터 전송 (GET)
	- 조회, 검색, 정렬필터 등
2. 메시지 바디를 통한 데이터 전송 (POST, PUT, PATCH)
	- 그 외 전 ~~~ 부

📕 (클라이언트→서버) 데이터 전달 상황 Case 4가지

1. 정적 데이터조회 (GET)
2. 동적 데이터조회 (GET)
3. HTML Form을 통한 데이터전송 (POST, GET) --> 무조건 POST, GET만 가능
4. HTTP API를 통한 데이터전송 (전부 가능 : POST, GET, PUT, PATCH)

📖 예시보기

1. 정적 데이터 조회
	- 이미지 조회
    - 텍스트문서 조회
2. 동적 데이터 조회
	- 검색
    - 정렬필터 (가격낮은순, 색깔 검정색만 등..)
3. HTML Form을 통한 데이터전송
	- 회원가입
    - 상품주문
    - 데이터 변경
4. HTTP API를 통한 데이터전송
	- 회원가입
    - 상품주문
    - 데이터 변경
    - 서버 to 서버
    - 앱클라이언트, 웹클라이언트

📕 CASE 1. 정적 데이터 조회 (GET)

📖 특징

1. 리소스 경로만 넣어 단순하게 조회가능
2. 쿼리 파라미터 미사용
3. GET 사용

📖 Request 메시지

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

📖 Response 메시지

/static 경로에서 star.jpg 탐색

HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: 34012

asdfasjghkhasdghjla2312k;daksdks;lad;ljl
fkadsglaj422ljksdlfkjlsakfj1231441253123

📕 CASE 2.동적 데이터 조회 (GET)

📖 특징

1. 쿼리파라미터 필수로 사용
2. GET 사용
3. 조회 조건, 정렬 조건 등에 사용 (쿼리파라미터를 통해 조건을 전달)

📖 URI 경로

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

구글에서 "검색어:hello 언어:한국어" 검색한결과

📖 Request 메시지

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

📖 Response 메시지

쿼리파라미터를 기반으로 정렬 및 필터하여 결과를 동적으로 생성

📕 CASE 3. HTML Form 데이터 전송 (POST, GET)

HTML 형태로 데이터를 작성하여 전달

보통 웹페이지에서 작성란에 기입하여 확인/전송 버튼을 누르면 HTML Form 형태로 전송

📖 POST 전송

1. 사용자가 확인/전송 버튼을 눌러 생성된 HTML Form

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

2. 전달받은 HTML Form을 사용하여 전송을 위한 Request 메시지가 생성됨

POST /save HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded

username=kim&age=20

위에서 application/x-www-form-urlencoded 는
메시지 바디로 전송될 데이터가 한글데이터가 있을경우 인코딩됨을 의미

📖 POST로 파일 전송할경우?

<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>

위 HTML Form은 동일하게 전송을 위해 Request 메시지가 생성되며
해당 Request 메시지는 필드별로 분리된 형태를 띄게된다.

📖 GET 전송 : GET은 무조건 데이터조회에만 사용해야한다.

1. 사용자가 확인/전송 버튼을 눌러 생성된 HTML Form

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

2. 전달받은 HTML Form을 사용하여 전송을 위한 Request 메시지 생성됨

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

📕 CASE 4.HTTP API 데이터 전송

HTTP API를 통한 데이터 전송은 사용자가 직접 HTTP 메시지를 생성해서 보내는 것

물론 HTTP 메시지 생성하는데 필요한 라이브러리들이 존재하기에, 사용해서 만들면된다.

📖 POST/PUT/PATCH 사용할경우 Body에 담아 보낸다.

POST /members HTTP/1.1
Host: localhost:8080
Content-Type: application/json

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

📖 GET을 사용할경우 URL에 담아 보낸다.

GET /members?username=young&age=20 HTTP/1.1
Host: localhost:8080
Content-Type: application/json

📖 특징

1. Content-Type 은 보통 application/json 사용
   • 보통이라 말했지만 거의 전부 json 사용
   • 그 외 양식 : XML, TEXT
2. 사용되는 곳
   • 보통 서버사이의 통신에 사용된다.
     - 왜냐하면 서버끼리에는 HTML 같은게 전혀 없다....(?) 그런가?
   • 앱 어플리케이션 (안드로이드, ios)에 사용
   • 웹 어플리케이션에서 사용
     - HTML Form 전송 대신 자바스크립트를 통한 통신에 사용 (AJAX 라고 함)
     • React, Vuejs 같은 웹클라이언트 통신을 의미

📕 POST와 PUT의 차이점

POST - 컬렉션 기반

1. 클라이언트가 등록될 리소스의 URI를 모름
2. 서버가 새로 등록된 리소스 URI를 생성해줌.
3. 컬렉션 방식이다.
	- 서버가 관리하는 리소스 디렉토리를 컬렉션이라한다.
    - 서버가 리소스의 URI를 생성하고 관리
    - 여기서 컬렉션은 /members

PUT - 스토어 기반

1. 클라이언트가 등록된 리소스 URI를 알고있다.
	- PUT /files/image/star.jpg
2. 클라이언트가 직접 리소스의 URI를 지정한다.
3. 스토어 방식이다.
	- 클라이언트가 관리하는 리소스 저장소를 스토어라고한다.
    - 클라이언트가 리소스의 URI를 알고 관리
    - 여기서 스토어는 /files

---

📚Reference

본 포스팅은 인프런-김영한 님의 모든 개발자를 위한 HTTP 웹 기본 지식 내용을 토대로 작성하였습니다. 진짜 강의도 너무 좋고 강의 타임도 짧은데다, 저렴하니 들어보면 좋을거같습니다.