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

조 은길·2022년 3월 15일

HTTP 웹 기본 지식

목록 보기

14/32

이번 TIL은 인프런의 "모든 개발자를 위한 HTTP 웹 기본 지식"을 학습하고, 정리한 내용입니다.
만약, 제 글의 내용을 퍼갈 시에는 " 모든 개발자를 위한 HTTP 웹 기본 지식 "도 출처에 첨부하시기 바랍니다.

2가지 데이터를 전달하는 방식

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

주로 GET에서 많이 사용

주로 정렬 필터 (검색어)를 쓸 때 사용

예를 들어, 구글에 검색어를 치거나, 쿠팡에서 정렬 조건을 넣거나 할 때, 쿼리 파라미터를 많이 사용한다.

2. " 메세지 바디 "를 통한 데이터 전송

POST, PUT, PATCH를 주로 사용

회원 가입, 상품 주문, 리소스 등록, 리소스 변경 등에 주로 쓴다.

"클라이언트 -> 서버"로 데이터가 전송되는 4가지 예시

1. 정적 데이터 조회

클라이언트에서 서버로 별 이미지를 클라이언트에 내려준다. 이런 경우에는 추가적은 데이터를 전달하지 않는다. 그냥 단순히 URI 경로만 넣으면, 서버에서 받아서 이미지 리소스를 만들어서 클라이언트로 내려준다.

이럴 때는 쿼리 파라미터를 쓰지 않고, 추가적인 데이터도 필요없다.

2. 동적 데이터 조회

이제 조회를 할 때, 데이터를 전달해야 할 때가 있다.

HTTPS에 구글에다가 search라는 경로에 검색어와 추가 데이터를 전달해야 할 때, 쿼리 파라미터를 사용한다.

서버에서는 쿼리 파라미터를 받아서, Key value로 꺼낼 수가 있다.
쿼리 언어가 "Hello"로 나오면, 서버에서 "Hello"에 관해 막~ 찾는 과정이 벌어진다. 그 다음에 그 결과를 찾아서 응답을 해주게 된다.

=> 여기서 "필터"는 검색어를 의미한다.

물론, GET으로 "메세지 바디"에 데이터를 넣어서 보낼 수 있지만, 아직까지 이것을 지원하는 서버가 많지 않고, 실무에서는 권장하지 않는다.

3. HTML Form 데이터 전송

순수하게 HTML만 가지고 기능 구현할 때는 <form>을 이용해서, 회원 가입 기능을 구현한다.

/save를 하면 저장이 된다고 가정한다.

웹 브라우져는 <form>의 submit 이벤트가 발생하면, form 데이터를 읽어서 Http 메세지를 생성한다. (왼쪽 이미지 참고)

HTTP 메세지 바디를 보면, username=kim&age=20가 있다. 쿼리 파라미터와 거의 동일한 형식으로 서버에 전송한다.
( POST는 Http 바디가 꼭 있어야 한다 )

참고로,

보통 username=kim&age=20 형식의 Content-type을 application/x-www-form-unlencoded라고 한다.

unlencoded => 한글 같은 거 넘어가면, %%% 이런 거로 인코딩이 되서 넘어간다.

"인코딩"이란?
정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태나 형식으로 변환하는 처리

그런데, HTML form으로 전송을 할 때, method를 get으로 바꿜 수 있다.

GET이니까 message body를 안 쓰기 때문에, 내용물을 쿼리 파라미터에 넣는다. => ?username=kim&age=20

POST이면, 메세지 바디에 데이터를 넣고, GET이면, 쿼리 파라미터에 넣는다.

GET은 save에 사용하면 안 된다!!
오직 조회 용도로만 사용하자!!

HTML form에서 파일 전송 할 때

HTML form에서 파일 같은 것을 전송 할 때 쓰는 Content-type이 있다.
=> multpart/form-data

=> 위에서 "전송" 버튼을 누르면, username 뿐만 아니라 파일까지 같이 전송해야 한다.
=> 이럴 때는 multpart/form-data라는 메세지 바디에 넣는 형식을 사용해야 한다.
=> boundary=----XXX까지고 웹브라우져가 랜덤으로 파일을 자른다.

=> 이렇게 파트가 여러개 라고 해서 "멀티파트" 이다.
=> 이 형식은 주로 바이너리 데이터를 전송할 때, 사용한다.