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

해당 포스팅은 김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 바탕으로 작성된 글입니다.

 

 

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

데이터를 전달하는 방식은 크게 2가지로 나뉜다.

Query-Parameter를 통한 데이터 전송

보통 GET 방식에서 많이 사용하고 검색어로 검색할 때 게시판 리스트에 정렬 조건을 넣을 때 쿼리 파라미터를 이용해서 많이 사용한다.

Message-Body를 통한 데이터 전송

HTTP Message Body를 통해서 데이터를 전송한다. 주로 POST, PUT, PATCH 메서드에서 사용한다. 예를 들어 회원가입을 하려면 클라이언트에서 데이터를 서버로 전송해야 한다. 그 다음에 상품을 주문하거나 새로운 리소스를 등록하거나 변경할 때 사용한다.

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

(1) 정적 데이터 조회: 이미지 및 정적 텍스트 문서 조회 (Query-Parameter 미사용)

클라이언트에서 /static/star.jpg를 요청 메세지에 보내게 되면 서버에서 해당 이미지를 클라이언트에게 응답으로 보내준다. 정적 데이터를 조회할 때는 당연히 GET 메서드를 사용할 것이고, 일반적으로 Query-Paramter 없이 단순한 리소스 경로로 조회가 가능하다.

 

(2) 동적 데이터 조회: 검색, 게시판 목록에서의 정렬 옵션 (Query-Parameter 사용)

 

구글에서 검색할 때 검색어나 추가 조건과 같은 데이터를 전달할 때 Query-Parameter를 사용해서 서버에게 요청한다. 서버에서는 전달받은 옵션들로 비즈니스 로직에 추가하여 조회를 할 때 도움을 주고는 한다. 예를 들어 게시판 목록을 정렬하거나 필터링할 때의 옵션을 Query-Paramter로 전달할 수 있고 서버측에서는 옵션을 게시판 목록을 조회하는 쿼리문에 적용할 수 있을 것 같다. 위와 마찬가지로 조회 기능이기 때문에 당연히 GET 메서드를 사용할 것이다.

 

(3) HTML Form을 통한 데이터 전송: 회원가입, 상품 주문 등 (POST 전송 - 저장)

 

form 태그에서 action은 /save, method는 post, username form과 age form 그리고 전송 버튼을 만들고 버튼을 누르게 되면 데이터를 읽어서 HTTP Message를 생성하게 된다. Query-Parameter와 유사하게 key-value 구조로 body에 데이터를 넣고 POST 메서드로 서버에 데이터와 함께 요청을 보내게 된다. 이후 서버에서는 데이터의 유효성 확인 등의 절차를 거치고 데이터를 DB에 저장할 것이다.

 

(4) HTML Form을 통한 데이터 전송: GET을 통한 저장

 

GET 메서드로 된 form 태그의 submit을 누르게 되면 웹 브라우저에서 HTML Form의 데이터를 읽어서 HTTP 요청 메세지를 생성해준다. 이 때 query-parameter에 key-value 형태로 form의 데이터를 넣어주게 되는데 참고로 GET은 조회에서만 사용해야 한다. 리소스 변경이 발생하는 곳에서 사용하면 안된다.

 

(5) HTML Form을 통한 데이터 전송: GET을 통한 조회

 

GET으로 구성된 Form 태그의 submit 버튼을 누르게 되면 웹 브라우저에서 HTML Form 데이터를 읽어서 HTTP 요청 메세지를 생성해준다. 쿼리 파라미터에 key-value 형태로 form의 데이터를 넣어주고 서버가 GET 메세지를 받게 되면 데이터를 필터링한 결과를 응답해준다.

 

(6) HTML Form을 통한 데이터 전송: Multipart/form-data

 

multipart/form-data는 파일(binary data)을 전송할 때 쓰는 encoding type이다. HTML Form 태그의 enctype="multipart/form-data"로 설정하고 submit 버튼을 누르게 되면 웹 브라우저가 username, age, file1 데이터를 분리해서 body에 담아 HTTP 요청 메세지를 생성해준다.

 

(7) HTML Form을 통한 데이터 전송 정리!

- Form 제출 시에는 POST 사용. 예를 들어 회원가입 또는 상품 주문, 데이터 변경이 이루어질 때 사용하자.

- Content-Type은 기본적으로는 application/x-www-form-urlencoded를 사용한다. form의 내용을 body를 통해 전송하는 때 이 때 데이터는 key-value 형식 (query-parameter) 으로 전달한다. 그리고 전송 데이터를 url encoding 처리를 하게 된다. 예를 들어 abc김이라고 하면 abc%EA%B9%80과 같이 전송이 되는 것이다.

- Multipart/form-data도 지원한다. 파일 업로드 같은 binary 데이터 전송 시 사용한다. 다른 종류의 여러 파일과 폼의 내용을 함께 전송할 수 있다.

- Form Submit에서 GET도 사용할 수 있다. form의 내용을 query-parameter에 담아서 전송할 수 있다. 참고로 HTML Form 전송은 GET과 POST만 지원한다. 다른 메서드들은 자바스크립트의 이벤트 핸들러를 통해 처리해야 한다.

 

(8) HTTP API 데이터 전송

 

- 서버 to 서버: 백엔드 시스템 통신 -- HTML 같은 데이터가 없어서 기계끼리 통신

- App Client: 아이폰, 안드로이드

- Web Client: Form 전송 대신 JavaScript를 통한 통신에 사용한다(Ajax). 예를 들어 React와 Vue와 같은 웹 클라이언트와 API 통신하는 경우가 있을 것 같다.

- POST, PUT, PATCH 메서드 사용하고 body를 통해 데이터를 전송한다.

- 그리고 GET은 조회할 때 사용하며 쿼리 파라미터로 데이터를 전달한다.

- Content-Type은 보통 application/json을 사용한다. 대표적으로는 text, xml, json 등이 있다.

 

더욱 알면 좋은 것들

HTTP Form과 HTTP API의 차이점은?

응답 결과로 무엇을 전달받느냐에 따라 크게 2가지로 나눌 수 있다고 한다. HTTP API는 응답 결과로 HTML이 아닌 데이터를 전달 받는 것을 의미한다. HTTP를 통해 Form의 데이터를 전송하는 이유는 그 응답 결과를 보통 HTML로 받을 때 사용한다. 물론 서버에서 응답 결과를 강제로 HTML이 아닌 데이터를 반환할 수는 있지만, 대부분 그렇게 하지 않는다고 한다. 따라서, HTTP Form을 전송하는 경우에는 API라고 칭하지 않는다고 한다. 그리고 HTTP Form은 HTML에 있는 Form 데이터를 전송하는 것을 말한다. 

GET으로 게시판의 글 조회수가 올라가게 된다면 멱등성을 위반할 수 있지 않나?

이런 부분은 사실 애매모호하긴 하다. 하지만 이런 경우에는 GET 메서드를 사용하는 것이 바람직하다고 할 수 있다. 왜냐하면 조회수가 올라가는 부분이 게시글 자체의 리소스를 변경하는 것은 아니기 때문이다. 추가로, 애플리케이션 내부의 로그를 남기는 부분에서 GET을 사용하는 것도 모두 허용된다.