[HTTP] Client에서 Server로 데이터를 전송하는 방법

먼저 공부하기에 앞서 Client와 Server가 무엇인지 설명하겠다.

클라이언트와 서버 통신관계에서 Client는 사용자(나)라기보다는, 사용자가 사용하는 웹브라우저(네이버, 구글, ~~ 등등)를 나타낸다.

Server는 웹브라우저의 요청메세지(Http 프로토콜)을 가지고 원하는 서비스(데이터)를 웹 브라우저에 제공해주는 존재이다.

우리는 클라이언트와 서버의 통신(url,https, http메소드 등 사용)을 통해 웹브라우저(네이버)에 검색(hello 검색결과)결과를 얻을 수 있게되는것이다.

 

Client에서 Server로 데이터를 전송하는 방식은 크게 두 가지이다.

---

첫번째, 쿼리 파라미터를 통한 데이터 전송

• uri에 쿼리 파라미터를 넣어서 전송한다. HTTP메소드로는 GET을 사용한다.
• 구글에 검색하기와같이 정렬, 필터(검색어)에 쓰인다.

 

두번째, message body를 통한 데이터 전송

• message body에 데이터를 넣어 전송한다. HTTP메소드로는 POST,PUT,PATCH 사용한다.
• 회원가입, 상품 주문, 리소스 등록, 리소스 변경과같이 데이터를 전달해야할때 사용한다.

---

클라이언트와 서버가 데이터를 전송하는 4가지 상황예를 알아보겠음

---

상황 1. 정적 데이터 조회

• 이미지나 정적 텍스트 문서를 조회할때! GET사용
• 정적 데이터 조회에서는 쿼리 파라미터를 사용하지 않고, 단순히 리소스 경로만으로 조회가 가능하다.
• 리소스 경로(/static/star.jpg)

---

상황2. 동적 데이터 조회

• 주로 검색하거나, 게시판 목록에서 정렬 필터(검색)할때 추가데이터들이 파라미터를 통해 넘어간다.
• 조회 조건을 줄여주는 필터(검색어), 조회 결과를 정렬하는 정렬 조건에 주로 사용된다.
• 조회는 GET사용.
• GET은 쿼리 파라미터를 사용해서 서버로 데이터를 전달한다.

---

상황3. HTML의 Form태그를 통한 데이터 전송

->GET POST만 지원한다.

▶ POST전송 - 저장 (예: 회원가입,상품주문,데이터변경)

1. action="/save (저장) method = "post"로 데이터를 전송하는 경우 submit(전송)을 하게 되면
2. 웹 브라우저(클라이언트) 가 form태그 내부에 있는 내용들을 읽어서 http메세지를 생성해준다. 이때 Content-type : applicaiotn/x-www-form-urlencoded사용하는데, 이는 username= kim$age=20;와 같이 key/value 스타일로 데이터를 만들어 message body에 넣어준다. (전송 데이터를 url encoding처리한다)
3. 그리고 http 요청 메세지를 서버에 전송함
4. 서버는 받은 데이터를 저장

▶ GET전송 - 저장 (불가능)

1. action="/save (저장) method = "get"로 데이터를 전송하는 경우 submit을 하게 되면
2. 웹 브라우저가 url경로에 쿼리 파라미터형식으로 데이터를 넣어서 요청메세지를 작성한 후
3. 서버에 전달
그러나 GET은 조회에만 사용해야하고, 리소스 변경(save.. 등등)이 일어나는 곳에 사용하면 안된다.

▶ GET전송 - 조회

1. action="/members" method="get"으로 데이터를 전송하는경우 (/members는 조회하는 컬렉션형태이다.) submit을하게되면
2. 웹 브라우저(클라이언트)가 쿼리 파라미터에 조회할 정보를 넣어 요청메세지를 작성한다.
3. 서버에 HTTP요청메세지를 전달하고 서버는 조회 결과를 반환한다.

▶ Post 전송 저장 (multipart/form-data)

• 주로 파일 업로드와 같은 바이너리 데이터 전송시 사용된다.
• 다른 종류의 여러 파일과 폼의 내용을 함께 전송 가능하다. 그래서 이름이 multipart,,

1. action = "/save" method = "post" enctype = "multipart/form-data"로 데이터를 전송하는 경우
2. 웹 브라우저가 boundary로 경계를 잘라, multipart한 형식으로 데이터를 만들어 요청메세지를 작성한다.

---

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

• Content-Type: application/json으로 데이터를 전송한다? -> API를 이용해 서버에 데이터를 전송하는 경우이다.
• 서버 - 서버, 앱 - 클라이언트, 웹 - 클라이언트(Ajax) 끼리 통신할때 사용

• 서버 to 서버 - 벡엔드 시스템 통신
• 앱 클라이언트 - 아이폰, 안드로이드
• 웹 클라이언트 - HTML에서 Form전송 대신 js를 통한 통신에 사용(AJAX) 예로) React, VueJs

 

---

<정리>
클라이언트에서 서버로 전송할때는 크게 두가지 방식이 있다
- 쿼리 파라미터를 이용한전송, 주로 GET으로 사용, 검색 정렬필터일때 사용
- 메세지바디를 통한 전송, 주로 POST PUT PATCH으로 사용, 회원가입,상품주문,리소스등록,리소스변경할때 사용

정적데이터조회

• GET로 해서 PATH만 적어주면끝

동적데이터조회

• 조회 ->GET 동적조회는 쿼리도 필요하고 정렬조건도 넘겨야하므로, 이런데이터들을 쿼리파라미터를 이용해 전송한다.

HTML Form

• 데이터조회 ->GET
• 바꿀때 ->POST

HTML API

• HTML Form을 사용하지 않는 모든경우를 말함 서버투서버 앱클라 웹에이잭션 통신등 할때 사용함

 

https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC/dashboard

모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의