(인프런) 김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식을 공부하고 리뷰한 글입니다.
1. 클라이언트에서 서버로 데이터 전송
1. 데이터 전달 방식
데이터 전달 방식은 크게 2가지 경우로 나뉜다.
1) 쿼리 파라미터를 통한 데이터 전송
- GET
- 주로 정렬 필터(검색어)
2) 메시지 바디를 통한 데이터 전송
- POST, PUIT, PATCH
- 회원 가입, 상품 주문, 리소스 등록, 리소스 변경
2. 4가지 상황
1) 정적 데이터 조회
- 이미지, 정적 텍스트 문서
2) 동적 데이터 조회
- 주로 검색, 게시판 목록에서 정렬 필터(검색어)
3) HTML Form을 통한 데이터 전송
- 회원 가입, 상품 주문, 데이터 변경
4) HTTP API를 통한 데이터 전송
- 회원 가입, 상품 주문, 데이터 변경
- 서버 to 서버, 앱 클라이언트, 웹 클라이언트(Ajax)
3. 정적 데이터 조회
<쿼리 파라미터 미사용>
<정리>
- 정적 데이터: 이미지, 정적 텍스트 문서
- 조회: GET 사용
정적 데이터는 보통 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능
4. 동적 데이터 조회
<쿼리 파라미터 사용>
<정리>
- 동적 데이터: 검색, 게시판 목록에서 정렬 필터(검색어)
- 조회: GET 사용
동적 데이터는 쿼리 파라미터를 사용해서 조회 가능
5. 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 처리
e.g. 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 데이터 전송 정리>
1) 서버 to 서버
- 백엔드 시스템 통신
2) 앱 클라이언트
- 아이폰, 안드로이드
3) 웹 클라이언트
- HTML 에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용(AJAX)
e.g. React, VueJs 같은 웹 클라이언트와 API 통신
4) POST, PUT, PATCH: 메시지 바디를 통해 데이터 전송
5) GET: 조회, 쿼리 파라미터로 데이터 전달
6) Content-Type: application/json을 주로 사용(사실상 표준)
- TEXT, XML, JSON 등등
5-1. 클라이언트에서 서버로 데이터 전송 질문 정리
Q. HTTP Form과 HTTP API의 차이점은?
먼저 응답 결과로 무엇을 전달받느냐에 따라 크게 2가지로 나눌 수 있다.
1) HTML 을 전달받는 것
2) 데이터를 전달받는 것
HTTP API는 응답결과로 HTML이 아닌 데이터를 전달받는 것을 말한다.
[출처] https://www.inflearn.com/questions/137287
Q. GET으로 게시판 글 조회를 할 때 글 조회수가 올라가도록 구현하는 것이 멱등성을 위반하게 되는 것 인가요? 그러면 GET이 아닌 POST로 구현해야하나요?
이런 부분이 조금 모호하기는 하지만, 이런 경우엔 GET을 사용하는 것이 맞다.
조회수가 올라가는 부분이 게시글 자체의 리소스를 변경하는 것은 아니기 떄문이다.
애플리케이션 내부의 로그를 남기는 부분에서 GET을 사용하는 것도 모두 허용된다.
[출처] https://www.inflearn.com/questions/249897
Q. HTML Form 태그를 사용해서 데이터 수정을 해야할 떄는 어떻게 해야 하나요?
[출처] https://www.inflearn.com/questions/343678
'Spring > 모든 개발자를 위한 HTTP 웹 기본 지식' 카테고리의 다른 글
| [모든 개발자를 위한 HTTP 웹 기본 지식] 06. HTTP 상태코드 - HTTP 상태코드 소개, 2xx(성공) (0) | 2022.06.02 |
|---|---|
| [모든 개발자를 위한 HTTP 웹 기본 지식] 05. HTTP 메서드 활용 - HTTP API 설계 예시 (0) | 2022.05.30 |
| [모든 개발자를 위한 HTTP 웹 기본 지식] 04. HTTP 메서드 - HTTP 메서드의 속성 (0) | 2022.05.30 |
| [모든 개발자를 위한 HTTP 웹 기본 지식] 04. HTTP 메서드 - PUT, PATCH, DELETE (0) | 2022.05.30 |
| [모든 개발자를 위한 HTTP 웹 기본 지식] 04. HTTP 메서드 - GET, POST (0) | 2022.05.29 |
