서론
스프링부트 - 리액트 프로젝트를 위해 HTTP API 설계를 공부하고 있다.
단순히 HTTP API에 관한 강의를 듣다가 이해가 가지 않아서 인프런 김영한 선생님의 '모든 개발자를 위한 HTTP 웹 기본 지식' 강의를 듣게 되었다.
강의를 들으면서 기존에 내가 배웠던 것은 HTML FORM 전송이었고, 프로젝트에 적용하려고 하는 것은 HTTP API이기 때문에 인지 부조화가 왔던 것임을 알게 되었다.
추가로, HTTP 메서드에 관해 알고 있던 사실에 더해 자세하게 알게 된 점이 있어 기억해두고자 정리해두려고 한다.
많은 강의들 중 특히 섹션 5 - HTTP 메서드 활용 편을 들으며 지금까지 알고 있던 HTTP 메서드에 약간의 오해가 있었지 않나 생각했다.
클라이언트 → 서버 데이터 전송
우선, 클라이언트에서 서버로 데이터를 전송할 때, 두 가지 방법과 네 가지 상황이 있다.
두 가지 방법
1. 쿼리 파라미터를 통한 데이터 전송
- GET 방식
- 주로 검색어를 사용하는 정렬 필터에 활용
2. 메시지 바디를 통한 데이터 전송
- POST, PUT, DELETE 방식
- 회원 가입, 상품 주문, 리소스 등록, 리소스 변경
네 가지 상황
1. 정적 데이터 조회
- 이미지 또는 정적 데이터 문서
- GET 사용
- 일반적으로 쿼리 파라미터를 사용하지 않고 리소스 경로로 조회
2. 동적 데이터 조회
- 검색, 게시판 목록에서 검색어를 활용한 정렬 필터
- GET 사용
- 쿼리 파라미터를 사용하여 데이터 전달
3. HTML FORM을 통한 데이터 전송
- GET 전송도 가능
- submit 시 POST 사용
- GET, POST만 지원
- Content-Type: application/x-www-form-urlencoded
- FORM의 내용을 key=value 형태(쿼리 파라미터 형식)로 메시지 바디를 통해 전송
- 전송 데이터를 url encoding 처리
- Content-Type: multipart/form-data
- 파일 전송 같은 바이너리 데이터 전송 시 사용
- multipart 이름처럼 다른 종류의 여러 파일과 FORM의 내용을 함께 전송 가능
4. HTTP API를 통한 데이터 전송
- GET은 쿼리 파라미터로 데이터 전송
- POST, PUT, PATCH, DELETE는 메시지 바디를 통해 테이터 전송
- 서버 to 서버(백엔드 시스템 통신), 서버 to 앱 클라이언트(아이폰, 안드로이드), 서버 to 웹 클라이언트(React, Vue.js)
- Content-Type: application/json을 주로 사용(사실상 표준)
HTTP 설계 예시
HTML FORM을 사용하여 설계하는 경우, HTTP API를 사용하여 설계하는 경우로 나눠볼 수 있다.
HTTP API를 사용해 설계하는 경우는 POST 기반 등록(컬렉션)과 PUT 기반 등록(스토어)으로도 나눌 수 있다.
일반적으로 POST 기반 등록(컬렉션) 방식을 많이 사용한다.
HTML FORM 사용
- GET, POST만 지원하나 AJAX 같은 기술을 사용하여 해결 가능
- 순수 HTML + HTML Form 사용
- 컨트롤 URI
- GET, POST만 지원하므로 제약이 존재
- 이런 제약을 해결하기 위해 동사로 된 리소스 경로를 컨트롤 URI로 사용
- HTTP 메서드로 해결하기 애매한 경우 사용
- 회원 관리 예시
- 회원 목록 : /members -> GET
- 회원 등록 폼 : /members/new -> GET
- 회원 등록 : /members/new -> POST
- 회원 조회 : /members/{id} -> GET
- 회원 수정 폼 : /members/{id}/edit -> GET
- 회원 수정 : /memers/{id}/edit -> POST
- 회원 삭제 : /members/{id}/delete -> POST
HTTP API - 컬렉션
- POST 기반 등록
- 서버가 새로 등록된 리소스 URI를 생성해준다.
- 클라이언트는 등록될 리소스의 URI를 모른다. 서버에게 요청할 뿐!
- 컬렉션(Collection)
- 서버가 관리하는 리소스 디렉토리
- 서버가 리소스의 URI를 생성하고 관리
- 회원 관리 예시
- 회원 목록 : /members -> GET
- 회원 등록 : /members/{id} -> POST
- 회원 조회 : /members/{id} -> GET
- 회원 수정 : /members/{id} -> PUT, PATCH, POST
- 회원 삭제 : /members/{id} -> DELETE
HTTP API - 스토어
- PUT 기반 등록
- PUT은 데이터의 일부만 변경하는 것이 아니라 전체를 덮어 쓸 때 사용한다. 데이터가 없으면 등록하고, 있으면 수정한다.
- 클라이언트가 리소스 URI를 알고 있고, 직접 지정한다.
- 스토어(Store)
- 클라이언트가 관리하는 리소스 저장소
- 클라이언트가 리소스의 URI를 알고 관리
- 파일 관리 예시
- 파일 목록 : /files -> GET
- 파일 조회 : /files/{filename} -> GET
- 파일 등록 : /files/{filename} -> PUT
- 파일 삭제 : /files/{filename} -> DELETE
- 파일 대량 등록 : /files -> POST
728x90