CS/HTTP

[HTTP]모든 개발자를 위한 HTTP 웹 기본 지식 - 5

haenni 2024. 1. 3. 12:22

👩‍💻 HTTP 메서드 활용

 

 

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

✏️클라이언트 -> 서버 데이터 전달 방식은 2가지

  1. 쿼리 파라미터를 통한 데이터 전송
    1. GET
    2. 주로 정렬 필터(검색어)
  2. 메시지 바디를 통한 데이터 전송
    1. POST, PUT, PATCH
    2. 회원 가입, 상품 주문, 리소스 등록, 리소스 변경

 

 

 

 

✏️클라이언트 -> 서버 데이터 전송의 4가지 상황

  • 정적 데이터 조회
  • 동적 데이터 조회
  • HTML Form을 통한 데이터 전송
  • HTTP API를 통한 데이터 전송

 

1. 정적 데이터 조회

:쿼리 파라미터 미사용

 

     ✔️ 이미지, 정적 텍스트 문서

     ✔️ 조회는 GET 사용

     ✔️ 정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능

 

클라이언트에서 서버로 static/star.jpg 라고 URI를 지정해주면 추가적인 데이터를 전달하는 것은 없다.
URI 경로만 넣으면 서버에서 이미지 리소스를 만들어서 클라이언트에게 내려주는 것 이다.

 

 

 

2. 동적 데이터 조회

:쿼리 파라미터 사용

 

     ✔️ 주로 검색, 게시판 목록에서 정렬 필터(검색어)

     ✔️ 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용

     ✔️ 조회는 GET 사용

     ✔️ GET은 쿼리 파라미터 사용해서 데이터를 전달

 

 

HTTP 메시지에 쿼리 파라미터를 사용해 서버로 보내고 서버에선 key, value로 꺼내서 결과를 찾아 응답해줌

 

 

 

 

3. HTML Form 데이터 전송

:POST 전송 - 저장

 

"POST 전송"

action은 save라고 하고 method는 post라고 넣는다.
input으로 이름과 나이를 받아 전송을 누르면 웹브라우저가 form 데이터를 읽어서 HTTP 메시지를 생성해준다.

username과 kim을 HTTP 바디에 넣어 서버에 전송한다.

 

 

"GET 전송"

 

"GET"이기에 메시지 바디는 쓰지 않는다.(POST는 메시지 바디를 씀) 
그래서 input으로 받은 정보를 쿼리 파라미터(query parameter)에 넣어버린 뒤, 서버에 전송한다

 

"GET 조회"

 

 

 

 

"multipart/form-data"

Username, age 뿐만 아니라 byte로 되어있는 파일까지 전송해야함.(multipart/forrm-data 사용해야함)
boundary가 다 잘라준다.
multipart = 여러 컨텐츠 타입의 데이터를 보낼 수 있다

 

 

정리

 

 

 

4. HTMLAPI 데이터 전송

:POST 전송 - 저장

 

내가 직접 HTTP 메시지를 다 만들어서 전송하면 된다. 

정리

 

 

 

 

 

 

 

 

 

 

📌 HTTP API 설계 예시

✏️POST 기반 등록과 PUT기반 등록의 차이 

 

1. 회원 관리 시스템 -"POST" 기반 등록 (중요!!!!!!!!!!!!!)

 

< " 클라이언트는 등록될 리소스의 URI를 모른다." 는 무슨 뜻일까? >

그림을 보면 클라이언트는 메시지바디에 "young"이라는 이름과 20이라는 나이를 적어 서버에게 전송하였다.
서버는 패킷을 까서 해석한 뒤, 응답 데이터로 새로운 리소스 식별자를 생성하여 Location에 리소스 식별자를 보낸다 (ex)100
: 그러므로 클라이언트는 리소스의 URL를 모른다. (클라이언트는 uri경로를 /members 로만 지정함)

 

 

 

2. 파일 관리 시스템 -"PUT" 기반 등록 (중요!!!!!!!!!!!!!)

 

 

 

< " 클라이언트가 리소스의 URI를 알고 있어야 한다." 는 무슨 뜻일까? >

그림을 보면 클라이언트는 메시지바디에 "young"이라는 이름과 20이라는 나이를 적어 서버에게 전송하였다.
서버는 패킷을 까서 해석한 뒤, 응답 데이터로 새로운 리소스 식별자를 생성하여 Location에 리소스 식별자를 보낸다 (ex)100
: 그러므로 클라이언트는 리소스의 URL를 모른다. (클라이언트는 uri경로를 /members 로만 지정함)

 

 

 

 

 

✏️HTML FORM 사용

:HTML FORM은 GET, POST만 지원한다. (AJAX 같은 기술을 사용하여 해결 가능 하지만 여기서는 순수 HTML, HTML FORM이라고 가정한다.)

  • HTML FORM은 GET, POST만 지원
  • "컨트롤 URI" (실무에서 엄청 많이 쓴다)
    • GET, POST만 지원하므로 제약이 있는 HTML FORM을 해결하기 위해 동사로 된 리소스 경로를 사용
    • POST의 /new, /edit, /delete가 컨트롤 URI
    • HTTP 메서드로 해결하기 애매한 경우 사용함 

HTML FORM 사용 예시

 

"정리"

1. HTTP API - 컬렉션
   - POST 기반 등록
   - 서버가 리소스 URI를 결정

2. HTTP API - 스토어
   - PUT 기반 등록
   - 클라이언트가 리소스 URI 결정

3. HTML FORM 사용
   - 순수 HTML + HTML form 사용
   - GET, POST만 지원