(HTTP) 기본, 메서드, 메서드 활용

짜스의 하루 ·2024년 2월 28일

모든 것이 HTTP

일반적으로 휴대폰, 컴퓨터 등에서 필요한 데이터는 서버에 요청하여 받아온다.
네트워크를 통해 서버로부터 데이터를 가져오기 위한 통신으로 크게 HTTP 통신과 Socket 통신 2가지가 있다.

1. HTTP (Hyper Text Transfer Protocol)
HTTP는 하이터 펙스트를 주고 받기 위한 규칙(통신 규약)이다.

2. HTTP 메시지에 모든 것을 전송 가능하다.
1) 거의 모든 형태의 데이터 전송 가능

  • HTML, TEXT
  • IMAGE, 음성, 영상, 파일
  • JSON, XML(API)

2) 서버간에 데이터를 주고받을 때에도 대부분 HTTP를 사용
실무에서 통신할 때 TCP프로토콜을 사용하는 경우는 거의 없다.

3. HTTP역사
HTTP/1.1 (1997년): 가장 많이 사용, 우리에게 가장 중요한 버전
RFC2068 (1997) -> RFC2616 (1999) -> RFC7230~7235 (2014)

4. HTTP 특징
1)클라이언트 서버 구조
2) 무상태 프로토콜(Stateless), 비연결성
3) HTTP 메시지
4) 단순함, 확장 가능


클라이언트 서버 구조

  • Request, Response 구조
  • 클라이언트는 서버에 요청을 보내고, 응답을 대기
  • 서버가 요청에 대한 결과를 만들어서 응답

클라이언트와 서버를 개념적으로 분리하는 것이 중요하다
1) 클라이언트 - UI,UX, 사용성에 집중
2) 서버 - 비지니스 로직, 데이터 처리에 집중
-> 클라이언트 , 서버는 각각 독립적으로 진화 가능하다.


무상태 프로토콜

Stateless(스테이스리스) : 서버가 클라이언트의 상태를 보존하지 않는다.
장점: 서버 확장성이 높음(스케일 아웃)
단점: 클라이언트가 추가 데이터 전송

Stateful, Stateless차이
1) 상태유지 - Stateful


2) 무상태 - Stateless

<정리>
1) 상태유지 - 중간에 다른 점원으로 바뀌면 안된다(중간에 다른 점원으로 바뀔 때, 상태 정보를 다른 점원에게 미리 알려줘야 한다)
2) 무상태 - 중간에 다른 점원으로 바뀌어도 된다.

  • 갑자기 고객이 증가해도 점원을 대거 투입할 수 있다.
    -> 갑자기 클라이언트 요청이 증가해도, 서버를 대거 투입할 수 있다.
  • 무상태는 응답 서버를 쉽게 바꿀 수 있다 -> 무한한 서버 증설 가능

상태유지 - Stateful

1) 항상 같은 서버가 유지되어야 한다.
클라이언트 A는 서버1과 계속 통신을 유지해야 한다.
클라이언트 A가 서버1에게 노트북 정보를 보내고, 서버로부터 응답을 받고 2개라는 정보를 보내고, 서버로부터 응답을 받는다
-> 서버 1은 클라이언트A가 요청한 노트북, 2개라는 상태를 모두 유지하고 있는 상태가 된다.

2) 중간에 서버가 장애가 난다면?
서버1이 장애가 나면, 클라이언트A는 결제를 처움부터 다시해야 하는 문제가 생긴다.

무상태 - Stateless

1) 아무 서버나 호출해도 된다
클라이언트A가 모든 정보(노트북, 2개)를 담아서 서버1에 요청을 하면, 서버1을 상태를 보관하지 않고 응답만 한다. 2) 중간에 서버가 장애가 난다면?
만약 서버1에서 장애가 나면 중계 서버가 2로 요청을 던진다.
서버2도 마찬가지로 클라이언트A의 상태를 보관하지 않고 응답만 한다.

3) 스케일 아웃- 수평 확장 유리
예를 들어 이벤트를 하는 경우, 서버를 확장시켜 놓으면 된다.

