[꼼꼼한 개발자] 꼼코더

16. 모든 개발자를 위한 HTTP 웹 기본 지식 - [HTTP 메서드 활용] - 클라이언트에서 서버로 데이터 전송 본문

HTTP

16. 모든 개발자를 위한 HTTP 웹 기본 지식 - [HTTP 메서드 활용] - 클라이언트에서 서버로 데이터 전송

꼼코더 2022. 11. 15. 11:13
반응형

🧑🏻‍🏫 데이터 전달 방식

데이터 전달 방식은 크게 2가지 경우로 나뉜다.

  • 1) 쿼리 파라미터를 통한 데이터 전
    • 주로 GET 방식으로 많이 사용
    • 검색어로 검색할 때, 게시판 리스트에 정렬 조건을 넣을 때 쿼리 파라미터를 이용해서 많이 사용.
  • 2) 메시지 바디를 통한 데이터 전송
    • POST, PUT, PATCH
    • 회원 가입, 상품 주문, 리소스 등록, 리소스 변경
    • 클라이언트에서 서버로 전송할 때 HTTP 메시지 바디를 통해서 데이터를 전송한다.
    • POST, PUT, PATCH 방식으로 주로 사용한다.
    • 회원가입을 하려면 클라이언트에서 데이터를 서버로 전송하기 때문에 회원 가입, 상품 주문, 리소스 등록, 리소스 변경할 때 사용한다.

🍀 4가지 상황

1) 정적 데이터 조회

  • 이미지, 정적 텍스트 문서

2) 동적 데이터 조회

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

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

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

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

  • 회원 가입, 상품 주문, 데이터 변경
  • 서버 to 서버, 앱 클라이언트, 웹 클라이언트(Ajax)

🔎 정적 데이터 조회

  • 쿼리 파라미터 미사용

  • 클라이언트에서 /static/star.jpg 를 요청 메시지를 보내면 서버에서 star 이미지를 클라이언트에게 응답해준다.
  • 정적 데이터를 조회할 때는 이미지나 정적 텍스트 문서로 조회하기 때문에 GET으로 사용한다.
  • 일반적으로 쿼리 파라미터 없이 단순한 리소스 경로로 조회가 가능하다.

 

 

 

<정리>

  • 정적 데이터: 이미지, 정적 텍스트 문서
  • 조회: GET 사용

정적 데이터는 보통 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능

🔎 동적 데이터 조회

  • 쿼리 파라미터 사용

  • 구글에서 검색 시 검색어나 추가 조건을 데이터를 전달 할 때 쿼리 파라미터들을 사용해서 서버에게 요청한다.
  • 쿼리 파라미터를 가지고 서버에서 key와 value를 볼 수 있다.
  • 서버는 그거에 대한 결과를 클라이언트에게 응답한다.
  • 주로 검색을 하거나 게시판 목록에서 정렬하거나 필터할 때 추가 데이터들이 쿼리 파라미터로 요청한다.
  • 조회 조건을 줄여주는 필터 다음에 조회 결과를 정렬하는 정렬 조건에 주로 사용한다.
  • 이것도 조회이기 때문에 GET 방식으로 이용해서 쿼리 파라미터를 사용해서 데이터를 클라이언에서 서버로 전달한다.

🧹  <정리>

  • 동적 데이터: 검색, 게시판 목록에서 정렬 필터(검색어)
  • 조회: GET 사용

동적 데이터는 쿼리 파라미터를 사용해서 조회 가능

🚚 HTML Form을 통한 데이터 전송

🍀 1) POST 전송 - 저장

post method로 된 Form 태그의 submit 버튼을 누르면, 웹 브라우저가 HTML Form의 데이터를 읽어서 HTTP 요청 메시지를 생성해준다.

  • message-body에 key-value 형태로 form 의 데이터를 넣음

서버가 POST 메시지를 받으면 데이터를 저장한다.

 

🍀 2) GET 전송 - 저장

get method로 된 Form 태그의 submit 버튼을 누르면, 웹 브라우저가 HTML Form의 데이터를 읽어서 HTTP 요청 메시지를 생성해준다.

  • 쿼리 파라미터에 key-value 형태로 form 의 데이터를 넣음

하지만 GET은 조회에서만 사용해야 한다. 리소스 변경이 발생하는 곳에서 사용하면 안된다!

 

🍀 3) GET 전송 - 조회

get method로 된 Form 태그의 submit 버튼을 누르면, 웹 브라우저가 HTML Form의 데이터를 읽어서 HTTP 요청 메시지를 생성해준다.

  • 쿼리 파라미터에 key-value 형태로 form 의 데이터를 넣음

