주제
Q 1 : “클라이언트에서 서버로 데이터 전송할 때 전달 방식은 어떻게 될까?“
Q 2 : 클라이언트에서 서버로 데이터 전송할 때 4가지 상황(정적 데이터 조회)?
Q 3 : 클라이언트에서 서버로 데이터 전송할 때 4가지 상황(동적 데이터 조회)?
Q 4 : 클라이언트에서 서버로 데이터 전송할 때 4가지 상황(HTML Form TAG를 이용한 데이터 전송)?
Q 5 : 클라이언트에서 서버로 데이터 전송할 때 4가지 상황(HTTP API를 통한 데이터 전송)?
Q 1 : “클라이언트에서 서버로 데이터 전송할 때 전달 방식은 어떻게 될까?“
클라이언트에서 서버로 데이터 전송할 때 데이터 전달 방식은 크게 2가지로 나뉜다. 하나는 ‘쿼리 파라미터를 통한 데이터 전송’이고 다른 하나는 '메시지 바디를 통한 데이터 전송' 이다. 쿼리 파라미터를 통한 데이터 전송의 경우 HTTP 메서드는 GET이 사용되며, 주로 정렬 필터(검색어)를 적용한다.
메시지 바디를 통한 데이터 전송의 HTTP 메서드는 ‘POST’, ‘PUT’, ‘PATCH’가 사용되며, 회원 가입, 상품 주문, 리소스 등록, 리소스 변경을 하는 편이다.
Q 2 : 클라이언트에서 서버로 데이터 전송할 때 4가지 상황(정적 데이터 조회)?
클라이언트에서 서버로 데이터 전송할 때 4가지 상황은 ‘정적 데이터 조회’, ‘동적 데이터 조회, ‘HTML Form을 통한 데이터 전송’, ‘HTTP API를 통한 데이터 전송’이 있다. <그림1>처럼 이미지와 정적 텍스트 문서에 대해 정적 데이터를 조회할 때 GET을 사용하돼 '쿼리 파라미터’를 사용하지 않는다. 단순히 정적 데이터는 리소스 경로로 단순하게 조회가 가능하기 때문이다.
Q 3 : 클라이언트에서 서버로 데이터 전송할 때 4가지 상황(동적 데이터 조회)?
동적 데이터를 조회할 때 쿼리 파라미터를 사용한다. 클라이언트의 요청을 서버에서 받을 때 넘어온 쿼리 파라미터를 ‘key’와 ‘value’로 꺼내는데, “아, 쿼리 언어가 hello로 나왔네“하고, 서버 뒷단에서 hello를 가지고 찾는 로직이 동작하게 된다. hello의 결과를 찾아 클라이언트에게 응답 메시지를 보내는 형태를 갖는다.
동적 데이터 조회 1) 주로 ‘검색’, ‘게시판 목록'에서 정렬 필터(검색어)
2) 조회 조건을 줄여주는 필터로 사용.
3) 조회는 GET 사용
4) GET은 쿼리 파라미터를 사용해 데이터를 전달한다.
Q 4 : 클라이언트에서 서버로 데이터 전송할 때 4가지 상황(HTML Form Tag를 이용한 데이터 전송)?
HTML Form TAG를 이용한 데이터 전송의 경우 ‘회원 가입', ‘상품 주문’, ‘데이터 변경’할 때 사용된다. <그림3>처럼 클라이언트는 HTML Form TAG로 action=”/save”, HTTP 메서드는 POST 방식이며, key=username과 key=age이다. 각각의 value는 ‘kim’과 ‘20’의 데이터를 전송한다. 예를 들면 URL Encoding 처리를 abc김인 경우 abc%EA%B9%80으로 Encoding처리가 된다.
웹 브라우저가 생성한 요청 HTTP 메시지를 보면 Content-type으로 'application/x-www.form-urlencodded를 사용했다. key=value로 쿼리 파라미터 형식으로 unsername=kiem&age=20으로 데이터 전송하는 걸 확인 할 수 있다. 서버에 데이터가 넘어오면 POST로 전송된 데이터를 저장한다.
<그림4>처럼 /members GET List를 조회한다고 가정하면 이름이 kim이고 나이가 20살인 사람을 리스트에서 필터링해서 그 데이터만 보여줄 수 있다.
HTML Form 데이터 전송에서 파일을 전송할 때 파일 업로드의 경우 바이너리(Binary) 데이터 전송시에 사용된다. 다른 종류의 여러 파일과 폼의 내용 함께 전송이 가능하다. <그림5>처럼 웹 브라우저가 Content-Type은 multipart/form-data; boundary=------XXX로 세팅해준다.
Q 5 : 클라이언트에서 서버로 데이터 전송할 때 4가지 상황(HTTP API를 통한 데이터 전송)?
안드로이드나 아이폰 앱 애플리케이션의 경우 클라이언트에서 서버로 데이터를 바로 전송할 때 “이런 상황을 HTTP API 데이터 전송이라고 부른다.“ 클라이언트의 라이브러리를 다 제공하기에 POST /members HTTP/1.1 Conent-Type : application/json로 처리를 한다.
HTTP API 데이터 전송 설명 1) 서버 to 서버 백엔드 시스템 통신할 때(서버끼리 통신할 때 HTML이 없기에) 2) 앱 클라이언트 아이폰, 안드로이드 3) 웹 클라이언트 HTML에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용(Ajax)
예) React, VueJS 같은 웹 클라이언트 API 통신할 때4) POST, PUT, PATCH 메시지 바디를 통해 데이터 전송한다.(HTML 데이터 전송과 동일) 5) GET 조회, 쿼리 파라미터로 데이터 전달(HTML 데이터 전송과 동일) 6) Conent-Type application/json을 주로 사용한다.(사실상 표준)
예) TEXT, XML, JSON 등
참고자료
김영한 인프런 강의 : 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의
