[HTTP] HTTP Method 활용 예제

출처 

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

---

목차

 

클라이언트에서 서버로 요청하는 4가지 상황

1. 정적 데이터 조회
   • 이미지나 정적 텍스트 문서를 요청하는 경우입니다.
2. 동적 데이터 조회
   • 주로 검색 시에 검색어를 전달하거나, 게시판의 글 목록에서 글을 정렬할 때 필터로 사용될 데이터를 전달하는 경우입니다.
3. HTML Form
   • 예를 들어, 회원 가입 시의 데이터 묶음 또는 상품 주문 시의 데이터 묶음을 전달하는 경우입니다.
4. HTTP API
   • 서버 to 서버 통신
   • 앱 클라이언트
   • 웹 클라이언트 (Ajax)
   • 예) 회원 가입, 상품 주문

 

데이터 전달 방식

클라이언트에서 서버로 데이터를 전달하는 방식에는 크게 2가지가 있습니다.

1. 쿼리 파라미터(쿼리 스트링)을 통한 데이터 전송 (url)
   • GET 메서드를 주로 사용합니다.
   • 주로 검색 시에 검색어를 넘길 때 사용합니다. (필터)
   • 게시판 리스트의 정렬 조건을 넘길 때 사용합니다. (정렬)
2. 메시지 바디
   • POST, PUT, PATCH 를 주로 사용합니다.
   • 예를 들어, 회원가입, 상품 주문 시에 사용합니다.

 

1. 정적 데이터 조회

• 이미지나 정적 텍스트 문서 같은 경우에는 조회이므로 GET을 사용합니다.
• 정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회가 가능합니다.
• Content-Type: image/jpeg

 

2. 동적 데이터 조회

 

• 주로 검색 또는 게시판 글 목록을 정렬할 때 사용합니다. (검색어: q=hello, 필터: hl&ko (한국어))
• 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건을 쿼리 파라미터로 넘길 때 주로 사용합니다.
• 조회는 GET을 사용합니다.
• GET은 대부분 쿼리 파라미터를 사용하여 데이터를 전달합니다.

 

네이버에 '티스토리'를 검색했을 때의 URL

 

3. HTML Form 데이터 전송

• HTML Form 전송은 GET, POST만 가능합니다. (PUT, PATCH, DELETE X)

 

POST 전송

• 웹 브라우저가 form을 읽어 HTTP 메시지를 전송합니다.
• submit 시 action 경로로 POST 전송됩니다.
• 예) 회원 가입, 상품 주문
• form 의 name 필드로 쿼리 파라미터와 같은 형식으로 (key-value) 메시지 바디를 구성합니다.
• 전송 데이터를 url encoding 처리하여 전송합니다.
  • Content-Type: application/x-www-form-urlencoded
  • 예) abc김 →(변경) abc%EA%B9%80

 

 

form을 GET으로 전송한다면?

• GET이므로 바디 대신 쿼리 파라미터에 넣습니다.
• save는 저장한다는 뜻이므로 GET을 사용하면 안됩니다. 
• 리소스가 변경될 땐 GET을 사용하지 않습니다.

 

 

GET 전송

• 이름이 kim이고 나이가 20인 멤버를 조회할 때 GET을 사용할 수 있습니다.

 

 

multipart/form-data

• 파일 업로드 같은 바이너리 데이터 전송 시 사용합니다.
• byte로 되어 있는 이미지를 함께 전송하는 예제입니다.

 

• 인코딩 타입(enctype) 이 multipart/form-data로 되어 있습니다.
• 이미지를 선택하여 전송버튼을 누르면 오른쪽과 같이 브라우저가 요청 HTTP 메시지를 생성해 전송합니다.
• Content-Type: multipart/form-data; 
• boundary-----XXX : 바운더리 ----XXX을 사용하여 구분한다는 뜻입니다.
• 다른 종류의 여러 파일과 폼의 내용을 함께 전송할 수 있습니다. (그래서 이름이 multipart)

 

4. HTTP API 전송

• 서버 to 서버
  • 백엔드 시스템끼리 통신하는 경우입니다.
• 앱 클라이언트
  • 아이폰, 안드로이드
• 웹 클라이언트
  • HTML에서 Form 대신 자바 스크립트를 통한 통신을 하는 경우입니다. (Ajax)
  • ex) React, Vue.js 와 같은 웹 클라이언트와 API 통신
• GET
  • 조회
  • 쿼리 파라미터로 데이터를 전달
• POST, PUT, PATCH
  • 메시지 바디를 통해 데이터 전송
• Content-Type: application/json 을 주로 사용합니다. (사실상 표준)
  • TEXT, XML, JSON 등이 있습니다.

 

