Skip to content

Latest commit

 

History

History
141 lines (99 loc) · 6.39 KB

5. HTTP 메서드 활용.md

File metadata and controls

141 lines (99 loc) · 6.39 KB

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

쿼리 파라미터를 통한 데이터 전송

:GET 에서 많이 사용하고 정렬필터나 검색어를 사용할 때 이 쿼리 파라미터를 많이 사용한다.

메시지 바디를 통한 데이터 전송

: POST, PUT, PATCH에서 사용되며 회원 가입, 상품 주문과 같이 리소스를 등록하거나 변경하는데에 사용한다.

클라이언트에서 서버로 데이터를 전송하는 4가지 상황

1. 정적 데이터 조회

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

2. 동적 데이터 조회

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

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

  • 쿼리 파라미터를 사용한다.

  • 서버에서는 쿼리 파라미터를 기반으로 필터나 검색 결과 등 처리 결과를 응답해준다.

  • 조회는 GET을 사용한다.

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

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

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

[POST 전송 저장]

  • 웹 브라우저는 submit 버튼을 누르면 Form 태그의 정보를 취합해 action에 작성된 경로로 해당 method 타입의 요청을 하게 되는데, Content-Type을 보면 x-www-form-urlencoded 라고 되어있다.
  • 쿼리 파라미터와 거의 동일한 방식으로 서버에 전송된다. ⇒ username=kim&age=20
  • urlencoded로 되있어서 body에 담긴 내용에서 한글처럼 담긴 내용이 인코딩되어 넘어간다.
  • 만약 method타입이 get으로 되어있다면 메세지 바디에 담겨있는 내용이 query string으로 path 뒤에 조합된다.

[GET 전송 저장]

[GET 전송 조회]

💡파일이나 이미지같은 자료는 어떻게 전송되는가?

  • enctype을 multipart/form-data로 작성해 해당 폼에 파일이 있다는 것을 표시한다.
  • multipart/form-data 형식이라면 HTTP 메세지에 임의의 구분자(boundary=——-XXX) 가 Form 데이터간 구분을 지어준다.
  • 바이너리 데이터 전송시 사용한다.
  • HTML Form 전송은 GET, POST만 지원한다.

HTML Form 데이터 전송 - 정리

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

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

  • 회원 가입, 상품 주문, 데이터 변경을 할 수 있는데 서버to서버, 앱 클라이언트, 웹 클라이언트(Ajax)에서 사용된다.
  • 서버 to 서버
    • 백엔드 시스템 통신
  • 앱 클라이언트
    • 아이폰, 안드로이드
  • 웹 클라이언트
    • HTML 에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용한다(Ajax)
  • POST, PUT, PATCH: 메세지 바디를 통해 데이터 전송
  • GET: 조회, 쿼리 파라미터로 데이터 전달
  • Content-Type: application/json을 주로 사용(사실상 표준)
    • TEXT, XML, JSON 등

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

데이터 전달 방식은 크게 두 가지가 있다.

쿼리 파라미터를 통한 데이터 전송

:GET 에서 많이 사용하고 정렬필터나 검색어를 사용할 때 이 쿼리 파라미터를 많이 사용한다.

메시지 바디를 통한 데이터 전송

: POST, PUT, PATCH에서 사용되며 회원 가입, 상품 주문과 같이 리소스를 등록하거나 변경하는데에 사용한다.

클라이언트에서 서버로 데이터를 전송하는 4가지 상황

1. 정적 데이터 조회

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

2. 동적 데이터 조회

  • 주로 검색, 게시판 목록에서 정렬 필터
  • 쿼리 파라미터를 사용한다.
  • 서버에서는 쿼리 파라미터를 기반으로 필터나 검색 결과 등 처리 결과를 응답해준다.
  • 조회는 GET을 사용한다.
  • GET은 쿼리 파라미터를 사용해서 데이터를 전달한다.

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

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

  • 웹 브라우저는 submit 버튼을 누르면 Form 태그의 정보를 취합해 action에 작성된 경로로 해당 method 타입의 요청을 하게 되는데, Content-Type을 보면 x-www-form-urlencoded 라고 되어있다.

  • 쿼리 파라미터와 거의 동일한 방식으로 서버에 전송된다 ⇒ username=kim&age=20

  • urlencoded로 되있어서 body에 담긴 내용에서 한글처럼 담긴 내용이 인코딩되어 넘어간다.

  • 만약 method타입이 get으로 되어있다면 메세지 바디에 담겨있는 내용이 query string으로 path 뒤에 조합된다.

💡파일이나 이미지같은 자료는 어떻게 전송되는가?

  • enctype을 multipart/form-data로 작성해 해당 폼에 파일이 있다는 것을 표시한다.
  • multipart/form-data 형식이라면 HTTP 메세지에 임의의 구분자(boundary=——-XXX) 가 Form 데이터간 구분을 지어준다.
  • 바이너리 데이터 전송시 사용한다.
  • HTML Form 전송은 GET, POST만 지원한다.

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

  • 회원 가입, 상품 주문, 데이터 변경을 할 수 있는데 서버to서버, 앱 클라이언트, 웹클라이언트(Ajax)에서 사용된다.
  • 서버 to 서버
    • 백엔드 시스템 통신
  • 앱 클라이언트
    • 아이폰, 안드로이드
  • 웹 클라이언트
    • HTML 에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용한다(Ajax)
  • POST, PUT, PATCH: 메세지 바디를 통해 데이터 전송
  • GET: 조회, 쿼리 파라미터로 데이터 전달
  • Content-Type: application/json을 주로 사용(사실상 표준)
    • TEXT, XML, JSON 등