[Network] #20 HTTP 메서드 활용

2025-01-01 4 분 소요

김영한 HTTP 웹 기본 지식을 바탕으로 정리한 글입니다.

이번 포스팅에서는 HTTP 메서드를 활용한 데이터 전송과 API 설계 예시를 알아보자.

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

1.1 데이터 전달 방식

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

GET 메서드 사용
주로 정렬 필터, 검색어 등을 서버로 전달하는 데 사용한다.

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

POST, PUT, PATCH 메서드 사용
회원 가입, 상품 주문, 리소스 등록, 리소스 변경 시 사용한다.

1.2 상황별 HTTP 메서드 사용 예시

상황	메서드	설명
정적 데이터 조회	`GET`	이미지, 정적 텍스트 문서 조회
동적 데이터 조회	`GET`	검색, 게시판 목록에서 정렬 필터 사용
HTML Form을 통한 데이터 전송	`POST`, `GET`	회원 가입, 상품 주문, 데이터 변경
HTTP API 데이터 전송	`POST`, `PUT`, `PATCH`, `GET`	회원 가입, 상품 주문, 데이터 변경, 서버 간 통신 등

1.2.1 정적 데이터 조회

정적 리소스를 조회할 때는 GET 메서드를 사용한다.

예를 들어 이미지나 정적 문서를 요청할 때, 쿼리 파라미터 없이 리소스 경로로 단순하게 조회를 할 수 있다.

1.2.2 동적 데이터 조회

동적 데이터를 조회할 때는 GET 메서드를 사용하고, 쿼리 파라미터를 통해 검색 조건이나 정렬 기준을 전달한다.

1.2.3 HTML Form을 통한 데이터 전송

💡 HTML Form을 사용한 데이터 전송은 GET과 POST 메서드만 지원한다. 각 메서드의 특징과 사용 방법은 다음과 같다.

POST 전송 - 저장

POST 메서드 사용 시 submit 버튼 클릭하면, 웹 브라우저가 HTTP 메시지를 생성한다.
이때, 데이터 형식은 Content-Type: application/x-www-form-urlencoded이며, 데이터는 key=value 쿼리 파라미터 형식으로 URL 인코딩 처리된다. (e.g., abc김 -> abc%EA%B9%80)
이렇게 인코딩된 데이터를 HTTP 메시지 바디 에 넣어 서버로 전송한다.
데이터 포맷은 GET 메서드의 쿼리 파라미터와 동일하지만, 위치가 다르다.
- POST: 데이터를 메시지 바디에 전송
- GET: 데이터를 URL 경로에 쿼리 파라미터로 전송

💡 주로 회원가입, 상품주문, 데이터 변경할 때 사용한다.

GET 전송 - 저장

GET 요청은 메시지 바디를 사용하지 않으므로 웹 브라우저는 데이터를 쿼리 파라미터(URL에 포함) 에 넣어서 서버에 전달한다.
GET은 조회에만 사용해야 하며, 리소스 변경이 발생하는 곳에 사용하면 안 된다.

GET 전송 - 조회

쿼리 파라미터(URL에 포함)하여 서버에 데이터를 전송한다.
URL을 통해 서버는 요청을 처리하여 해당 조건에 맞는 데이터를 조회하고 반환할 수 있을 것이다.
URL에 데이터가 노출되므로 민감한 정보(비밀번호 등)는 GET으로 전송하면 안 된다.

multipart/form-data

파일 업로드 같은 바이너리 데이터 전송시 사용한다.
다른 종류의 여러 파일과 폼의 내용과 함께 전송 가능하다. (그래서 이름이 multipart)

1.2.4 HTTP API 전송

특징

서버 간 통신, 모바일 앱, 웹 클라이언트(React, Vue.js 등)에서 주로 사용한다.
HTML Form 대신 JavaScript(AJAX)로 데이터 전송.

메서드별 데이터 전송

POST, PUT, PATCH: 메시지 바디를 통해 데이터 전송한다.
GET: 쿼리 파라미터를 통해 데이터를 전달한다.

데이터 형식

주로 Content-Type: application/json 을 사용한다.
JSON이 사실상 표준이다.
TEXT, XML 등도 사용 가능하나 현재는 JSON이 대부분 사용된다.

