[HTTP] HTTP 메서드 활용

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

데이터 전달 방식

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

• GET
• 사용 예시 : 주로 정렬 필터(=검색어)

 

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

• POST, PUT, PATCH
• 사용 예시 :  회원 가입, 상품 주문, 리소스 등록, 리소스 변경

 

데이터 전달 상황

1. 정적 데이터 조회

• 사용 예시 :  이미지, 정적 텍스트 문서
• 조회는 GET 사용
• 사실 이 경우에는 클라이언트가 서버에게 추가적인 데이터를 전달할게 없고(쿼리 파라미터도 필요 없음), 단순하게 URI 경로만 넣으면 서버에서 해당 리소스를 클라이언트에게 내려준다.

요청 메시지 예시	응답 메시지 예시
GET /static/star.jpg HTTP/1.1 Host: localhost:8080	HTTP/1.1 200 OK Content-Type: image/jpeg Content-Length: 34012 lidjfalsdu;t587523d4sac8sd7t5fg4faf4sds3;5s73a13z;2x1a6f54sda65d34fa2s1xws68f7df;4554d;lkjsaddasfsdaf1sdfas64f5d

 

2. 동적 데이터 조회

• 조회 조건을 줄여주는 필터(검색어), 조회 결과를 정렬하는 정렬 조건에 주로 사용된다.
• 조회는 GET 사용 --> GET은 쿼리 파라미터 사용해서 데이터를 전달한다.
• 서버는 쿼리 파라미터를 기반으로 정렬 필터해서 결과를 동적으로 생성한다.

요청 메시지 예시

GET /search?q=hello&h1=ko HTTP/1.1 Host: www.google.com

 

3. HTML Form을 통한 데이터 전송

• 요청 데이터가 메시지 바디에 들어가는데, 형식은 쿼리 파라미터와 유사한 key-value 스타일이다.
• HTML Form 전송은 GET, POST만 지원한다.
• Content-Type: application/x-www-form-urlencoded은 서버간에 약속이 되어있어서, 웬만한 웹 서버들은 이 데이터를 파싱하여 쓸 수 있도로 구현되어있다. 한글이 들어가면 인코딩되어 넘어간다. ex) abc김 --> abc%EA%B9%80
• html form의 method를 post에서 get으로 바꿔버리면, 웹브라우저는 쿼리 파라미터로 데이터를 전송하는 GET방식 요청 메시지를 생성한다. (물론 save 기능을 GET으로 보내는 것은 지양해야 한다.)
• 만약 사진과 같은 바이너리 데이터도 전송해야한다면, enctype을 multipart/form-data로 지정해야한다. 이 때 Content-Type이 multipart/form-data로 지정되어 요청메시지가 생성되며, 웹브라우저가 boundary값을 랜덤으로 만들고, 여러 데이터들의 경계로 사용한다.

html form	요청 메시지 예시
<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="/save" method="get">     <input type="text" name="username" />     <input type="text" name ="age" />     <button type="submit">전송</button> </form>	GET /save?username=kim&age=20 HTTP/1.1 Host: localhost:8080
<form action="/save" method="post"   enctype="multipart/form-data">     <input type="text" name="username" />     <input type="text" name ="age" />     <input type="file" name="file1" />     <button type="submit">전송</button> </form>	POST /save HTTP/1.1 Host: localhost:8080 Content-Type: multipart/form-data; boundary=----XXX ----XXX Content-Disposition: form-data; name="username" kim ----XXX Content-Disposition: form-data; name="age" 20 ----XXX Content-Disposition: form-data; name="file1"; filename="intro.png" Content-Type: image/png 210354dasdc5ad4asxcadfasfd...

 

4. HTML API를 통한 데이터 전송

• 서버 to 서버(백엔드 시스템 통신), 앱 클라이언트(iOS, 안드로이드), 웹 클라이언트(ajax : react, vue와 같은 웹 클라이언트와 HTML form이 아니라 JavaScript로 API통신)
• Content-Type: application/json을 주로 사용하고(거의 표준), TEXT, XML, JSON 모두 가능하다.
• html form을 통해 전송하는 경우, form submit을 실행하면 웹브라우저가 요청 메시지를  자동으로 만들어주었다면, html api는 요청 메시지를 직접 작성한다고 생각하면 된다.

요청 메시지 예시

POST /members HTTP/1.1 Content-Type: application/json {     "username": "hello",     "age": 20 }

 

HTTP API 설계 예시

데이터를 조회할 때는 GET, 등록시 POST, 삭제시 DELETE를 쓰는 것은 자연스럽다. 그렇다면 수정할 때에는 PATCH, PUT, POST 중 어느 것을 써야할까?

 

1. HTTP API - 컬렉션 (POST 기반 등록)

• POST 로 데이터를 등록할 때에는 클라이언트가 등록될 리소스의 URI를 모르는 상태이다. 서버가 데이터를 등록하고 시로운 리소스 URI를 생성하여 응답메시지 Location에 담아 보내준다. (혹은 메시지 바디에 id 형태로 데이터를 보내주기도 한다.)
• 서버가 리소스의 URI를 생성하고 관리하는 리소스 디렉토리를 컬렉션(Collection)이라고 한다. 아래 예시에서 컬렉션은 /members 이다.
• 실무에서 대부분 POST기반으로 신규 자원을 등록한다.

회원 관리 시스템 예시
회원 목록 조회		/members	GET
회원 상세 조회		/members/{id}	GET
회원 등록		/members/{id}	POST
회원 수정		/members/{id}	PUT, PATCH, POST
회원 삭제		/members/{id}	DELETE

 

 

2. HTTP API - 스토어 (PUT 기반 등록)

• PUT으로 데이터를 등록할 때에는 클라이언트가 등록될 리소스의 URI를 알고있어야 하고, 그 URI를 지정해야 한다.
• 클라이언트가 리소스의 URI를 알고 관리하는 리소스 저장소를 스토어(Store)라고 한다. 아래 예시에서 컬렉션은 /files 이다.

파일 관리 시스템 예시
파일 목록 조회		/files	GET
파일 상세 조회		/files /{filename}	GET
파일 등록		/files /{filename}	PUT
파일 대량 등록		/files	POST
회원 삭제		/files /{filename}	DELETE

 

3. HTML FORM 사용

• HTML form에서는 GET, POST만 지원하기 때문에 제약이 있다. 따라서 PUT, PATCH, DELETE등의 작업도 POST로 이루어져야한다.
• 이런 제약을 해결하기 위해 동사로 된 리소스 경로를 사용할 수 밖에 없다. (컨트롤 URI)
• 아래 예시의 POST의 /new, /edit, /delete가 컨트롤 URI이다.
• HTTP 메소드로 해결하기 애매한 경우에 컨트롤 URI를 사용한다. (HTTP API 포함) 하지만 최대한 리소스의 개념을 가지고 URI를 설계하고, 그 상황에서 안될 때에만 컨트롤 URI를 대체제로 사용해야한다.

회원 관리 시스템 예시
회원 목록 조회		/members	GET
회원 상세 조회		/members/{id}	GET
회원 등록 폼		/members/new	GET
회원 등록		/members/new	POST
회원 수정 폼		/members/{id}/edit	GET
회원 수정		/members/{id}/edit	POST
회원 삭제		/members/{id}/delete	POST

---

이 포스팅은 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 수강하며 작성되었습니다.

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