<실무의 한계>
무상태로 설계할 수 있는 경우도 있고, 없는 경우도 있다
--> 가능한 무상태로 설계하고, 상태 유지는 최소한만 사용하자.
1) 무상태 - 로그인이 필요없는 단순한 서비스 소개 화면
2) 상태 유지 - 로그인

  • 로그인한 사용자의 경우, 로그인 했다는 상태를 서버에 유지
  • 일반적으로 브라우저 쿠키와 서버 세션등을 사용해서 상태 유지

비 연결성(connectionless)

1. 연결을 유지하는 모델
TCP/IP는 연결을 유지하는 모델이다.

1)클라이언트1 & 서버 TCP/IP 연결
클라이언트 1은 서버와 연결된 후, 요청과 응답을 주고 받는다.
현재 클라이언트 1은 서버와 연결이 유지된 상태이다.

2) 클라이언트2 & 서버 TCP/IP 연결
클라이언트2는 서버와 연결된 후, 요청과 응답을 주고 받는다.
현재 클라이언트1, 2는 서버와 연결이 유지된 상태이다.

3) 클라이언트3&서버 TCP/IP 연결
클라이언트3은 서버와 연결된 후, 요청과 응답을 주고 받는다.
현재 클라이언트1, 2, 3은 서버와 연결이 유지된 상태이다.

4) 클라이언트1 & 서버 요청, 응답
클라이언트1은 이미 연결된 상태이므로 TCP/IP 연결을 하지 않고, 요청과 응답을 주고 받는다.
현재 클라이언트 1, 2, 3은 서버와 연결이 유지된 상태이다.

  • 서버 연결을 계속 유지하고 있기 때문에, 서버 자원 소모가 된다.

2. 연결을 유지하지 않는 모델
1) 클라이언트1&서버 TCP/IP 연결
클라이언트1은 서버와 연결된 후, 요청과 응답을 주고 받는다.
현재 클라이언트1은 서버와 연결이 유지된 상태이다

2) 클라이언트1&서버 TCP/IP 연결 종료
클라이언트1은 필요한 요청, 응답이 끝나면 서버와 연결을 종료한다.
현재 서버와 연결이 유지된 클라이언트는 없다.

3. 비 연결성

  • HTTP는 기본이 연결을 유지하지 않는 모델
  • 일반적으로 초 단위 이하의 빠른 속도로 응답
  • 1시간 동안 수천 명의 서비스를 사용해도 실제 서버에서 동시에 처리하는 요청은 수십개 이하로 매우 작음
  • 서버 자원을 매우 효율적으로 사용

4. 비 연결성 - 한계와 극복
<한계>
1) TCP/IP 연결을 새로 맺어야 함 -> 3 way handshake 시간 추가
2) 웹 브라우저로 사이트 요청을 하면 HTML, 자바스크립트,css, 추가 이미지 등 수많은 자원이 함께 다운로드
→ 자원을 다운로드 받을 때마다 3 way handshake를 해야 하는 문제..

<극복>
1) 지금은 HTTP 지속 연결(Persistent Connections)로 문제 해결
2) HTTP/2, HTTP/3 에서 더 많은 최적화

5.HTTP 초기 - 연결, 종료 낭비
연결 → 자원 요청/HTML 응답 → 종료
필요한 자원이 있을 때마다, 위 과정을 무한 반복한다.

6. HTTP 지속연결(Persistent Connections)
연결 → 자원 요청/HTML 응답 → 자원 요청/자바스크립트 응답 → ... → 종료
필요한 자원이 있으면 연결을 유지하고 더 이상 필요한 자원이 없을 떄, 연결을 종료한다.

  • 매커니즘 마다 연결 지속 시간의 차이는 있으나, 보통 HTML 한 페이지에 필요한 자원을 모두 받을 떄까지는 연결을 유지한다.

