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

4가지 상황
• 정적 데이터 조회

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

정적 데이터 조회

간단하게 이미지 리소스만 리턴해주면 됨

조회는 GET 사용
쿼리 파라미터 없이 단순한 리소스 경로로 단순하게 조회 가능

동적 데이터 조회

검색, 정렬 필터등에 사용
조회는 GET 사용
GET은 쿼리 파라미터 사용해서 데이터를 전달

HTML Form을 활용한 데이터 전달

폼을 통해서 보낼경우 HTTP 메세지를 생성하는데

바디를 쿼리파라미터처럼 만들어서 만들어줌

content-type이 특이한데 바디를 쿼리파라미터처럼 보내줄때 사용함

Content-Type: application/x-www-form-urlencoded은 웹 개발에서 HTML <form> 태그를 사용하여 데이터를 서버로 전송할 때 자주 사용되는 콘텐츠 타입입니다. 특히, 폼 데이터를 POST 방식으로 전송할 때 기본적으로 사용되며, 데이터가 특정 형식으로 인코딩되어 서버에 전달됩니다. 이 콘텐츠 타입에 대해 더 자세히 설명드리겠습니다.

1. 기본 개념

• Content-Type 헤더: HTTP 요청이나 응답에서 전송되는 데이터의 유형을 지정하는 헤더입니다. 서버는 이 정보를 바탕으로 데이터를 어떻게 해석하고 처리할지 결정합니다.

• application/x-www-form-urlencoded: 주로 HTML 폼 데이터 전송에 사용되는 MIME 타입입니다. 폼 데이터를 URL 인코딩 방식으로 변환하여 전송합니다.

2. 데이터 인코딩 방식

폼 데이터가 application/x-www-form-urlencoded로 인코딩될 때의 과정은 다음과 같습니다:

1. 키-값 쌍 생성: 폼의 각 입력 필드는 이름(name)과 값(value)으로 구성된 키-값 쌍을 형성합니다. 예를 들어:

   <form method="POST" action="/submit">
     <input type="text" name="username" value="john_doe">
     <input type="password" name="password" value="secure123">
     <button type="submit">Submit</button>
   </form>

   이 경우 키-값 쌍은 username=john_doe와 password=secure123이 됩니다.

2. URL 인코딩: 특수 문자나 공백 등은 URL 인코딩 방식으로 변환됩니다. 예를 들어, 공백은 +로, 특수 문자는 % 뒤에 16진수 값으로 변환됩니다.

3. 쌍 연결: 모든 키-값 쌍은 & 문자로 연결됩니다. 위의 예시는 다음과 같이 인코딩됩니다:

   username=john_doe&password=secure123

3. 사용 예시

HTML 폼을 통해 데이터를 POST 방식으로 전송할 때 기본적으로 application/x-www-form-urlencoded가 사용됩니다. 예를 들어:

<form method="POST" action="/submit">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

폼을 제출하면 서버로 전송되는 데이터는 다음과 같이 인코딩됩니다:

fname=John&lname=Doe

4. 장점

• 간단함: 구조가 단순하여 구현이 쉽습니다.
• 호환성: 모든 브라우저와 서버가 지원하므로 호환성 문제가 없습니다.
• 효율성: 텍스트 기반이기 때문에 데이터 크기가 비교적 작습니다.

5. 단점

• 파일 업로드 불가: 파일을 포함한 데이터를 전송하려면 multipart/form-data를 사용해야 합니다.
• 데이터 크기 제한: 매우 큰 데이터를 전송할 때는 다른 방식에 비해 비효율적일 수 있습니다.
• 보안: 데이터가 URL 인코딩되어 전송되므로 민감한 정보는 HTTPS와 같은 보안 프로토콜과 함께 사용해야 합니다.

6. 다른 콘텐츠 타입과의 비교

• multipart/form-data: 파일 업로드와 같이 바이너리 데이터를 포함해야 할 때 사용됩니다. 각 부분이 구분자(boundary)로 나뉘어 전송되며, 더 복잡한 구조를 가집니다.
• text/plain: 데이터가 단순 텍스트로 전송됩니다. 주로 디버깅 용도로 사용되며, 실제 애플리케이션에서는 잘 사용되지 않습니다.

7. 서버 측 처리

서버는 Content-Type: application/x-www-form-urlencoded로 전송된 데이터를 해석하기 위해 URL 디코딩 과정을 거칩니다. 대부분의 서버 사이드 언어(예: PHP, Node.js, Python)는 이를 자동으로 처리하여 쉽게 접근할 수 있는 형태로 제공합니다.

8. 요약

application/x-www-form-urlencoded는 HTML 폼 데이터를 서버로 전송할 때 가장 기본적이고 널리 사용되는 콘텐츠 타입입니다. 간단하고 효율적이지만, 파일 업로드와 같은 복잡한 데이터 전송에는 적합하지 않습니다. 이러한 경우에는 multipart/form-data를 사용하는 것이 일반적입니다. 폼 데이터를 전송할 때 어떤 콘텐츠 타입을 사용할지 결정하는 것은 전송하려는 데이터의 종류와 요구사항에 따라 달라집니다.

Multi-part

파일 보낼때 사용함. 바이너리 데이터들을 전송할때 사용함

정리

• HTML Form submit시 POST 전송
• 예) 회원 가입, 상품 주문, 데이터 변경
• Content-Type: application/x-www-form-urlencoded 사용
• form의 내용을 메시지 바디를 통해서 전송(key=value, 쿼리 파라미터 형식)
• 전송 데이터를 url encoding 처리
• 예) abc김 -> abc%EA%B9%80
• HTML Form은 GET 전송도 가능
• Content-Type: multipart/form-data
• 파일 업로드 같은 바이너리 데이터 전송시 사용
• 다른 종류의 여러 파일과 폼의 내용 함께 전송 가능(그래서 이름이 multipart)
• 참고: HTML Form 전송은 GET, POST만 지원

HTTP API 데이터 전송

• 서버 to 서버
• 백엔드 시스템 통신
• 앱 클라이언트
• 아이폰, 안드로이드
• 웹 클라이언트
• HTML에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용(AJAX)
• 예) React, VueJs 같은 웹 클라이언트와 API 통신
• POST, PUT, PATCH: 메시지 바디를 통해 데이터 전송
• GET: 조회, 쿼리 파라미터로 데이터 전달
• Content-Type: application/json을 주로 사용 (사실상 표준)
• TEXT, XML, JSON 등등

HTTP 설계 예시

클라이언트는 등로될 리소스의 URI를 모른다.
서버가 새로 등록된 리소스 URI를 생성한다.
그리고 이런 형식을 컬렉션이라고 한다.
컬렉션(Collection)
• 서버가 관리하는 리소스 디렉토리
• 서버가 리소스의 URI를 생성하고 관리
• 여기서 컬렉션은 /members

PUT -> 클라이언트가 리소스의 URI을 알고있어야한다.
PUT FILES/start.jpg 이런식으로 위치를 알고 있어야한다.
이런방식을 스토어라고 한다.

대부분 post 기반