김영한 님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 보고 작성한 내용입니다.
https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC/dashboard
1. 클라이언트 -> 서버 데이터 전송 방식 2가지
1-1. 쿼리 파라미터를 통해 데이터를 전송
-
GET 방식에서 많이 사용
-
?,key=value같은 쿼리 파라미터를 사용하는 방식 -
검색을 하거나 정렬조건을 줄 때 많이 사용하는 방식
1-2. message body에 담아 데이터를 전송
-
POST, PUT, PATCH 방식을 사용
-
ex> 회원 가입, 상품 주문, 리소스 등록, 리소스 변경 등
2. 클라이언트 -> 서버 데이터 전송 4가지 상황
-
정적 데이터 조회
-
동적 데이터 조회
-
HTML Form을 통한 데이터 전송
-
HTTP API를 통한 데이터 전송
3. 정적 데이터 조회
-
조회이기 때문에 GET 방식
-
이미지, 정적 텍스트 문서 조회
-
쿼리 파라미터 사용 X
-
추가적인 데이터 전달 없이 URI 경로만 지정
/static/star.jpg
4. 동적 데이터 조회
-
조회이기 때문에 GET 방식
-
쿼리 파라미터 사용해서 데이터를 전달해 조회하는 방식
-
서버에서 쿼리 파라미터를 key, value 형식으로 꺼내서 활용 & 결과를 동적으로 생성
-
검색을 하거나, 게시판 목록에서 정렬 조건을 주는 등의 정렬 필터로 사용
5. HTML Form을 통한 데이터 전송
5-1. POST 방식
<form action = "/save" method = "post">
<input type = "text" name = "username">
<input type = "text" name = "age">
<button type = "submit">전송</button>
</form>POST /save HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded
username=kim&age=20-
form 태그의 action에는 URL, method에는 HTTP method를 작성
-
Form 태그 내부의 input 태그의 name 속성에 명시된 것들이 전달되는 데이터
- username, age
-
버튼을 누르면(submit) Form의 데이터를 읽어서 웹 브라우저가 HTTP 메세지를 생성
-
회원 가입, 상품 주문, 데이터 변경 시 사용
-
Content-Type:
application/x-www-form-urlencoded-
form 태그의 내용을 key=value 형식 ( 쿼리 파라미터와 유사한 형식 )으로 데이터를 만든다
-
만든 데이터를 HTTP message body를 통해 쿼리 파라미터와 거의 동일한 방식으로 서버에 전송
-
전송 데이터를 url encoding 처리
- ex> abc김 -> abc%EA%B9%80
-
5-2. GET 방식
<form action = "/members" method = "get">
<input type = "text" name = "username">
<input type = "text" name = "age">
<button type = "submit">전송</button>
</form>GET /members?username=kim&age=20 HTTP/1.1
Host: localhost:8080-
form 태그의 method에 GET을 사용할 수 있음
- GET은 message body를 사용하지 않기 때문에 form 태그의 내용을 쿼리 파리미터에 넣는다
-
정리하자면 form 태그 사용 시 post면 웹 브라우저가 form 태그의 내용을 message body에 넣는다
-
get이면 url 경로에 쿼리 파라미터를 사용해서 넣는다
-
참고: HTML Form 전송은 GET, POST만 지원
5-3. 복합 데이터 전송
<form action = "/save" method = "post", enctype="multipart/form-data">
<input type = "text" name = "username">
<input type = "text" name = "age">
<input type = "fild" name = "file1">
<button type = "submit">전송</button>
</form>POST /save HTTP/1.1
Host: localhost:8080
Content-Type: multipart/form-data; boundary=----XXXX
----XXXX
Content-Disposition: form-data; name="username"
kim
----XXXX
Content-Disposition: form-data; name="age"
20
----XXXX
Content-Disposition: form-data; name="file1"; filename="intro.png"
Content-Type: image/png
...
----XXXX-
Content-Type:
multipart/form-data-
파일 업로드 같은 바이너리 데이터 전송 시 사용
-
텍스트 파일 및 파일을 같이 전송 가능 ( 서로 다른 종류의 파일을 form의 내용과 함께 전송 가능 )
-
form 태그의 enctype 속성을
multipart/form-data로 지정하면boundary를사용해서 form의input 태그들을 자동으로 구분해준다
-
6. HTTP API를 통한 데이터 전송
-
직접 HTTP message를 만들어서 전송
-
message body에 json 데이터를 넣고
-
Content-Type:
application/json으로 설정
-
-
HTTP API 사용 시
-
GET 방식 : 조회할 때는 쿼리 파라미터로 데이터 전달
-
POST, PUT, PATCH 방식 : message body를 통해 데이터 전송
-
Content-Type:
application/json을 주로 사용 ( 사실상 표준 )- TEXT, XML, JSON 등등
-
-
API 통신을 사용하는 경우
-
서버끼리 통신하는 백엔드 시스템
-
앱 클라이언트에서 전송하는 경우 -- 아이폰, 안드로이드
-
웹 클라이언트
-
HTML에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용 ( AJAX )
-
ex> React, VueJs 같은 웹 클라이언트와 API 통신
-
-
7. HTTP API 설계 예시
-
URI는 리소스를 식별해야한다
-
리소스를 사용한 동작은 HTTP method를 사용해서 구분한다
7-1. POST를 이용한 등록 설계 특징 ( 회원 관리 시스템 )
-
등록 시, 클라이언트는 등록될 리소스의 URI를 모른다
-
데이터를 전달하고 새로운 회원을 만들어달라고 요청만 수행
-
/members에 POST 방식으로 요청
-
-
서버가 새로 등록된 리소스를 식별할 수 있는 URI를 생성한다
-
클라이언트에게 받은 데이터를 이용해 회원을 생성하고 생성한 회원을 구분할 수 있는 URI를 만든다
-
/members/100 -
생성된 회원을 구분할 수 있는 100이라는 숫자는 서버가 부여
-
-
Response message를 보낼 때 헤더에 새로 등록된 리소소의 위치를 나타내는 Location:
/members/100를 추가할 수 있다
-
-
위와 같은 관리 형식을 컬렉션(Collection)이라고 한다
-
서버가 관리하는 리소스 디렉토리
-
서버가 리소스의 URI를 생성하고 관리
-
여기서 컬렉션은
/members
-
7-2. PUT을 이용한 등록 설계 특징 ( 파일 관리 시스템 )
- PUT 방식은 리소소를 전체 대체하기 때문에 게시판의 게시글을 수정하는 경우나 파일 관리 시스템에 적합
-
등록 시, 클라이언트가 리소스 URI를 알고 있어야 한다
-
클라이언트가 직접 리소스의 URI를 지정한다
-
/files/{filename}에 PUT 방식으로 요청 -
PUT 방식으로 등록을 하기 때문에 POST의 의미를 임의로 지정할 수 있음
-
-
위와 같은 관리 형식을 스토어(Store)이라고 한다
-
클라이언트가 관리하는 리소스 저장소
-
클라이언트가 리소스의 URI를 알고 관리
-
여기서 스토어는
/files
-
7-3. HTML Form을 이용한 API 설계
-
순수한 HTML과 HTML Form만을 이용한다고 가정
-
컨트롤 URI : HTML Form은 GET, POST만 지원하므로 제약이 있기 때문에 이를 해결하기 위해 동사로 된 리소스 경로 사용
-
회원 등록 : /members/new
-
회원 수정 : /members/{id}/edit
-
회원 삭제 : /members/{id}/delete
-
전부 POST 방식이고
/new,/edit,/delete가 컨트롤 URI -
HTTP 메서드로 해결하기 애매한 경우 사용 ( PUT, PATCH 등 )
-
8. 정리
-
컬렉션(collection)
-
POST 기반 등록
-
서버가 관리하는 리소스 디렉터리
-
서버가 리소스의 URI를 생성하고 관리
-
ex> /members
-
-
스토어(store)
-
PUT 기반 등록
-
클라이언트가 관리하는 자원 저장소
-
클라이언트가 리소스의 URI를 알고 관리
-
ex> /files
-
-
컨트롤 URI
-
HTTP 메서드로 해결하기 애매한 경우 사용
-
동사를 직접 사용
-
ex> /members/{id}/delete
-