7. Stateless 상태를 기억하자
서버 개발자들이 어려워하는 업무 = 같은 시각에 딱 맞춰 대용량 트래픽이 발생하는 경우
ex) 선착순 이벤트, 명절 KTX 예매, 수강 신청 등 → 수만명 동시 요청
하지만, 최대한 Stateless 하게 설계하는 것이 중요하다.

  • 보통 첫 페이지는 로그인도 필요없는 정적 페이지(순수 HTML)을 뿌린 다음, 이벤트 참여 버튼을 누르게 하는 방식으로 구현

<Stateless와 Connectionless의 차이>
1) Stateless - 클라이언트와 서버 사이에 상태를 유지하지 않는다
2) Connectionless - TCP/IP 커넥션 연결을 지속하지 않는다


HTTP 메시지(중요)

HTTP 요청 메시지와 HTTP 응답 메시지
보는 것과 같이, HTTP 요청 메시지와 HTTP 응답 메시지는 형태가 조금 다르다.

**HTTP 메시지(HTTP 요청 메시지와 HTTP 응답 메시지)의 구조

1) start-lint : 시작라인
2) header: 헤더
3) empty line : 공백라인
4) message body

HTTP 요청 메시지 구조

1) start-line : http 메서드/path/query string/http 버전
2) header - 호스트(도메인명)
3) empty line
4) message body - 전송할 데이터가 없으면, 공백으로
HTTP 요청 메시지도 body 본문을 가질 수 있다!

HTTP 응답 메시지 구조

1) start-line - http 버전/
2) header -
3) empty line -
4) message body - html

1. 시작라인(Start-line) - 요청메세지
start-line = request-line
request-line = method request-target HTTP-version

  • method: HTTP 메서드
  • request-target: 요청 대상
  • HTTP-version: HTTP 버전

1) 요청 메시지 - HTTP 메서드
서버가 수행해야 할 동작을 지정한다
종류 : GET, POST, PUT, DELETE

  • GET: 리소스 조회
  • POST: 요청 내역 처리

2) 요청 메세지- 요청 대상

  • 절대 경로 = "/" 로 시작하는 경로

3) 요청 메시지 - HTTP 버전

2. 시작 라인(start-line) - 응답 메시지

status-line = HTTP-version status-code reason-phrase CRLF(엔터)
1) HTTP-version(HTTP 버전)
2) status-code(HTTP 상태 코드) 중요!!
요청 성공/실패

  • 200: 성공
  • 400: 클라이언트 요청 오류
  • 500: 서버 내부 오류
    3) reason-phrase(이유 문구)
    사람이 이해할 수 있는 짧은 상태 코드 설명글
  1. HTTP 헤더
    header-field = field-name ":" OWS field-value OWS (OWS:띄어쓰기 허용)

    <용도>
    HTTP 전송에 필요한 모든 부가 정보
  • 메시지 바디의 내용, 메시지 바디의 크기 , 압축, 인증, 요청 등등..

7. HTTP 메시지 바디
<용도>
실제 전송할 데이터

  • HTML 문서, 이미지, 영상, JSON 등등 byte로 표현할 수 있는 모든 데이터 전송 가능

HTTP 정리

  • HTTP 메시지에 모든 것을 전송
  • HTTP 역사 HTTP/1.1 기준으로 학습
  • 클라이언트 서버 구조
  • 무상태 프로토콜(Stateless)
  • HTTP 메시지
  • 단순함, 확장 가능
  • 지금은 HTTP 시대

HTTP 메서드

HTTP API를 만들어보자

  1. 요구사항
    회원 정보 관리 API를 만들어라.
    1) 회원 목록 조회
    2) 회원 조회
    3) 회원 등록
    4) 회원 수정
    5) 회원 삭제

  2. API URI 설계1
    API 기능에 대응하는 직관적인 이름으로 URI 를 설계하면, 다음과 같이 URL을 모두 따로 만들어야 한다.
    1) 회원 목록 조회 - /read-member-list
    2) 회원 조회 - /read-member-by-id
    3) 회원 등록 - /create-member
    4) 회원 수정 - /update-member
    5) 회원 삭제 - /delete-member

