HTTP 웹 기본 지식 (Method 활용)

HTTP Method 활용

정적 데이터 조회

GET /static/img/strawberry.jpg HTTP/1.1
Host: localhost:8080

• GET method를 사용하며 URI 경로만으로 리소스를 내려받을 수 있음
• 이미지, 정적 테스트 문서
• 쿼리가 필요없음

동적 데이터 조회

GET /search.naver?ie=utf8&query=velog
Host: www.naver.com

• GET method를 사용
• 쿼리 파라미터가 반드시 필요하며 쿼리 파라미터를 기반으로 정렬, 필터링해서 결과를 응답
• 검색, 게시판 목록 등에 사용

Form 데이터 전송

POST /members HTTP/1.1
HOST: /localhost:8080
Content-Type: application/x-www-form-urlencoded

id=1&name=spring

• html tag인 form에 클라이언트가 작성한 내용을 message body에 태워서 key=value의 형식으로 서버에 전송
• 데이터를 rul encoding 처리함
• 회원가입, 주문, 데이터 변경시 주로 사용
• html form tag는 GET, POST만 지원
• GET으로 바꿀 경우 POST처럼 message body에 데이터를 넣고 전송하는게 아닌 쿼리 파라미터에 추가해서 넘김
• 파일 전송을 위해서는 multipart/form-data와 input type에 file을 넣어서 사용해야한다.
  

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

------XXX
Content-Disposition: form-data; name="file"; filename="Strawberry.png"
Content-Type: image/png

1024a7o0p3eqworu234asd47234asd672...
------XXX--

API 데이터 전송

POST /members HTTP/1.1
Content-Type: application/json

{
"id":"1"
"name":"spring"
}

• 백엔드 서버끼리 통신, 앱 클라이언트(아이폰, 안드로이드), 웹 클라이언트 (Ajax)에서 주로 사용
• POST, PUT, PATCH을 사용해 message body를 통해 데이터 전송 가능
• Content-Type: application/json을 주로 사용 (실무 표준이라고 봐도 무방)

정리

• 쿼리 파라미터를 통한 전송 GET -> 정렬과 필터를 통한 검색
• message body를 통한 전송 POST, PUT, PATCH -> 회원 가입, 상품 주문, 리소스 생성 및 변경
• 클라이언트 -> 서버로 데이터 전송
  • 정적 데이터 : 이미지, 정적 텍스트 문서
  • 동적 데이터 : 정렬과 필터를 통한 검색
  • Form 데이터 : 회원 가입, 상품 주문, 리소스 생성 및 변경
  • HTTP API 데이터 : 서버 to 서버, 앱 및 웹 클라이언트 (Ajax)