강의와 책과 스터디

HTTP.03.HTTP 메서드02

우당탕 오리의 개발모험 2023. 4. 7. 19:02

위키

HTTP 메서드 활용

이번에는 앞에서 공부한 HTTP 메서드들을 어떻게 활용하는지 알아봅니다.

1. 클라이언트 -> 서버로 데이터를 전송 할 때

데이터 전송 방식 대표 2가지

  1. Query Parameter (쿼리파라미터) : 주로 GET 메서드에서 사용
  2. Request Body : POST, PUT, PATCH 메서드에서 사용

데이터 전송 대표 4가지 상황

  1. 정적 데이터 조회 : 이미지 등. 보통 Web서버에서 바로 조회/응답하도록 설계한다
  2. 동적 데이터 조회 : 보통 DB 조회가 이뤄져야하는 경우
  3. HTML Form 데이터 전송 : 데이터 등록/수정. 회원가입, 게시글작성/수정 등
  4. HTTP API 데이터 전송 : 거의 모든 데이터 통신에 사용된다.
  정적 데이터 조회 동적 데이터 조회 HTML Form 데이터 전송 HTTP API 데이터 전송
HTTP 메서드 GET GET POST, GET
오직 POST/GET만 사용가능!
GET, POST, PUT, PATCH, DELETE
모두 다 됨
용도 이미지, 정적 텍스트 문서 등 필터, 정렬이 필요한 조회 <form> 태그 내 데이터 전송
조회/저장 둘 다 가능하다
거의 모든 데이터 전송에 사용됨
* 서버to서버(백엔드 시스템간 통신)
* 앱 클라이언트와 데이터 통신
* 웹 클라이언트와 데이터 통신(ajax)
특징 보통 파라미터 없이 리소스 경로로 조회 가능 * 쿼리파라미터로 조건 전달
* 응답데이터가 조건에 따라 다르다
태그 내 선언한 HTTP 메서드에따라 브라우저가 자동으로 요청데이터를 생성한다.
전송할 수 있는 데이터 타입은 TEXT, XML, JSON 다 되긴함
이젠 거의 JSON 만 사용
기타 GET /static/star.jpg GET /member?team=DEV3 POST : Request Body 로 변환되어 전송
GET : Query Parameter로 변환되어 전송
 
      Context-Type : multipart/form-data Context-Type : application/json

HTML Form 데이터 전송

주의! 오직 POST/GET만 사용가능!

주로 POST 쓸 일이 많음

예전에 종종 사용했으나, 그 때도 AJAX와 같이 병행해서 썼다.

  • POST 메서드 전송 : 저장
    • Context-Type : 기본 : application/x-www-form-urlencoded
    • Request 메시지 Body에 담아 전송
    • 전송데이터를 url encoding처리한다 (한글 인코딩 됨)
  • GET 메서드 전송 : 조회. - 저장시 사용하지 않는다.

Context-Type : multipart/form-data

파일같은 Bynary 데이터 전송 가능

그 외 타입의 데이터도 같이 전송한다. 그래서 multipart!

enctype="multipart/form-data" 로 선언하면 form 데이터는 자동으로 RequestBody에 구분되서 나간다

데이터는 ---XXX로 구분된다

<form action="/save" method="post" enctype="multipart/form-data">
상세 enctype 설명 : http://www.tcpschool.com/html-tag-attrs/form-enctype

html form 전송 시 주의사항

HTTP 메서드는 GET, POST 두개만 가능하다.

2. URI 설계

가장 중요한 것은 '리소스 식별'!

  • 리소스와 행위를 구별해야한다.
  • URI 계층구조를 사용한다 ex) member/{id}/points
  • 보통 '복수형' 단어를 사용한다 ex) /members

URI 설계 관련 용어

  • 문서(document)
    • 고유한 단일 데이터 (파일 1개, 인스턴스, 데이터베이스의 1개 row)
    • ex) /members/1, /files/mouse.jpg
  • 컬렉션 (collection)
    • '서버'가 URI를 생성하고 관리하는 리소스 디렉터리
    • ex) /members
  • 스토어 (store)
    • '클라이언트'가 URI을 알고 있으며 관리하는 리소스 저장소
    • ex) /files : 파일저장은 클라이언트가 지정한 파일을 저장한다. 즉, 애초에 파일명을 클라이언트가 알고있다
  • 컨트롤러 (controller), 컨트롤 URI
    • 문서, 컬렉션, 스토어 외 애매한 프로세스 등
    • '동사'를 직접 URI에 사용한다(행위를 지정)
    • ex) /members/{id}/new, /members/{id}/update, /members/{id}/delete
    • 진짜 어쩔 수 없을 때 사용