3. 이것은 좋은 URI 설계일까?
가장 중요한 것은 리소스 식별이다

  1. API URI 고민
    1) 리소스의 의미
  • 회원이라는 개념 자체가 리소스이다

2) 리소스 식별 방법

  • 회원을 등록,수정, 조회하는 것을 모두 배제한다.
  • 회원이라는 리소스만 식별하면 된다 -> 회원 리소스를 URI에 매핑한다.
  1. API URI 설계2
    리소스 식별과 URI 계층 구조를 활용해보자
    1) 회원 목록 조회 /members
    2) 회원 조회 /members/{id}
    3) 회원 등록 /members/{id}
    4) 회원 수정 /members/{id}
    5) 회원 삭제 /members/{id}
    회원이라는 리소스를 URI에 매핑하면, 회원 조회/등록/수정/삭제의 URI가 /members/{id}로 동일하여 구분할 수가 없다는 문제가 생긴다.

  2. 리소스와 행위를 분리
    가장중요한 것은 리소스를 식별하는 것
    1) 리소스와 해당 리소스를 대상으로 하는 행위를 분리

  • 리소스 : 회원 -> 명사
  • 행위 : 조회, 등록, 삭제, 변경 -> 동사
    2) URI로 리소스를 표현해야 한다.
    3) 리소스에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현된다.

HTTP 메서드 - GET, POST

HTTP 메서드는 클라이언트가 서버에 무언가를 요청할 때 기대하는 행위이다.

<HTTP 주요 메서드 종류>
1) GET : 리소스 조회
2) POST : 요청 데리터 처리(주로 등록에 사용)
3) PUT: 리소스를 대체, 해당 리소스가 없으면 생성(파일을 폴더에 넣는 것과 비슷)
4) PATCH: 리소스부분 변경(회원이름 변경)
5) DELETE : 리소스 삭제

1. GET

리소스 조회

  • 서버에 전달하고 싶은 데이터는 qurey(쿼리 파라미터, 쿼리 스트링)을 통해서 전달
  • 메시지 바디를 사용해 데이터를 전달할 수 있지만, 지원하는 곳이 많지 않아서 권장하지 않는다.

GET과정
1) 리소스 조회1 - 메시지 전달
클라이언트가 members/100 유저를 조회하기 위해 GET 방식으로 HTTP 요청 메시지를 서버에 전달한다.

2) 리소스 조회2 -서버 도착
서버에 GET 메시지가 도착하면 서버는 GET 메시지를 해석하여 DB에서 /members/100 유저를 조회하여 JSON 메시지를 만든다.

3) 리소스 조회3 - 응답 데이터
서버는 리소스 조회에 성공했다는 의미로
-> status-line에 200 OK,
header에 Content-type, Content-Length,
message-body에 /members/100을 조회한 결과(JSON)을 붙여 HTTP 응답 메시지를 만든다.

POST

요청 데이터를 처리

  • 메시지 바디를 통해 서버로 요청 데이터를 전달
  • 서버는 요청 데이터를 처리(메시지 바디를 통해 들어온 데이터를 처리하는 모든 기능 수행)
  • 주로 전달된 데이터로 신규 리소스를 등록, 프로세스 처리에 사용

POST 과정
1) 리소스 조회1 -메시지 전달
클라이언트가 유저를 등록하기 위헤 message-body에 유저 데이터를 담아서 POST방식으로 HTTP 요청 메시지를 서버에 전달한다.
(POST로 /members에 요청이 들어오면 서버는 데이터를 저장한다는 것을 미리 약속해놓는다)

2) 리소스 조회2 - 서버 도착
서버에 POST 메시지가 도착하면 서버는 POST 메시지를 해석하여 DB에 데이터를 등록하고, 신규 리소스 식별자를 생성한다.

3) 리소스 조회3 - 응답 데이터
서버는 데이터 등록을 성공했다는 의미로
-> status-line에 201 Created,
header에 Location: 리소스가 생성된 신규URI 경로(/members/100),
message-body에 등록한 리소스(JSON)을 붙여서 HTTP 응답 메시지를 만든다.

