본문 바로가기
FrontEnd/HTTP

[HTTP] HTTP 메서드 활용

by 개발 Blog 2024. 10. 7.

공부 내용을 정리하고 앞으로의 학습에 이해를 돕기 위해 작성합니다.

 

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

클라이언트와 서버 간의 데이터 전송에서 HTTP 메서드는 매우 중요한 역할을 한다. 데이터를 전송하는 방식은 크게 두 가지로 나눌 수 있다.

  • 쿼리 파라미터를 통한 데이터 전송
    • 주로 GET 메서드에서 사용되며, 검색어나 정렬 필터와 같은 정보를 전달할 때 사용된다.
  • 메시지 바디를 통한 데이터 전송
    • POST, PUT, PATCH 메서드를 사용하며, 회원 가입이나 상품 주문, 리소스 등록, 리소스 변경 같은 작업에서 주로 사용된다.

1. 정적 데이터 조회

이미지 파일이나 정적 텍스트 문서와 같은 데이터를 클라이언트가 조회할 때 주로 GET 메서드를 사용한다. 이런 정적 데이터는 쿼리 파라미터 없이도 단순한 리소스 경로만으로 조회 가능하다.

  • 정리
    • 주로 이미지, 텍스트 파일 등의 조회에 사용
    • GET 메서드를 사용하고, 쿼리 파라미터는 사용하지 않음

2. 동적 데이터 조회

게시판 목록에서 특정 조건으로 데이터를 필터링하거나 정렬할 때는 GET 메서드와 함께 쿼리 파라미터를 사용한다. 예를 들어, 검색어를 기반으로 데이터를 필터링할 때 쿼리 파라미터가 사용된다.

  • 정리
    • 검색어, 정렬 필터를 이용한 동적 데이터 조회
    • GET 메서드와 쿼리 파라미터를 함께 사용

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

HTML Form을 사용하여 데이터를 전송할 때는 주로 POST 메서드를 사용한다. 회원 가입이나 상품 주문, 데이터 변경 같은 작업에서 폼 데이터를 전송하는데, 이때 application/x-www-form-urlencoded 형식으로 메시지 바디에 데이터를 포함시킨다. 또한, 파일 업로드와 같은 바이너리 데이터 전송 시 multipart/form-data 형식이 사용된다.

 

POST 전송

주로 회원 가입, 상품 주문 등의 데이터를 저장하기 위해 사용된다. 데이터를 application/x-www-form-urlencoded 형식으로 인코딩하여 전송한다. 이는 key-value 형식으로 메시지 바디에 포함된다.

 

GET 전송

데이터를 저장하는 데 적합하지 않으며, 주로 조회용으로 사용된다. GET 방식에서는 데이터가 URL의 쿼리 파라미터로 전달되기 때문에 보안 측면에서 POST 방식보다 안전하지 않다.

 

multipart/form-data

파일 업로드와 같은 바이너리 데이터를 전송할 때 사용된다. 여러 종류의 파일과 폼 데이터를 함께 전송할 수 있어 파일을 업로드하는 HTML Form에서는 이 방식을 사용한다.

정리

  • POST 메서드를 통해 회원 가입, 상품 주문 등의 데이터를 전송
    • application/x-www-form-urlencoded 또는 multipart/form-data 형식 사용
  • GET 메서드도 사용 가능하나, 보통 조회에만 사용함
  • multipart/form-data는 파일 업로드와 같은 경우에 사용되며, 여러 파일과 폼 데이터를 동시에 전송 가능

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

서버 간의 통신, 모바일 앱 클라이언트, 웹 클라이언트에서 주로 HTTP API를 통한 데이터 전송이 이루어진다. 이때 POST, PUT, PATCH 메서드를 사용하여 메시지 바디에 데이터를 포함시킨다. API 통신에서는 주로 application/json 형식을 사용하며, 표준처럼 널리 쓰인다.

 

정리

  • 서버 간 통신이나 모바일, 웹 클라이언트와의 데이터 통신
  • POST, PUT, PATCH 메서드를 통해 메시지 바디에 데이터 전송
  • 주로 application/json 형식 사용

HTTP 메서드의 선택은 데이터의 성격과 전송 목적에 따라 적절하게 선택되어야 하며, 이를 통해 안정적인 클라이언트-서버 간 통신을 보장할 수 있다.

 

HTTP API 설계 예시

 

1. HTTP API - 컬렉션