설계예시01 - HTTP API 컬렉션 - POST 신규자원등록 - [회원관리 시스템] 

  • 회원 목록 조회 GET /members
  • 회원 1명 조회 GET /members/{id}
  • 회원 등록 POST /members
    : 클라이언트는 ID를 모른다. 이렇게 요청하고나면, 서버에서 ID가 생성된다.
  • 회원 수정 PATCH, PUT, POST /members/{id}
  • 회원 삭제 DELETE /members/{id}

설계예시02 - HTTP API 스토어 - PUT신규자원등록 - [파일관리 시스템]

  • 파일 목록 조회 GET /files
  • 파일 1개 조회 GET /files/{filename}
  • 파일 등록 PUT /files/{filename}
    : 클라이언트는 이미 filename을 알고있다. 클라이언트가 ID를 생성하는 것이다. 파일등록은 없으면 신규등록, 있으면 덮어쓴다.
    ex) PUT /files/profile01.jpg
  • 파일 삭제 DELETE /files/profile.jpg
  • 파일 대량 등록 POST /files

HTTP API 데이터 전달 방식에서 POST 신규자원등록 과 PUT 신규자원등록 방식 차이

URI를 생성하는 주체가 다르다.

POST는 서버가, PUT은 클라이언트가 URI(데이터 키)를 생성한다

  • POST
    • 서버가 리소스 URI 관리. 클라이언트는 자원의 ID를 모른다.
    • 서버가 리소스 ID를 반환해준다. ex) Location:/members/1
    • 컬렉션 : 서버가 관리하는 리소스 디렉터리. /members
  • PUT
    • 클라이언트가 리소스 URI를 알고있어야 한다
    • 스토어 : 클라이언트가 관리하는 리소스 저장소. /files

설계예시03 - HTML Form - [회원관리 시스템]

원래는 POST, GET 만 사용가능하지만, AJAX로 해결은 된다.

하지만 이 설계 예시에서는 순수하게 HTML Form 만 갖고 설계한다

form 설계에는 form을 요청하는 API도 포함되어있다.

특징은, 메서드가 제한적이기 때문에 '컨트롤 URI'를 사용해야 한다는 점이다.

  • 회원 목록 조회 GET /members
  • 회원 1명 조회 GET /members/{id}
  • 회원 등록 폼 GET /members/new
  • 회원 등록 POST /members/new, /members
    : 폼 요청과 맞춰서 쓰는 것도 좋고.. 설계는 협의하여 진행
  • 회원 수정 폼 GET /members/{id}/edit
  • 회원 수정 POST /members/{id}/edit, /members/{id}
    : 폼 요청과 맞춰서 쓰는 것도 좋고.. 설계는 협의하여 진행
  • 회원 삭제 POST /members/{id}/delete

HTML Form 데이터 전달 방식의 특징 - 컨트롤 URI

GET, POST 만 사용할 수 있다

그래서 URI에 행동을 표시해줘야 한다.

그것을 '컨트롤 URI'라고 하며, 동사로 표현한다

/members/new, /members/{id}/edit, /members/{id}/delete 가 그 예이다.

단! 최대한 안쓰려고 노력하다가 필요할 때만 사용한다.

근데... 사실 HTML Form 데이터 전달 방식으로만 설계할 일은 실무에 없을 것이다(요즘엔 더더욱)

HTML Form 데이터 전달 방식 - 폼 요청 URI가 필요한가?

그러게... 필요한가?

아! 프론트 서버가 따로 없을 때는 필요하겠구나!

HTTP 설계 순서 정리해보기 (최소 3단계)

  1.  리소스를 정의한다. 즉, 리소스와 행위 분리하고, 디렉터리(컬렉션, 스토어) 설계.
    ex) /members, /reviews, /files
  2. HTTP 메서드를 선택하고 URI를 설계한다
  3. 깔끔하게 매치되는 HTTP 메서드가 없으면 POST메서드 or 컨트롤 URI를 적절하게 사용한다.
    애매하면 만능 POST

이 글은 인프런 김영한 님의 강의 '모든 개발자를 위한 HTTP 웹 기본 지식'를 공부하고 개인적으로 정리한 글입니다.