<POST가 사용되는 곳>
1) HTML 양식에 입력된 필드와 같은 데이터 블록을 데이터 처리 프로세스에 제공

  • HTML FORM에 입력한 정보로 회원 가입, 주문 등에서 사용
    2) 게시판, 뉴스 그룹, 메일링 리스트, 블로그 또는 유사한 기사 그룹에 메시지 게시
  • 게시판 글쓰기, 댓글 달기
    3) 서버가 아직 식별하지 않은 새 리소스 생성
  • 신규 주문 생성
    4) 기존 자원에 데이터 추가
  • 한 문서 끝에 내용 추가하기
    → 이 리소스 URI에 POST 요청이 오면 요청 데이터를 어떻게 처리할지 리소스마다 따로 정해야 함(정해진 것이 없음)

<POST 정리>
1) 새 리소스 생성(등록)
서버가 아직 식별하지 않은 새 리소스 생성
2) 요청 데이터 처리(중요!)
단순히 데이터를 생성, 변경하는 것을 넘어서 프로세스를 처리해야 하는 경우 (주문에서 결제 완료 → 배달시작 → 배달완료 처럼 단순히 값 변경을 넘어 프로세스 상태가 변경되는 경우)

  • POST의 결과로 새로운 리소스가 생성되지 않을 수 있음
    3) 다른 메서드로 처리하기 애매한 경우
    ex) JSON으로 조회 데이터를 넘겨야하는데, GET 메서드를 사용하기 어려운 경우 POST의 message-body에 조회 데이터를 넘긴다.

데이터를 조회할 때에는 최대한 GET을 쓰고, 그 이외에 데이터가 변경되거나, 프로세스가 진행될 때에는 POST를 쓰자


PUT

PUT : 리소스 대체

  • 리소스가 있으면 대체(덮어씀)
  • 리소스가 없으면 생성
    (중요!) 클라이언트가 리소스를 식별한다
  • 클라이언트가 리소스 위치를 알고 URI를 지정(POST와 큰 차이점)
  • POST/members: -> 클라이언트는 리소스 위치 모름
  • PUT/members/100 -> 클라이언트는 리소스 위치를 알고 URI지정

PUT동작 과정
<리소스가 있는 경우>
1) 리소스 대체 - 메시지 전달
클라이언트가 /members/100에 리소스를 대체하기 위해 PUT방식으로 HTTP 요청 메시지를 서버에 보낸다.

2) 리소스 대체2 - 리소스 대체
서버에 /members/100이 있으면 HTTP요청 메시지의 message-body에 있는 데이터로 리소스가 대체된다.

<리소스가 없는 경우>
1) 리소스 대체1 - 메시지 전달
클라이언트가 /members/100에 리소스를 대체하기 위해 PUT 방식으로 HTTP 요청 메시지를 서버에 보낸다.

2) 리소스 대체 2 - 신규 리소스 생성
서버에 /members/100 가 없으면, HTTP 요청 메시지의 message-body에 있는 데이터로 신규 리소스가 생성된다.

PUT은 리소스를 완전히 대체한다!
1) 리소스를 완전히 대체한다1
age의 값만 변경하기 위해 message-body에 username은 빼고 변경할 age 값만 담아서 보낸다.

2) 리소스를 완전히 대체한다 2
리소스를 덮어쓰기 때문에 messsage-body에 있는 age의 값만 들어가고 username 필드가 삭제된다.

PATCH

리소스 부분 변경

PATCH 동작 과정
1) 리소스 부분 변경1
age의 값만 변경하기 위해 message-body에 username은 뺴고 변경할 age 값만 담아서 보낸다.

2) 리소스 부분 변경2
리소스를 부분 변경하기 때문에, message-body에 있는 age 값만 변경한다.

DELETE

리소스 제거

DELETE 동작 과정
1) 리소스 제거1
클라이언트가 /members/100에 있는 리소스를 삭제하기 위해 서버에 DELETE 방식으로 HTTP 요청 메시지를 보낸다.