컬렉션은 서버가 리소스의 URI를 생성하고 관리하는 방식이다. 이 방식에서는 주로 POST 메서드를 사용해 새로운 자원을 등록하며, 서버가 리소스의 URI를 결정한다. 회원 관리 시스템이 대표적인 예로, 서버가 신규 회원의 URI를 생성하여 클라이언트에게 알려준다.

 

POST 기반 등록

  • 예: 회원 관리 API 제공
  • 회원 목록 조회: GET /members
  • 회원 등록: POST /members
  • 회원 조회: GET /members/{id}
  • 회원 수정: PATCH, PUT, POST /members/{id}
  • 회원 삭제: DELETE /members/{id}

POST - 신규 자원 등록 특징

  • 클라이언트는 리소스의 URI를 미리 알 수 없다.
  • 서버가 새로 등록된 자원의 URI를 생성한다.
  • 응답으로 201 Created와 함께 Location 헤더에 생성된 자원의 URI를 제공한다.

예시

  • POST /members
  • 서버 응답: HTTP/1.1 201 Created
  • Location: /members/100

2. HTTP API - 스토어

스토어는 클라이언트가 리소스의 URI를 직접 지정하고 관리하는 방식이다. 이 방식에서는 주로 PUT 메서드를 사용해 파일이나 정적 콘텐츠 같은 자원을 저장하고, 클라이언트가 리소스의 경로를 알고 있어야 한다.

 

PUT 기반 등록

  • 예: 파일 관리 API 제공
  • 파일 목록 조회: GET /files
  • 파일 조회: GET /files/{filename}
  • 파일 등록: PUT /files/{filename}
  • 파일 삭제: DELETE /files/{filename}
  • 대량 파일 등록: POST /files

PUT - 신규 자원 등록 특징

  • 클라이언트가 리소스의 URI를 알고 있어야 한다.
  • 클라이언트가 직접 URI를 지정하고 리소스를 등록한다.

예시

  • PUT /files/star.jpg

3. HTML FORM 사용

HTML Form을 통한 데이터 전송은 기본적으로 GETPOST만 지원한다. 이는 순수 HTML 환경에서만 가능하며, 자바스크립트를 활용한 AJAX 기술을 통해 추가적인 HTTP 메서드를 사용할 수 있다. HTML Form 기반 시스템에서 컨트롤 URI(동사로 표현된 경로)를 활용해 작업을 구분한다.

 

회원 관리 시스템

  • 회원 목록 조회: GET /members
  • 회원 등록 폼: GET /members/new
  • 회원 등록: POST /members/new, POST /members
  • 회원 조회: GET /members/{id}
  • 회원 수정 폼: GET /members/{id}/edit
  • 회원 수정: POST /members/{id}/edit, POST /members/{id}
  • 회원 삭제: POST /members/{id}/delete

컨트롤 URI

  • GET과 POST만 지원하는 제약을 해결하기 위해 사용
  • 리소스 경로에 동사를 포함시켜 작업을 명시함
  • 예: /new, /edit, /delete

4. 정리

 

컬렉션(Collection)

  • 서버가 리소스 URI를 생성하고 관리
  • 예: 회원 관리 API
  • POST를 사용해 자원 등록, 서버가 URI 생성

스토어(Store)

  • 클라이언트가 리소스 URI를 알고 관리
  • 예: 파일 관리 API
  • PUT을 사용해 자원 등록, 클라이언트가 URI 지정

HTML FORM

  • 순수 HTML에서는 GET과 POST만 지원
  • AJAX를 사용해 이를 보완 가능, 하지만 순수 HTML에서는 제약이 있음

5. 참고할 URI 설계 개념

 

문서(Document): 단일 개념(파일, 객체, 데이터베이스의 한 행)

  • 예: /members/100, /files/star.jpg

컬렉션(Collection): 서버가 관리하는 리소스 디렉토리

  • 예: /members

스토어(Store): 클라이언트가 관리하는 자원 저장소

  • 예: /files

컨트롤러(Controller), 컨트롤 URI: 추가 프로세스 실행을 위해 동사 사용

  • 예: /members/{id}/delete

'FrontEnd > HTTP' 카테고리의 다른 글

[HTTP] HTTP 헤더1 - 일반 헤더(1)  (2) 2024.10.08
[HTTP] HTTP 상태코드  (0) 2024.10.08
[HTTP] HTTP 메서드  (1) 2024.10.06
[HTTP] HTTP 기본  (3) 2024.10.06
[HTTP] URI와 웹 브라우저 요청 흐름  (3) 2024.10.06