[HTTP] HTTP 메서드 활용

클라이언트에서 서버로 데이터를 전송하는 방법은 크게 2가지가 있습니다. 

 

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

• GET 에서 많이 사용
• 주로 정렬 필터, 검색어를 입력할 때 많이 사용

2. 메시지 바디를 통한 데이터 전송

• HTTP 메서드 중에서 POST, PUT, PATCH 를 주로 사용
• 회원 가입, 상품 주문, 리소스 등록, 리소스 변경할 때 많이 사용

클라이언트에서 서버로 데이터를 전송하는 것을 크게 4가지 상황으로 분류할 수 있습니다. 

• 정적 데이터 조회
• 동적 데이터 조회
• HTML Form을 통한 데이터 전송
• HTTP API를 통한 데이터 전송

---

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

정적 데이터 조회

 

클라이언트에서 서버로 /static/star.jpg 를 요청하면, 서버에서는 별 이미지를 클라이언트에게 내려주면 됩니다. 

이런 경우에는 추가적인 데이터를 전달하는 게 없습니다. 단순하게 URL 경로만 넣어주면 서버에서 해당하는 이미지 리소스를 만들어서 클라이언트에게 내려주게 됩니다. 

 

따라서, 정적 데이터 조회는 이미지, 정적 텍스트 문서를 사용할 때 이용하며, 조회는 GET 메서드를 사용합니다. 

정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회할 수 있습니다. 

---

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

동적 데이터 조회

 

동적 데이터 조회는 쿼리파라미터를 사용해서 HTTP 메시지를 생성한 후, 서버에 전달합니다. 

전달 받은 서버는 쿼리 파라미터를 가지고 key, value 값을 사용해서 결과를 응답합니다.  

 

동적 데이터 조회는 주로 검색이나 게시판 목록에서 정렬 필터 할 때 사용하며,

조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용합니다. 

조회를 하는 것이므로 GET 메서드를 사용하며, 쿼리 파라미터를 사용해서 데이터를 서버에 전달합니다. 

---

3️⃣ HTML Form 데이터 전송

✅ POST 전송 - 저장

HTML Form 데이터 전송 (POST 전송 - 저장)

 

클라이언트에서 폼 태그를 사용해서 action 은 /save (저장), method 는 post 로 만들고, 

username 에는 kim, age 에는 20 을 입력해서 전송 버튼을 누르면 웹 브라우저가 폼 데이터를 읽어서 HTTP 메시지를 생성해줍니다. 

HTTP 메시지를 생성해줄 때, method 가 post 였으니까 POST, action 에 입력했던 URL 이 입력이 되고, Content-Type 은 application/x-www-form-urlencoded 로 생성을 해주고, HTTP 바디에는 쿼리파라미터 형식으로 넣어서 서버로 전송을 합니다. 

 

✅ GET 전송 - 저장

HTML Form 데이터 전송 (GET 전송 - 저장)

 

form 태그를 이용해서 클라이언트에서 method="get" 이라고 했는데 위와 같은 경우는 save 로 저장하는 경우이기 때문에 위와 같이 작성하면 안됩니다. 리소스를 바꾸거나 변경하는 경우이기에, GET 메서드를 사용하면 안됩니다. 

GET 메서드는 반드시 조회에서만 사용해야 합니다.  

 

✅ GET 전송 - 조회

HTML Form 데이터 전송 (GET 전송 - 조회)

 

이 경우는 위와 조금 다르게, /members 라는 경로로 username 은 kim 이고, age 는 20인 사람을 리스트에서 필터링해서 보여주는 경우입니다. 

마찬가지로, 클라이언트에서 폼에 입력한 내용이 쿼리파라미터로 들어가서 HTTP 메시지를 생성하고, 생성된 메시지가 서버로 요청됩니다. 

 

✅ multipart/form-data

HTML Form 데이터 전송 (multipart/form-data)

 

username과 age와 이미지를 같이 전송해야 할 때는 multipart/form-data 형식을 사용해야합니다.

파일을 선택해서 전송버튼을 누르면 웹브라우저는 Content-Type 을 multipart/form-data 로 만들고, boundary 가 들어가서 하나씩 경계를 자르게 됩니다. 

이미지의 경우는 이미지에 대한 바이트 정보가 들어가게 됩니다. 

멀티로 여러 컨텐츠 타입에 대한 데이터를 보낼 수 있다는 뜻에서 멀티파트 폼 데이터를 사용합니다. 

 

✅ HTML Form 데이터 전송 정리

• HTML Form 전송 시, POST 로 전송하는 경우는 회원 가입, 상품 주문, 데이터를 변경할 때 입니다. 
• Content-Type : application/x-www-form-urlencoded 를 사용하는 경우는 form 의 내용을 메시지 바디를 통해서 전송할 때 쿼리 파라미터 형식으로 전달이 됩니다.
• Content-Type : multipart/form-data 를 사용하는 경우는 파일 업로드 같은 바이너리 데이터를 전송할 때 사용하며, 다른 종류의 여러 파일과 폼의 내용을 함께 전송할 수 있습니다.
• HTML Form 전송은 GET, POST 만 지원합니다. 

---

🔍 참고글

인프런 김영한 강사님의  [모든 개발자를 위한 HTTP 웹 기본 지식] 섹션 6. HTTP 메서드 활용 강의를 참고하여 작성했습니다.