2) 리소스 제거2
서버는 /members/100에 있는 리소스를 제거한다.

<정리>

  • PUT은 완전히 리소스를 대체 (덮어씀) 할 때 사용하고,
    PATCH는 리소스를 부분 변경할 때 사용한다.
  • 요정 받은 리소스(URI)가 없을 때, PUT은 신규 리소스를 생성해주지만, PATCH는 리소스가 없다는 오류를 발생해야 한다.
  • PUT /members/100 요청 → /members/100이 없으면 members/100 생성
  • PATCH /members/100 요청 → members/100이 없다는 오류 발생

HTTP 메서드 속성

<HTTP 메서드 속성>
1. 안전(Safe Methods)
2. 멱등(Idempotent Methods)
3. 캐시가능(Cacheable Methods)

1. 안전(Safe)
호출해도 리소스를 변경하지 않는다
1) 안전O : GET, HEAD
2) 안전X : POST, PUT, PATCH, DELETE

Q. 계속 호출하면, 로그 같은 것이 쌓여서 장애가 발생할 수도 있지 않은가?
A. 안전은 해당 리소스만 고려한다. 그런 부분까지 고려하지 않는다.

2. 멱등(Idempotent)
f(f(x)) = f(x)
클라이언트가 서버에 같은 요청을 여러 번 해도 결과가 똑같다.
(한번 호출을 하든 두번 호출을 하든 결과는 동일하다)

<멱등 메서드>
1) 멱등O

  • GET: 몇 번을 조회하든 같은 결과가 조회된다.
  • PUT: 결과를 대체한다. 따라서 같은 요청을 여러 번 해도 대체된 결과는 같다.
  • DELETE: 결과를 삭제한다. 따라서 같은 요청을 여러 번 해도 삭제된 결과는 같다.

2) 멱등X

  • POST: 멱등이 아니다! 같은 데이터를 계속 POST로 전송하면, 서버에서 매번 새로운 리소스를 생성한다(아이디를 새로 발급)
    ex) 두번 호출하면 같은 결제가 중복해서 발생할 수 있다.

<활용>
1) 자동 복구 메커니즘

  • 클라이언트가 DELETE를 요청했는데, 서버에서 응답이 없을 때, 클라이언트는 요청이 잘 되었는지 모른다
    그래서 클라이언트가 DELETE를 자동으로 재시도한다. 같은 요청을 해도 결과는 같기 때문에, 문제가 되지 않는다.

Q. 재요청 중간에 다른 곳에서 리소스를 변경하면, 처음 요청했을 때의 결과와 재요청 결과가 달라진다. 이렇게 되면 멱등이 아니지 않은가?

A. 멱등은 외부 요인으로 중간에 리소스가 변경되는 것까지는 고려하지 않는다.

3. 캐시 가능(Cacheable)
응답 결과 리소스를 캐시해서 사용해도 되는가?
웹 브라우저에서 매우 큰 이미지를 요청하면, 다음에 또 같은 리소스 서버에 요청할 필요가 없다.
즉, 내 로컬 PC에 웹 브라우저가 리소스를 저장하고 이후에 같은 요청이 들어오면 서버에 요청하지 않는다.

<캐시가능 메서드>
1) 캐시O: GET, HEAD, POST, PATCH

  • 실제로는 GET, HEAD 정도만 캐시로 사용(GET은 URL을 키로 해서 캐시하면되므로 쉬움)
  • POST, PATCH는 본문 내용까지 캐시 키로 고려하는 것이 구현이 쉽지 않아 거의 사용X

HTTP- 메서드 활용

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

1. 데이터 전달 방식
데이터 전달 방식은 크게 2가지로 나눈다.
1) 쿼리 파라미터를 통한 데이터 전송

  • GET
  • 주로 정렬 필터(검색어)

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

  • PATCH, PUT, POST
  • 회원 가입, 상품 주문, 리소스 등록, 리소스 변경

