김영한 님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 보고 작성한 내용입니다.
https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC/dashboard

1. 클라이언트 -> 서버 데이터 전송 방식 2가지

1-1. 쿼리 파라미터를 통해 데이터를 전송

• GET 방식에서 많이 사용

• ?, key=value 같은 쿼리 파라미터를 사용하는 방식

• 검색을 하거나 정렬조건을 줄 때 많이 사용하는 방식

1-2. message body에 담아 데이터를 전송

• POST, PUT, PATCH 방식을 사용

• ex> 회원 가입, 상품 주문, 리소스 등록, 리소스 변경 등

2. 클라이언트 -> 서버 데이터 전송 4가지 상황

• 정적 데이터 조회

• 동적 데이터 조회

• HTML Form을 통한 데이터 전송

• HTTP API를 통한 데이터 전송

3. 정적 데이터 조회

• 조회이기 때문에 GET 방식

• 이미지, 정적 텍스트 문서 조회

• 쿼리 파라미터 사용 X

• 추가적인 데이터 전달 없이 URI 경로만 지정

  • /static/star.jpg

4. 동적 데이터 조회

• 조회이기 때문에 GET 방식

• 쿼리 파라미터 사용해서 데이터를 전달해 조회하는 방식

• 서버에서 쿼리 파라미터를 key, value 형식으로 꺼내서 활용 & 결과를 동적으로 생성

• 검색을 하거나, 게시판 목록에서 정렬 조건을 주는 등의 정렬 필터로 사용

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

5-1. POST 방식

<form action = "/save" method = "post">
    <input type = "text" name = "username">
    <input type = "text" name = "age">
    <button type = "submit">전송</button>
</form>

POST /save HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded

username=kim&age=20

• form 태그의 action에는 URL, method에는 HTTP method를 작성

• Form 태그 내부의 input 태그의 name 속성에 명시된 것들이 전달되는 데이터

  • username, age

• 버튼을 누르면(submit) Form의 데이터를 읽어서 웹 브라우저가 HTTP 메세지를 생성

• 회원 가입, 상품 주문, 데이터 변경 시 사용

• Content-Type: application/x-www-form-urlencoded

  • form 태그의 내용을 key=value 형식 ( 쿼리 파라미터와 유사한 형식 )으로 데이터를 만든다

  • 만든 데이터를 HTTP message body를 통해 쿼리 파라미터와 거의 동일한 방식으로 서버에 전송

  • 전송 데이터를 url encoding 처리

    • ex> abc김 -> abc%EA%B9%80

5-2. GET 방식

<form action = "/members" method = "get">
    <input type = "text" name = "username">
    <input type = "text" name = "age">
    <button type = "submit">전송</button>
</form>

GET /members?username=kim&age=20 HTTP/1.1
Host: localhost:8080

• form 태그의 method에 GET을 사용할 수 있음

  • GET은 message body를 사용하지 않기 때문에 form 태그의 내용을 쿼리 파리미터에 넣는다

• 정리하자면 form 태그 사용 시 post면 웹 브라우저가 form 태그의 내용을 message body에 넣는다

• get이면 url 경로에 쿼리 파라미터를 사용해서 넣는다

• 참고: HTML Form 전송은 GET, POST만 지원

5-3. 복합 데이터 전송

<form action = "/save" method = "post", enctype="multipart/form-data">
    <input type = "text" name = "username">
    <input type = "text" name = "age">
    <input type = "fild" name = "file1">
    <button type = "submit">전송</button>
</form>

POST /save HTTP/1.1
Host: localhost:8080
Content-Type: multipart/form-data; boundary=----XXXX

----XXXX
Content-Disposition: form-data; name="username"

kim
----XXXX
Content-Disposition: form-data; name="age"

20
----XXXX
Content-Disposition: form-data; name="file1"; filename="intro.png"
Content-Type: image/png

...
----XXXX

