HTTP 메서드 활용

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

데이터 전달 방식은 크게 2가지다.

• 쿼리 파라미터를 통한 데이터 전송 (URI 끝에 쿼리 파라미터를 넣어서 데이터를 전송)
  - GET에서 많이 사용함
  - 주로 정렬 필터(검색어)에서 많이 사용함. (?q=hello)
• HTTP 메시지 Body를 통한 데이터 전송
  - POST, PUT, PATCH
  - 회원 가입, 상품 주문, 리소스 등록, 리소스 변경

 

 

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

아래 4가지 상황에 대해서 하나씩 살펴보자

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

 

1. 정적 데이터 조회(쿼리 파라미터 미사용)

• 정적인 데이터를 조회하기 때문에 동적인 쿼리 파라미터가 필요하진 않다. 
• 클라이언트에서 서버로 /static/star.jpg라고 요청을 보냄. 추가적인 데이터를 전달하는 것이 없고, 요청할 때 URI 경로만 넣어준다.
• 이미지, 정적 텍스트 문서를 조회할 때는 GET을 사용. (조회니까 GET 사용)
• 정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회가 가능하다.

 

2. 동적 데이터 조회 (쿼리 파라미터 사용)

• /search 절대 경로에 쿼리 파라미터를 넣어줌(/search?q=hello&hi=ko)
• 클라이언트에서 서버로 쿼리 파라미터를 전달한다. 서버는 key, value 형태로 꺼내고 정렬 필터처리를 통해서 결과를 동적으로 생성한다. 결과를 응답해준다. 
• 주로 검색하거나, 게시판 목록에서 정렬 필터(검색어) 같은 것을 넣을 때 사용.
• 조회 조건을 줄여주는 필터 조회 결과를 정렬하는 정렬 조건(오름차순, 내림차순)에 주로 사용
• 단순 조회니 GET을 사용. GET은 쿼리 파라미터를 사용해서 데이터를 전달한다.

 

3. HTML Form 데이터 전송

웹 브라우저가 HTML FORM에서 Submit 버튼을 누르면, FORM의 데이터를 읽어서 HTTP 메세지를 생성해줌. 

POST 전송을 하기 위해서 'submit' 버튼을 눌러주면 method에 적혀있는데로 POST 형식으로 데이터를 전송해준다. 이 때, 데이터는 HTTP 메세지의 BODY에 KEY, VALUE 스타일로 들어가있는 것을 볼 수 있다. 그리고 이 때의 Content-Type은 웹 브라우저가 만들어주고, Default 격인 application/x-www-form-urlencoded다. 

POST는 GET의 쿼리 파라미터와 유사한 형식으로 요청 메세지에 데이터를 전달하지만, 그 메세지가 Body에 있다는 점이 GET과는 다르다.

 

GET으로도 데이터를 전송하는 것이 가능하다. 이 때, 전송하고자 하는 데이터를 쿼리 파라미터에 넣고 서버에 전달해서 데이터를 전달할 수 있다. 그렇지만 많은 서버에서 지원하는 기능은 아니기 때문에, 가급적 조회를 하는데만 쓰도록 해야한다. 따라서, GET은 리소스를 바꾸거나 변경하는 것에는 절대로 쓰면 안된다. 

GET 메서드에 KEY-VALUE 형식으로 쿼리 파라미터를 전달하는 방식이고, 서버에서는 정상적으로 답변을 줄 것으로 예상된다. 

HTML FORM 데이터 전송에서 파일 같은 것을 전송할 때 Content Type이 있음. 이 Content Type은 multipart/form-data다. 기본적으로 default는 application/x-www-form-urlencoded다.

multipart/form-data를 하게 되면 웹 브라우저가 HTTP 메세지를 생성할 때, Boundary라는 옵션이 나오게 된다. 이 명령어는 말 그대로 Boundary를 기준으로 나누고, 각각의 데이터에 여러 컨텐트 타입을 설정할 수 있게 해준다. 이게 multipart/form-data라는 것이다. 

 

HTML Form submit시 POST 전송하는 경우 → 회원 가입, 상품 주문, 데이터 변경

---

• default ContentType이 application/x-www-form-urlencoded 사용한다
• POST로 보내면 form의 내용을 Body를 통해서 전송(key=value, 쿼리 파라미터 형식으로 전달)
• 전송 데이터를 url encoding을 처리한다.
  예시) abc김 -> abc%EA%B9%80 (아마 UTF-8로 인코딩)
• HTML Form은 GET 전송도 가능한데, 조회만 할 때 가능하다.
• Content-Type : multipart/form-data
  - 파일 업로드 같은 바이너리 데이터 전송 시 사용한다.(같이 전송해야할 때 쓴다)
  - 다른 종류의 여러 파일과 폼의 내용을 함께 전송 가능(그래서 이름이 multipart다)
• 참고 : HTML Form 전송은 GET, POST만 지원한다. 

 

HTTP API 데이터 전송

• 안드로이드 모바일 어플리케이션에서 클라이언트에서 서버로 바로 데이터를 전송해야할 때, 이 때 HTTP API로 데이터를 전송한다고 함. 그냥 내가 만들어서 데이터를 서버에 넘겨버림
• 서버 to 서버 통신 → 백엔드 서버끼리 통신할 때 사용(서버끼리는 HTTP 통신이 아니라 기계끼리 통신함)
• 앱 클라이언트 → 아이폰 (앱 클라이언트에서 전송할 때도 주로 HTTP API 형식으로 쓴다)
• 웹 클라이언드 
  HTML에서 FORM 전송 대신 자바 스크립트를 통한 통신에 사용(AJAX 통신이라고 함)
  예) React, VueJs 같은 웹 클라이언트와 API 통신
• POST, PUT, PATCH : 메세지 바디를 통해 데이터 전송. 
• GET : 조회, 쿼리 파라미터로 데이터 전달. (Body에 데이터 넣는 건 비효율적.)
• Content-Type : application/json을 주료 사용(사실상 표준)