2. 4가지 상황
1) 정적 데이터 조회

  • 이미지, 정적 텍스트 문서
    2) 동적 데이터 조회
  • 주로 검색, 게시판 목록에서 정렬 필터
    3) HTML Form 을 통한 데이터 전송
  • 회원 가입, 상품 주문, 데이터 변경
    4) HTTP API를 통한 데이터 전송
  • 회원 가입, 상품 주문, 데이터 변경
  • 서버 to 서버, 앱 클라이언트, 웹 클라이언트(Ajax)

정적 데이터 조회

  • 정적 데이터: 이미지, 정적 텍스트 문서
  • 조회 : GET 사용

정적 데이터는 보통 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능

동적 데이터 조회
<쿼리 파라미터 사용>

  • 동적 데이터 : 검색, 게시판 목록에서 정렬 필터(검색어)
  • 조회 : GET 사용

동적 데이터는 쿼리 파라미터를 사용해서 조회 가능

HTML Form 을 통한 데이터 전송
1) POST 전송 - 저장
post method로 된 Form 태그의 submit 버튼을 누르면, 웹 브라우저가 HTML Form의 데이터를 읽어서 HTTP 요청 메시지를 생성해준다.

  • message-body에 key-value 형태로 form 의 데이터를 넣음

서버가 POST 메시지를 받으면 데이터를 저장한다.

2) GET 전송 - 저장
et method로 된 Form 태그의 submit 버튼을 누르면, 웹 브라우저가 HTML Form의 데이터를 읽어서 HTTP 요청 메시지를 생성해준다.

  • 쿼리 파라미터에 key-value 형태로 form 의 데이터를 넣음

하지만 GET은 조회에서만 사용해야 한다. 리소스 변경이 발생하는 곳에서 사용하면 안된다!

3) GET 전송 - 조회
get method로 된 Form 태그의 submit 버튼을 누르면, 웹 브라우저가 HTML Form의 데이터를 읽어서 HTTP 요청 메시지를 생성해준다.

  • 쿼리 파라미터에 key-value 형태로 form 의 데이터를 넣음

서버가 GET 메시지를 받으면 데이터를 필터링(조회)한 결과를 응답한다.

4) multipart/form-data
multipart/form-data는 파일(binary data)을 전송할 때 쓰는 인코딩 타입이다.
HTML Form 태그의 enctype="multipart/form-data"로 설정하고 submit 버튼을 누르면 웹 브라우저가 username, age, file1 데이터를 분리하여 message-body에 담아 HTTP 요청 메시지를 생성해준다.

1) HTML Form submit 시 POST 전송 - 회원가입, 상품 주문, 데이터 변경 ▶ Content-Type: application/x-www-urlencoded 사용 - 디폴트: form의 내용을 message-body에 담아 전송(key=value, 쿼리 파라미터 형식) - 전송 데이터를 url encoding 처리 EX) abc김 → abc%EA%B9%80 ▶ Content-Type: multipart/form-data 사용 - 파일 업로드 같은 바이너리 데이터 전송시 사용 - 다른 종류의 여러 파일과 폼의 내용 함께 전송O

2) HTML Form submit 시 GET 전송

  • form의 내용을 쿼리 파라미터에 담아 전송
    (참고) HTML Form 전송은 GET, POST 만 지원!!

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

<HTTP API 데이터 전송 정리>
1) 서버 to 서버

  • 백엔드 시스템 통신

2) 앱 클라이언트

  • 아이폰, 안드로이드

3) 웹 클라이언트

  • HTML 에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용(AJAX)
    EX) React, VueJs 같은 웹 클라이언트와 API 통신

4) POST, PUT, PATCH: 메시지 바디를 통해 데이터 전송
5) GET: 조회, 쿼리 파라미터로 데이터 전달
6) Content-Type: application/json을 주로 사용(사실상 표준)

  • TEXT, XML, JSON 등등

HTTP API 설계 예시

