GET method & POST method

DATE : 2023/10/26

우리가 web Browser를 이용하는 장면을 상상해보자.

Browser를 열고 얻고자 하는 정보를 입력할 것이다.

이때 우리가 입력한 값을 검색어라고 칭할 때,

검색어는 사용자가 browser를 통해 server에게 보내는 데이터라고 할 수 있다.

검색을 하거나 로그인을 하는 등 web을 사용하는 과정에서 자기도 모르게

server에 데이터를 보낸 적이 꽤 많을 것이다.

어찌 됐든!

"server에게 보내는 데이터"를 앞으로 파라미터 parameter라고 정의할 것이며

parameter를 전달하는 방법에는 크게 GET method & POST method가 있다.

[ GET Method ]

Get method는 request를 보낼 때, 파라미터가 URL에 드러난다는 특징이 있다.

예를 들어 "get method"를 검색한 후 URL을 확인해보면

입력한 검색어가 URL에 드러나는 걸 볼 수 있다. 이를 통해 Get method가 사용된 걸 알 수 있는 것!

[ POST method ]

POST method는 GET method와 달리 request body 부분에 파라미터를 넣어 보내기 때문에

URL에 파라미터 값이 노출되지 않는다.

GET method & POST method로 request를 만들기 위해 간단한 form을 만들어보자.

<form method="get">
    <input type="text" name="user" placeholder="username">
    <input type="text" name="age" placeholder="age">
    <input type="submit" value="SUBMIT">
</form>

이와 같이 <form> - method를 GET으로 지정하는 경우에는 Get method가 실행되고

<form method="post">
    <input type="text" name="user" placeholder="username">
    <input type="text" name="age" placeholder="age">
    <input type="submit" value="SUBMIT">
</form>

POST method를 실행하고 싶다면 get -> post로 변경만 하면 끝!

이제 Get & Post method 결과를 확인해보자.

Get method의 경우, username & age 값을 각각 입력하고 SUBMIT 버튼을 누르면

상단 URL에 user & age 값이 "hanhxx" & 23으로 전달된 걸 볼 수 있다.

반대로 POST method로 실행한 경우에는 버튼을 눌러도 URL 상의 변화는 일어나지 않는다.

그렇다고 해서 파라미터가 전달되지 않은 것 아니다..!!

packet을 확인해보면

body 부분에 Get method와 동일한 형태로 user & age parameter가 잘 전달되고 있는 걸 확인할 수 있다!

[ summary ]

(1) server에게 보내는 데이터를 parameter 라 한다.

(2) Get method는 전달되는 데이터가 URL에 노출된다.

(3) POST method는 request body에 파라미터를 넣는다.

(4) form - method 속성으로 간단하게 구현해볼 수 있다!