[Network] HTTP 메서드 활용

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

데이터 전달 방식은 크게 2가지이다.

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

• GET, 정렬 필터로 주로 검색어에 사용된다. 

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

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

4가지 상황

1.  정적 데이터 조회

• 이미지, 정적 텍스트 문서

2. 동적 데이터 조회

• 주로 검색, 게시판 목록에서 정렬 필터로 쓰인다. 

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

• 회원 가입, 상품 주문, 데이터 변경에 쓰인다.

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

• 회원가입, 상품 주문, 데이터 변경
• 서버 to 서버, 앱 클라이언트, 웹 클라이언트(Ajax)

 

정적 데이터 조회의 경우(쿼리 파라미터 미사용)

• 이미지, 정적 텍스트 문서
• 조회는 GET 사용
• 정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능하다.

동적 데이터 조회의 경우(쿼리 파라미터 사용)

• 주로 검색, 게시판 목록에서 정렬 필터(검색어)
• 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용한다.
• 조회는 GET 메서드를 사용한다.
• GET은 쿼리 파라미터 사용해서 데이터를 전달한다.

---

HTML Form 데이터 전송

POST 전송 저장 과정

GET 전송 저장 과정 - 리소스 변경이 발생하는 곳에 사용하면 안된다.

multipart/form-data

HTML Form 데이터 전송

• HTML Form submi시 POST 전송 - 데이터 변경에 관한 것들이 해당한다.
• Content-Type: application/x-www-form-urlencoded 사용한다.
  • form의 내용을 메시지 바디를 통해서 전송한다. (key = value, 쿼리 파라미터 형식이다.)
  • 전송 데이터를 url encoding 처리한다. ex) 김abc -> %EA%B9%80abc
• HTML Form은 GET 전송도 가능
• Content-Type: multipart/form-data
  • 파일 업로드 같은 바이너리 데이터 전송시 사용한다.
  • 다른 종류의 여러 파일과 폼의 내용을 함께 전송이 가능하다.
• HTML Form 전송은 GET, POST만 지원한다.

---

HTTP API 설계 예시

HTTP API - 컬렉션

• POST 기반 등록

HTTP API - 스토어

• PUT 기반 등록

HTML FORM 사용

• GET, POST만 지원

API 설계 - POST 기반 등록

회원 목록 /members -> GET
회원 등록 /members -> POST
회원 조회 /members/{id} -> GET
회원 수정 /members/{id} -> PATCH, PUT, POST 회원 삭제 /members/{id} -> DELETE

POST 신규 자원 등록의 특징

클라이언트는 등록될 리소스의 URI를 모른다.

• 회원 등록 /members -> POST
• POST /members

서버가 새로 등록된 리소스 URI를 생성해준다.

컬렉션(Collection)

• 서버가 관리하는 리소스 디렉토리
• 서버가 리소스의 URI를 생성하고 관리한다.
• 여기서 컬렉션은 /members이다.

API 설계 - PUT 기반 등록

파일 목록 /files -> GET

파일 조회 /files/{filename} -> GET

파일 등록 /files/{filename} -> PUT

파일 삭제 /files/{filename} -> DELETE

파일 대량 등록 /files -> POST  

PUT 신규 자원 등록 특징

클라이언트가 리소스 URI를 알고 있어야 한다.

• 파일 등록 /file/{filename} -> PUT
• PUT /files/kbcoding.jpg

클라이언트가 직접 리소스의 URI를 지정한다.

스토어(Store)

• 클라이언트가 관리하는 리소스 저장소
• 클라이언트가 리소스의 URI를 알고 관리한다.

HTML FORM 사용할 경우

HTML FORM은 GET, POST만 지원한다.

AJAX 같은 기술을 사용해서 해결 가능 하다.

GET, POST만 지원하므로 제약이 존재하다.

 

HTML FORM 설계 예시

회원 목록 /members -> GET

회원 등록 폼 /members/new -> GET

회원 등록 /members/new, /members -> POST

회원 조회 /members/{id} -> GET
회원 수정 폼 /members/{id}/edit -> GET

회원 수정 /members/{id}/edit, /members/{id} -> POST

회원 삭제 /members/{id}/delete -> POST

 

Reference.

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