5. HTTP 메서드 활용

이 포스팅은 인프런 김영한 강사님의 <모든 개발자를 위한 HTTP 웹 기본 지식>을 수강하고, 공부하여 글로 정리한 것입니다. 그대로 갖다 붙여넣는 내용이 아니라 기억나는대로 작성한 후 다시 추가적으로 정리하는 방식을 취하고 있기 때문에 틀린 부분이 있을 수 있습니다. 잘못된 점은 짚어주시면 감사하겠습니다.

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

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

• GET
• 주로 정렬 필터(검색어)

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

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

1-3. 4가지 상황

(1) 정적 데이터 조회

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

(2) 동적 데이터 조회

• 주로 검색, 게시판 목록에서 정렬 필터(검색어)
• GET 사용
• 쿼리 파라미터를 기반으로 정렬 필터해서 결과를 동적으로 생성.

(3) HTML <form> 통한 데이터 전송

<form action="/save" method="post">
  <input type="text" name="username" />
  <input type="text" name="age" />
  <button type="submit">전송</button>
</form>

• GET과 POST만 지원
• POST 전송 - 저장
• 회원가입, 상품주문, 데이터 변경
• <form> 의 데이터를 읽어서 HTTP 요청 메시지 생성.
• 기본 Content-Type: application/x-www-form-urlencoded
  • form의 내용을 메시지 바디를 통해 전송(key=value)
  • 전송 데이터를 url encoding 처리
• GET 사용시 쿼리 파라미터로 전달. 그러나 GET은 조회에서만 사용하고, 리소스 변경이 발생하는 곳에 사용해서는 안됨.
• Content-Type이 multipart/form-data인 경우
  • 파일 업로드 같은 바이너리 데이터 전송에 사용
  • 다른 종류의 여러 파일과 폼의 내용 함께 전송 가능

(4) HTTP API를 통한 데이터 전송

• 회원가입, 상품주문, 데이터 변경
• 서버 to 서버(백엔드 시스템 통신), 앱 클라이언트
• 웹 클라이언트
  • 자바스크립트를 통한 통신에 사용(Ajax)
  • 예) React, Vue 같은 웹 클라이언트와 API 통신
• POST, PUT, PATCH : 메시지 바디를 통해 데이터 전송
• GET : 조회. 쿼리 파라미터로 데이터 전달
• Content-Type: application/json 주로 사용(사실상 표준). (TEXT, XML, JSON 등..)
  

2. HTTP API 설계 예시

2-1. 회원 관리 시스템

API 설계 - POST 기반 등록

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

POST - 신규 자원 등록 특징

클라이언트는 등록될 리소스의 URI를 모른다.
서버는 요청 메시지를 받아 DB에 저장 후, 새로 등록된 리스소를 생성한다.
응답할 때 Location에 신규 리소스를 적어 클라이언트에 넘겨준다.
이러한 형식을 컬렉션(Collection)이라 한다.

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

2-2. 파일 관리 시스템

API 설계 - PUT 기반 등록

• 파일 목록 /files -> GET
• 파일 조회 /files/{filename} -> GET
• 파일 등록 /files/{filename} -> PUT => 기존 파일을 지우고 다시 올려야 하므로.
• 파일 삭제 /files/{filename} -> DELETE
• 파일 대량 등록 /files -> POST => PUT을 사용하여 파일을 등록하고 있기 때문에 POST의 의미를 임의로 지정할 수 있음.

PUT - 신규 자원 등록 특징

⭐️ 클라이언트가 리소스 URI를 알고 있어야 한다. 클라이언트가 직접 리소스 URI를 지정한다.(POST와의 차이!)
PUT /files/star.jpg

이러한 스타일의 관리를 '스토어(Store)'라고 한다.

스토어 : 클라이언트가 관리하는 리소스 저장소. 클라이언트가 리소스의 URI를 알고 관리.
여기서 스토어는 /files

2-3. HTML FORM 사용

HTML FORM은 GET, POST만 지원하기 때문에 제약이 있다.
GET과 POST만 지원하기 때문에 컨트롤 URI를 붙여서 역할을 구분하는 것으로 한다.

컨트롤 URI

• GET, POST만 지원하므로 발생하는 제약을 해결하기 위해 동사로 된 리소스 경로를 사용.
• 예) 아래 표에서 POST의 /new, /edit, /delete
• HTTP 메서드로 해결하기 애매한 경우에 사용. (HTTP API 포함)

역할	URI	메서드
회원 목록	/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