• Content-Type: multipart/form-data

  • 파일 업로드 같은 바이너리 데이터 전송 시 사용

  • 텍스트 파일 및 파일을 같이 전송 가능 ( 서로 다른 종류의 파일을 form의 내용과 함께 전송 가능 )

  • form 태그의 enctype 속성을 multipart/form-data로 지정하면 boundary를 사용해서 form의 input 태그들을 자동으로 구분해준다

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

• 직접 HTTP message를 만들어서 전송

  • message body에 json 데이터를 넣고

  • Content-Type: application/json 으로 설정

• HTTP API 사용 시

  • GET 방식 : 조회할 때는 쿼리 파라미터로 데이터 전달

  • POST, PUT, PATCH 방식 : message body를 통해 데이터 전송

  • Content-Type: application/json을 주로 사용 ( 사실상 표준 )

    • TEXT, XML, JSON 등등

• API 통신을 사용하는 경우

  • 서버끼리 통신하는 백엔드 시스템

  • 앱 클라이언트에서 전송하는 경우 -- 아이폰, 안드로이드

  • 웹 클라이언트

    • HTML에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용 ( AJAX )

    • ex> React, VueJs 같은 웹 클라이언트와 API 통신

7. HTTP API 설계 예시

• URI는 리소스를 식별해야한다

• 리소스를 사용한 동작은 HTTP method를 사용해서 구분한다

7-1. POST를 이용한 등록 설계 특징 ( 회원 관리 시스템 )

• 등록 시, 클라이언트는 등록될 리소스의 URI를 모른다

  • 데이터를 전달하고 새로운 회원을 만들어달라고 요청만 수행

  • /members에 POST 방식으로 요청

• 서버가 새로 등록된 리소스를 식별할 수 있는 URI를 생성한다

  • 클라이언트에게 받은 데이터를 이용해 회원을 생성하고 생성한 회원을 구분할 수 있는 URI를 만든다

    • /members/100

    • 생성된 회원을 구분할 수 있는 100이라는 숫자는 서버가 부여

  • Response message를 보낼 때 헤더에 새로 등록된 리소소의 위치를 나타내는 Location: /members/100를 추가할 수 있다

• 위와 같은 관리 형식을 컬렉션(Collection)이라고 한다

  • 서버가 관리하는 리소스 디렉토리

  • 서버가 리소스의 URI를 생성하고 관리

  • 여기서 컬렉션은 /members

7-2. PUT을 이용한 등록 설계 특징 ( 파일 관리 시스템 )

• PUT 방식은 리소소를 전체 대체하기 때문에 게시판의 게시글을 수정하는 경우나 파일 관리 시스템에 적합

• 등록 시, 클라이언트가 리소스 URI를 알고 있어야 한다

  • 클라이언트가 직접 리소스의 URI를 지정한다

  • /files/{filename}에 PUT 방식으로 요청

  • PUT 방식으로 등록을 하기 때문에 POST의 의미를 임의로 지정할 수 있음

• 위와 같은 관리 형식을 스토어(Store)이라고 한다

  • 클라이언트가 관리하는 리소스 저장소

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

  • 여기서 스토어는 /files

7-3. HTML Form을 이용한 API 설계

• 순수한 HTML과 HTML Form만을 이용한다고 가정

• 컨트롤 URI : HTML Form은 GET, POST만 지원하므로 제약이 있기 때문에 이를 해결하기 위해 동사로 된 리소스 경로 사용

  • 회원 등록 : /members/new

  • 회원 수정 : /members/{id}/edit

  • 회원 삭제 : /members/{id}/delete

  • 전부 POST 방식이고 /new, /edit, /delete가 컨트롤 URI

  • HTTP 메서드로 해결하기 애매한 경우 사용 ( PUT, PATCH 등 )

8. 정리

• 컬렉션(collection)

  • POST 기반 등록

  • 서버가 관리하는 리소스 디렉터리

  • 서버가 리소스의 URI를 생성하고 관리

  • ex> /members

• 스토어(store)

  • PUT 기반 등록

  • 클라이언트가 관리하는 자원 저장소

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

  • ex> /files

• 컨트롤 URI

  • HTTP 메서드로 해결하기 애매한 경우 사용

  • 동사를 직접 사용

  • ex> /members/{id}/delete