서버가 GET 메시지를 받으면 데이터를 필터링(조회)한 결과를 응답한다.

 

🍀 4) multipart/form-data

multipart/form-data는 파일(binary data)을 전송할 때 쓰는 인코딩 타입이다.

HTML Form 태그의 enctype="multipart/form-data"로 설정하고 submit 버튼을 누르면 웹 브라우저가 username, age, file1 데이터를 분리하여 message-body에 담아 HTTP 요청 메시지를 생성해준다.

🧹 <HTML Form 데이터 전송 정리>

1) HTML Form submit 시 POST 전송

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

▶ Content-Type: application/x-www-urlencoded 사용시

  • 디폴트: form의 내용을 message-body에 담아 전송(key=value, 쿼리 파라미터 형식)
  • 전송 데이터를 url encoding 처리
  • → abc김 → abc%EA%B9%80

▶ Content-Type: multipart/form-data 사용시

  • 파일 업로드 같은 바이너리 데이터 전송시 사용
  • 다른 종류의 여러 파일과 폼의 내용 함께 전송O

2) HTML Form submit 시 GET 전송

  • form의 내용을 쿼리 파라미터에 담아 전송

(참고) HTML Form 전송은 GET, POST 만 지원!! 다른 메서드들은 자바스크립트의 이벤트 핸들러를 통해 처리해야 한다.

 

 

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

  • 클라이언트에서 HTTP API로 서버로 데이터를 전송하는데 직접 만들어서 전송하면 된다.
  • 클라이언트에 /members가 있고 Content-Type에 application/json으로 데이터 전송하면 된다.

 

 

 

 

🧹 <HTTP API 데이터 전송 정리>

1) 서버 to 서버

  • 백엔드 시스템 통신

2) 앱 클라이언트

  1. 아이폰, 안드로이드

3) 웹 클라이언트

4) POST, PUT, PATCH : 메시지 바디를 통해 데이터 전송

  • HTML 에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용(AJAX)
    → React, VueJs 같은 웹 클라이언트와 API 통신

5) GET : 조회, 쿼리 파라미터로 데이터 전달

6) Content-Type: application/json을 주로 사용(사실상 표준)

  • TEXT, XML, JSON 등등

🙋🏻‍♂️ Q&A

Q. HTTP Form과 HTTP API의 차이점은?

 

A. 먼저 응답 결과로 무엇을 전달받느냐에 따라 크게 2가지로 나눌 수 있다.

  1. HTML 을 전달받는 것
  2. 데이터를 전달받는 것

HTTP API는 응답결과로 HTML이 아닌 데이터를 전달받는 것을 말한다.

 

[출처] https://www.inflearn.com/questions/137287

Q. GET으로 게시판 글 조회를 할 때 글 조회수가 올라가도록 구현하는 것이 멱등성을 위반하게 되는 것 인가요? 그러면 GET이 아닌 POST로 구현해야하나요?

 

A.  이런 부분이 조금 모호하기는 하지만, 이런 경우엔 GET을 사용하는 것이 맞다.

조회수가 올라가는 부분이 게시글 자체의 리소스를 변경하는 것은 아니기 때문이다.

애플리케이션 내부의 로그를 남기는 부분에서 GET을 사용하는 것도 모두 허용된다.

 

[출처] https://www.inflearn.com/questions/249897

Q. HTML Form 태그를 사용해서 데이터 수정을 해야할 떄는 어떻게 해야 하나요?

 

A. (출처 참고)

 

[출처] https://www.inflearn.com/questions/343678

 

참고 : https://hseungyeon.tistory.com

 

위 자료는 김영한님의 ‘모든 개발자를 위한 HTTP 웹 기본 지식’ 강의를 참고하여 작성하였습니다.
https://www.inflearn.com/course/http-웹-네트워크/dashboard

'HTTP' 카테고리의 다른 글

18. 모든 개발자를 위한 HTTP 웹 기본 지식 - [HTTP 상태코드] - HTTP 상태코드 소개, 1xx  (0) 2022.11.15
17. 모든 개발자를 위한 HTTP 웹 기본 지식 - [HTTP 메서드 활용] -HTTP API 설계 예시  (0) 2022.11.15
15. 모든 개발자를 위한 HTTP 웹 기본 지식 - [HTTP 메서드] - HTTP 메서드의 속성  (0) 2022.11.15
14. 모든 개발자를 위한 HTTP 웹 기본 지식 - [HTTP 메서드] - PUT, PATCH, DELETE  (0) 2022.11.15
13. 모든 개발자를 위한 HTTP 웹 기본 지식 - [HTTP 메서드] - GET, POST  (0) 2022.11.12
'HTTP' Related Articles more
Comments