Http는 html 문서 같은 리소스 파일들을 가져올 수 있도록 해주는 통신규약이며
ajax, axios 등 클라이언트 측에서 서버 측에게 요청을 보내면 이 요청에 맞는 응답을 Http 프로토콜을 통해 받아오게 된다
즉, 서버상에서 클라이언트측과 서버 측이 데이터를 요청(request)/응답(response)하는 과정을 말한다
여기서 http 메소드로 클라이언트 측으로부터 온 요청을 서버 측에서 어떻게 처리할 것인지 결정하는데,
이 http 메소드가 바로 GET과 POST 두 가지 방식으로 나눠져 있다.
간단하게 설명하면, GET은 조회를 위해 정보를 불러올 때 사용되며 POST는 데이터의 생성 및 변경을 하는 경우 사용된다.
GET
쇼핑을 하기 위해 이런저런 품목들을 클릭하고, 이를 장바구니에 집어넣거나
구글 검색창에 무언가를 검색하고 위의 주소창을 보면 ? XX=XX&XX=XX.. 등의 형식이 주소창 끝 부분에
달려있는 걸 확인할 수 있는데 이게 바로 GET 방식이다
주소창의 주소 뒤에 값이 물음표? 뒤에 key=value로 이루어진 요청 파라미터 (쿼리 스트링) 가 나오며,
이 조건이 여러 개일 경우엔 &으로 이어져서 쭉 나열된다.
URL 뒤로 이어지기 때문에 길이가 제한되며 이는 용량의 제한으로 대용량의 데이터를 보내기엔 어렵다
그래서 GET은 어떠한 데이터를 조회하기 위해서 불러올 때 사용이 된다 (ex. 게시판의 글 불러오기)
즉, 따로 서버 측 데이터가 변경되지 않는다
GET은 불필요한 요청을 제한하기 위해 요청이 캐시될 수 있습니다. js, css, 이미지 같은 정적 컨텐츠는 데이터양이 크고, 변경될 일이 적어서 반복해서 동일한 요청을 보낼 필요가 없습니다. 정적 컨텐츠를 요청하고 나면 브라우저에서는 요청을 캐시해두고, 동일한 요청이 발생할 때 서버로 요청을 보내지 않고 캐시된 데이터를 사용합니다. 그래서 프론트엔드 개발을 하다보면 정적 컨텐츠가 캐시돼 컨텐츠를 변경해도 내용이 바뀌지 않는 경우가 종종 발생합니다. 이 때는 브라우저의 캐시를 지워주면 다시 컨텐츠를 조회하기 위해 서버로 요청을 보내게 됩니다. 출처 : https://hongsii.github.io/2017/08/02/what-is-the-difference-get-and-post/ |
이러한 GET의 캐시로 인해 어제 포스팅에서도 작성했듯이
페이지의 CSS를 변경했음에도 웹페이지를 다시 실행시켰을 때 변경사항이 적용 안 되는 일이 발생했다
브라우저에서 내가 처음에 작성했던 resources 폴더의 정적 콘텐츠를 캐시 해버려서 생긴 경우였다
POST
GET방식은 url 뒤에 붙어서 전송되지만, POST방식은 Body가 존재하기 때문에 데이터들이 Body안에 숨겨져서 보내진다
(그렇다고 보안이 엄청 좋다는 건 아니다. 여러 가지 방법으로 확인이 다 가능하기 때문에 암호화는 필수!)
form을 이용해서 submit 전송하는 형태가 POST의 방식이다
또한 대용량 전송이 불가능한 GET과는 달리 용량의 제한은 있지만 비교적 많은 양의 데이터를 보내기에 적합하며
데이터의 생성 또는 변경, 삭제 등 서버에 존재하는 데이터의 상태를 바꿀 때 사용한다
(ex. 블로그 계정의 비밀번호 변경 시, 새로운 비밀번호를 작성(form-input)하고 완료 버튼(submit)을 누르면
여기서 작성 한 내용이 POST 방식으로 서버 측에 전달되어 서버측에 존재했던 나의 블로그 계정의 비밀번호가 변경된다
(데이터의 변경)
또한 POST 방식으로 요청을 보낼 경우, 요청 헤더의 Content-Type에 데이터 타입을 꼭 표시해야 한다.
이를 표시하지 않으면 서버는 요청된 데이터의 타입을 받지 못하여 요청받은 데이터의 내용 또는 리소스 확장자명 같은 요소로
데이터 타입을 유추한다.
Ref.
https://developer.mozilla.org/ko/docs/Web/HTTP/Overview
https://hongsii.github.io/2017/08/02/what-is-the-difference-get-and-post/