HTTP - HTTP 메서드 활용하기

이번 시간에는 HTTP 메서드를 활용하여 HTTP API를 설계하는 방법을 배워 보겠다.

---

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

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

1. 쿼리 파라미터를 통한 데이터 전송
   • GET에서 사용
   • 주로 정렬 필터(검색어)
2. 메시지 바디를 통한 데이터 전송
   • POST, PUT, PATCH에서 사용
   • 회원 가입, 상품 주문, 리소스 등록, 리소스 변경....

그럼 4가지 상황을 가정해 보고 각각의 상황에서 데이터가 어떻게 전송되는지 생각해보자.

1. 정적 데이터를 조회하는 경우

만약 클라이언트가 이미지나 텍스트문서 같은 정적인 데이터를 받는 경우 쿼리 파라미터를 사용하지 않는다.

GET 메서드를 통해서 주어진 URL로 들어가게만 하면 되기 때문이다.

즉, 추가적인 데이터를 전달할 필요가 없다.

예를 들어 우리가 images/flower.jpg라는 이미지 파일을 받는다고 생각해보자.

그러면 클라이언트의 요청 메시지는 다음과 같이 만들어질 것이다.

GET /images/flower.jpg HTTP/1.1
Host: localhost:8080

그러면 서버가 메시지를 받고 해당 경로의 리소스를 전달해 줄 것이다.

따라서 이런경우 따로 쿼리 파라미터가 필요하지 않으며 리소스 경로로 단순하게 조회가 가능하다.

 

2. 동적 데이터를 조회하는 경우

그럼 동적인 데이터를 전송하는 경우 어떻게 되는가?

마찮가지로 GET 메서드를 사용하지만 쿼리 파라미터를 통하여 결과를 동적으로 생성하면 된다.

예를 들어, 회원 ID를 전달하고 해당 회원의 정보를 받는다고 생각해보자.

GET /findUser?Id=1 HTTP/1.1
Host: localhost:8080

이렇게 요청메시지를 보내면 서버는 Id가 1번인 회원 정보를 찾아 반환하게 될것이다.

즉 "?Id= " 뒤의 ID 값만 변경시키면 동적으로 데이터를 조회 할 수 있다.

 

이런 동적 데이터 조회는 주로 검색, 게시판 목록에서 정렬 필터(검색어)로 사용되며 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용한다.

3. HTML Form 데이터를 전송하는 경우

아마 HTML을 사용하다 보면 form태그를 한번 쯤 사용해 보았을 것이다.

이런 form태그를 이용하여 서버에 데이터를 전송하는 경우 Post 메서드를 통해 진행이 된다.

예를 들어, 회원 정보 수정을 위하여 다음과 같은 form이 있다고 생각해보자.

<form action="/update" method="post">
<input type="text" name="userName" />
<input type="text" name="email" />
</form>

 

action을 통해 /update라는 URI로 POST 메서드를 이용하여 요청을 보내는 것을 알 수 있다.

그럼 요청메시지는 다음과 같이 작성될 것이다.

POST /update HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded

userName=입력값&email=입력값

 

잘 보면 Body에 우리가 입력한 데이터가 각 Input 태그의 name에 맞추어 생성 된 것을 볼 수 있다.

잘보면 우리가 GET에서 보았던 쿼리 파라미터와 거의 비슷한 형태인 것이 보일 것이다.

form의 내용을 메시지 바디를 통해서 key=value 형태로 전송하며 전송 데이터를 url encoding 처리하기 때문에 한글이 들어가도 알아서 encoding 하게 된다.

이런 타입을 application/x-www-form-urlencoded라고 하며 대부분의 웹서버는 이것을 파싱하여 사용 할 수 있다.

 

한가지 특이 한 점은 HTML Form은 GET 방식도 사용 가능하다.

예를 들의 위의 메시지에서 method를 GET으로 보낸다면 다음과 같이 요청 메시지가 작성된다.

GET /update?username=입력값&email=입력값 HTTP/1.1
Host: localhost:8080

 

GET으로 보내게 되면 Input태그의 값이 쿼리 파라미터로 들어가게 된다.

단, 이런 경우 조회용으로만 사용하여야하며 리소스 변경은 불가능하다.

 

또한, HTML Form은 multipart/form-data라고 하여 파일을 전송할 수 있는 Content Type을 사용할 수 있다.

<form action="/update" method="post" enctype="multipart/form-data">
<input type="text" name="userName" />
<input type="text" name="email" />
<input type=file" name="file1" />
</form>

위의 메시지 처럼 enctype을 지정하여 사용 가능하며 form에 포함된 이미지, 파일과 같은 바이너리 데이터를 전송할 수 있다.

또한, 다른 종류의 여러 파일과 폼의 내용을 함께 전송하는 것이 가능하다.

 

단, HTML Form의 경우 GET과 POST만 지원한다.

4. HTML  API 데이터를 전송하는 경우

만약 애플리케이션에서 서버로 바로 전송하는 경우 API를 통해 데이터를 전송하게 된다.

API는 클라이언트의 라이브러리를 통해 만드는 경우가 많으며 본인이 사용하고 싶은 형태로 API를 구성하여 서버로 던지면 된다.

크게 정리를 해보면

• 서버 to 서버
• 앱 클라이언트
• 웹클라이언트

로 구분된다.

서버 to 서버는 백엔드 시스템 간의 통신을 말하며 앱 클라이언트는 아이폰, 안드로이드 같은 기기간 전송을 말한다.

웹 클라이언트는 HTML에서 Form 전송 대신 자바 스크립트를 통한 통신을 말하는데 흔히 말하는 AJAX가 바로 이것이다.

또한, React, VueJs 같은 웹 클라이언트와도 API 통신을 하게 된다.

 

API를 이용하는 경우 POST, PUT, PATCH는 메시지 바디를 통해 데이터를 전송하며 GET은 쿼리 파라미터로 데이터를 전달하게 된다.

일반적으로 Content-Type은 application/json을 사용하며 사실상의 표준 형식이라고 생각하면 된다.

이밖에도 TEXT, XML, JSON등이 사용 가능하다.