HTTP API 설계 예시

POST과 PUT의 차이점을 중점적으로 알아보겠습니다.

 

POST	PUT
컬렉션	스토어
예) 회원 등록 API	예) 정적 컨텐츠 관리, 원격 파일 관리

 

회원 관리 시스템

API 설계

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

 

POST의 신규 자원 등록 특징

• 클라이언트는 등록될 리소스의 URI를 모릅니다. ⭐
  
  • 요청) POST /members
  • 응답) HTTP/1.1 201 Create
             Location: /members/100
  • 위와 같이 서버가 새로 등록될 리소스 URI를 생성해줍니다.

이때 사용하는 것이 컬렉션 (Collection) 입니다.

 

❔컬렉션(Collection)

• 서버가 리소스의 URI를 생성하고 관리합니다.
• 서버가 관리하는 리소스 디렉토리입니다.
• 위 예제에서의 컬렉션은 /members 입니다.

 

파일 관리 시스템

API 설계

• 파일 목록 /files (GET)
• 파일 조회 /files/{filename} (GET)
• 파일 등록 /files/{filename} (PUT)
• 파일 삭제 /files/{filename} (DELETE)
• 파일 대량 등록 /files (POST)

 

파일 등록 시 POST가 아닌 PUT을 사용한 경우입니다.

등록에서 PUT을 사용하고 있기 때문에 다른 API에서 POST를 사용할 수 있습니다.

 

PUT의 신규 자원 등록 특징

• 클라이언트는 리소스 URI를 알고 있어야 합니다. ⭐
  • 요청) PUT /files/{filename}
  • ex) PUT /files/star.jpg
  • 이 때, 기존의 파일이 있다면 덮고 없다면 생성하므로 PUT이 적합합니다.
  • 서버가 URI를 생성해준 POST과 달리 클라이언트가 직접 리소스의 URI를 지정합니다.

 

이 때 사용하는 것이 스토어(Store)입니다.

 

❔스토어 (Store)

• 클라이언트가 리소스의 URI를 알고 관리합니다.
• 클라이언트가 관리하는 리소스 저장소입니다.
• 위 예제에서 스토어는 /files 입니다.

 

대부분은 Post 기반의 Collection 방법을 많이 사용합니다.

 

 

HTML Form 추가 예시

• HTML Form은 GET과 POST만 지원합니다.
• 두 개의 메서드만을 사용하여 API를 설계하는 예시를 보겠습니다. 
• 아래 설계 이외에도 Ajax 같은 기술을 사용하면 다른 메서드들을 사용하여 설계할 수 있습니다. (회원 API 참고)
• 순수 HTML, HTML Form만을 사용하여 설계해보겠습니다.

 

회원 API 설계

• 회원 등록 폼 /members/new (GET)   : 회원 등록 폼을 요청
• 회원 등록 /members/new or /members (POST) : 회원 정보를 입력 후 submit 클릭
• 회원 목록 /members(GET)
• 회원 조회 /members/{id} (GET)
• 회원 수정 폼 /members/{id}/edit (GET) : 한 사용자의 회원정보 수정 폼을 요청
• 회원 수정 /members/{id}/edit or /members/{id} (POST) : 회원 정보를 수정한 후 완료 클릭
• 회원 삭제 /members/{id}/delete (POST)

 

위와 같이 자원과 HTTP method 로는 URI를 식별하는데 한계가 있어 동사를 사용하는 경우가 있습니다.

이를 컨트롤 URI라고 부릅니다.

 

❔컨트롤 URI

• HTML Form은 GET, POST 만 지원하도록 제약이 있습니다.
• 이런 제약을 해결하기 위해 동사로 된 리소스 경로를 사용합니다.
• POST의 /new, /edit, /delete 가 컨트롤 URI 입니다.
• 컨트롤 URI는 HTTP 메서드로 해결하기 애매한 경우에만 사용합니다.

 

참고하면 좋을 URI 설계 개념

• 문서 (document)
  • 단일 개념(파일 하나, 객체 인스턴스, 데이터베이스 row)
  • 예) /members/100, /files/star.jpg
• 컬렉션 (collection)
  • 서버가 관리하는 리소스 디렉터리
  • 서버가 리소스의 URI를 생성하고 관리
  • 예) /members
• 스토어 (store)
  • 클라이언트가 관리하는 자원 저장소
  • 클라이언트가 리소스의 URI를 알고 관리
  • 예) /files
• 컨트롤러(controller), 컨트롤 URI
  • 문서, 컬렉션, 스토어로 해결하기 어려운 추가 프로세스 실행
  • 동사를 직접 사용
  • 예) /members/{id}/delete

출처: https://restfulapi.net/resource-naming