<HTTP API 설계 과정 TIP>
1) 리소스를 식별하여 리소스만으로 URI를 설계한다.
2) 문서, 컬렉션, 스토어로 해결하기 어려운 상황의 경우, 컨트롤 URI를 사용한다.

HTTP API 설계 예시 3가지

POST 기반으로 등록, PUT 기반으로 등록하는 2가지 경우의 특징을 아는 것이 중요
대부분 POST 기반 신규 자원 등록 방법(컬렉션)을 많이 사용한다.

1) HTTP API - 컬렉션
-POST 기반 등록
(회원 관리 API 제공)

2) HTTP API - 스토어

  • PUT 기반 등록
    (정적 컨텐츠 관리, 원격 파일 관리)

3) HTML FORM 사용

  • 웹 페이지 회원 관리
  • GET, POST만 지원

회원 관리 시스템
1. API 설계 : POST 기반 등록
컬렉션 = /members

Q. 회원 수정은 PATCH, PUT, POST 중 무엇으로 구현하는 것이 좋을까?
1) 개념적으로는 리소스 부분 변경인 PATCH로 하는 것이 가장 좋다.
2) 기존 리소스를 덮어써도 문제가 없는 경우, PUT을 사용할 수는 있지만 그런 경우는 거의 없다. 클라이언트에서 회원의 모든 데이터(id, 이름, email 등)을 다 보내야하기 때문이다.
-게시글 수정같은 경우, 완전히 덮어써도 문제X
3) 애매한 경우, POST를 쓰면 된다.

2) POST - 신규 자원 등록 특징

  • 클라이언트는 등록될 리소스의 URI를 모른다.
    서버가 새로 등록된 리소스 URI를 생성해준다.(중요!)

컬렉션(Collection)

  • 서버가 관리하는 리소스 디렉토링
  • 서버가 리소스의 URI를 생성, 관리

2. API 설계 - PUT 기반 등록
스토어 = /files

파일 등록같은 경우는 해당 파일이 있으면 기존 것을 덮어써야하기 때문에, PUT을 쓴다
1) PUT - 신규 자원 등록 특징

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

스토어(Store)

  • 클라이언트가 관리하는 리소스 저장소
  • 클라이언트가 리소스의 URI를 알고 관리

3. HTML FORM 사용
HTML FORM 은 GET, POST만 지원하므로 제약O
AJAX 같은 기술을 사용해서 해결O
1) API 설계 - HTML FORM 사용

회원 등록은 /member/new, /members 2가지로 URI 설계를 할 수있지만 개인적으로 회원 등록 폼과 같은 /members/new 를 사용하는 것을 추천한다. 회원 수정의 경우도 마찬가지다.
회원 등록 폼과 회원 등록의 URL을 일치하는 것을 추천한다!

HTML FORM을 사용하지 않는다면 회원 삭제의 URI는 /members/{id} DELETE로 설계하면된다.

하지만 HTML FORM은 GET, POST만 지원하기 때문에 어쩔 수 없이 컨트롤 URI를 써서 /members/{id}/delete POST로 설계한다.

2) HTML FORM의 특징

  • HTML FORM은 GET, POST만 지원하므로 제약O
  • 제약을 해결하기 위해 컨트롤 URI 사용

컨트롤 URI

  • GET, POST만 지원하는 제약을 해결하기 위해 동사로 된 리소스 경로 사용
    ( POST의 /new, /edit, /delete가 컨트롤 URI )
  • HTTP 메서드로 해결하기 애매한 경우 사용!! (HTML FORM을 사용하지 않더라도 쓸 수 O)

<정리>
1) HTTP API - 컬렉션

  • POST 기반 등록
  • 서버가 리소스 URI 결정

2) HTTP API - 스토어

  • PUT 기반 등록
  • 클라이언트가 리소스 URI 결정

3) HTML FORM 사용

  • 순수 HTML + HTML form 사용
  • GET, POST만 지원 → 컨트롤 URI로 해결
profile
2024. 01. 02 ~ 백앤드 공부 시작, 2024. 04.01 ~ 프론트 공부 시작

0개의 댓글