2. HTTP API 설계 예시

2.1 컬렉션(Collection) - POST 기반 등록

HTTP API - 컬렉션(서버가 관리하는 리소스 저장소)

등록 방식: POST 기반 (신규 자원 등록)
서버가 리소스 URI를 생성하고 관리한다.
e.g., 회원 관리 API 제공
💡 실무에서는 컬렉션 방식(POST 기반)이 더 많이 사용된다.

POST - 신규 자원 등록 특징

클라이언트는 등록될 리소스의 URI를 모른다.
- 회원 등록 /members -> POST
- POST /members
서버가 새로 등록된 리소스 URI를 생성해준다.
- HTTP/1.1 201 Created
- Location: /members/100
컬렉션(Collection)
- 서버가 관리하는 리소스 디렉토리
- 서버가 리소스의 URI를 생성하고 관리
- 여기서 컬렉션은 /members

예시: 회원 관리 시스템

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

💡 일반적으로 수정할 때는 PATCH를 주로 사용한다.

2.2 스토어(Store) - PUT 기반 등록

HTTP API - 스토어(클라이언트가 관리하는 리소스 저장소)

등록 방식: PUT 기반 (없으면 새로 생성, 있으면 덮어쓰기)
URI 특징: 클라이언트가 리소스 URI를 알고 직접 관리한다.
거의 사용하지 않는다.
e.g., 정적 컨텐츠 관리, 원격 파일 관리

PUT - 신규 자원 등록 특징

클라이언트가 리소스 URI를 알고 있어야 한다.
- 파일 등록 /files/{filename} -> PUT
- PUT /files/star.jpg
클라이언트가 직접 리소스의 URI를 지정한다.
스토어(Store)
- 클라이언트가 관리하는 리소스 저장소
- 클라이언트가 리소스의 URI를 알고 관리
- 여기서 스토어는 /files

예시: 파일 관리 시스템

API 설계 - PUT 기반 등록

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

2.3 HTML FORM 사용

HTML FORM

제약: GET, POST만 지원한다.
대안: AJAX 같은 기술을 활용 가능 (이 포스팅에선 순수 HTML FORM만 다룸)

컨트롤 URI

HTML Form의 제약으로 인해 동사 기반 URI(/new, /edit, /delete)를 사용한다.
e.g.,
- 등록: /members/new → POST
- 수정: /members/{id}/edit → POST
- 삭제: /members/{id}/delete → POST

💡 실무에선 컨트롤 URI를 많이 사용한다고 한다. 하지만, 컨트롤 URI를 남용하면 안된다. 최대한 리소스라는 개념을 가지고 URI를 설계하되, 그 상황에서 안 될때 컨트롤 URI를 대체재로 사용해야 한다.

회원 관리 시스템 예시

회원 목록: /members → GET
회원 등록 폼: /members/new → GET
회원 등록: /members/new 또는 /members → POST
- (영한님이 선호하시는 스타일은 같은 URL을 사용하는 것이라고 함)
회원 조회: /members/{id} → GET
회원 수정 폼: /members/{id}/edit → GET
회원 수정: /members/{id}/edit 또는 /members/{id} → POST
회원 삭제: /members/{id}/delete → POST

2.4 정리

유형	등록 방식	URI 관리 주체	사용 예시
컬렉션	`POST`	서버	회원 관리 시스템
스토어	`PUT`	클라이언트	파일 관리 시스템
HTML FORM	`GET`, `POST`	제한적 (HTML Form)	순수 HTML 기반 시스템

2.5 참고하면 좋은 URI 설계 개념

문서 (document)

단일 개념(파일 하나, 객체 인스턴스, 데이터베이스 row)
e.g., /members/100, /files/star.jpg

컬렉션 (collection)

서버가 관리하는 리소스 디렉터리
서버가 리소스의 URI를 생성하고 관리
e.g., /members

스토어 (store)

클라이언트가 관리하는 자원 저장소
클라이언트가 리소스의 URI를 알고 관리
e.g., /files

컨트롤러 (controller), 컨트롤 URI

문서, 컬렉션, 스토어로 해결하기 어려운 추가 프로세스 실행
동사를 직접 사용
e.g., /members/{id}/delete

박시은