데이터 전달 방식은 크게 2가지
요청
GET /static/star.jpg HTTP/1.1
Host: localhost:8080
응답
HTTP/1.1 200 OK
Content-Type: image.jpeg
Content-Length: 34012
...
https://www.google.com/search?**q=hello&hl-ko**
GET /search?q=hello&hl=ko HTTP/1.1
Host: www.google.com
요청을 받으면 쿼리 파라미터를 기반으로 정렬 필터해서 결과를 동적으로 생성
동적 데이터 조회
<form action="/save" method="post">
<input type="text" name="username" />
<input type="text" name="age" />
<button type="submit">전송</button>
</form>
웹 브라우저가 생성한 요쳥 HTTP 메시지
POST /save HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded
username=kim&age=20
<form action="/save" method="get">
<input type="text" name="username" />
<input type="text" name="age" />
<button type="submit">전송</button>
</form>
웹 브라우저가 생성한 요쳥 HTTP 메시지
GET /save?username=kim&age=20 HTTP/1.1
Host: localhost:8080
주의! GET은 조회에만 사용! 리소스 변경이 발생하는 곳에 사용하면 안됨!
<form action="/members" method="get">
<input type="text" name="username" />
<input type="text" name="age" />
<button type="submit">전송</button>
</form>
웹 브라우저가 생성한 요쳥 HTTP 메시지
GET /members?username=kim&age=20 HTTP/1.1
Host: localhost:8080
<form action="/save" method="post" enctype="multipart/form-data">
<input type="text" name="username" />
<input type="text" name="age" />
<input type="file" name="file1" />
<button type="submit">전송</button>
</form>
username, age 뿐만 아니라 바이트로 된 파일도 함께 전송해야 한다. 이럴 땐 multipart/form-data라는 파일 형식을 사용해야 한다.
웹 브라우저가 생성한 요쳥 HTTP 메시지
POST /save HTTP/1.1
Host: localhost:8080
Content-Type: multipart/form-data; boundary=----XXX
Content-Length: 10457
-----XXX
Content-Disposition: form-data; name="username"
kim
-----XXX
Content-Disposition: form-data; name="age"
20
-----XXX
Content-Disposition: form-data; name="file1"; filename="intro.png"
Content-Type: image/png
이미지에 대한 바이트 정보...
-----XXX...
여러 부분으로 데이터를 나눠서 전송하게 된다.
대부분 컬렉션 기반의 POST를 쓴다.
설계
HTML FORM은 GET, POST만 지원