Next.js 로 API Route Handler를 만들다 문득 든 생각, "POST는 어디까지 수행하는걸까?"
GET 요청을 따로 만들었는데 POST는 그럼 서버에 보내기만 하고 데이터 받는건 GET으로 해야되는거 아닌가?
try {
const response = await fetch(`/api/timerecord`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
date: moment(value).format("YYYY-MM-DD"),
time: formattedReadingTime,
}),
});
const data = await response.json();
console.log(data);
if (response.ok) {
setRecord(data);
alert("기록 완료!");
}
} catch (error) {
console.error("데이터 저장 오류:", error);
} finally {
setIsSubmit(false);
}서버에 새로운 것이 추가되면 화면에 바로 렌더링 되어야되는 상황이였는데 이전에 나는 POST는 데이터 전달만 하고 GET요청은 dataFetch 함수를 만들어서 서버로부터 데이터를 받아야할 때 dataFetch 함수를 넣어놨었다.
if (response.ok) {
setRecord(data); // -> 이게 아니라 dataFetch(); 이렇게
alert("기록 완료!");
}프로젝트 코드를 봐주던 동기분께서 "POST를 하고 POST의 리턴값을 업데이트된 데이터를 받아서 주면 프론트에서 데이터를 거르지 않아도 되고, 더 빠르지 않을까요?" 라는 말씀을 하셨다.
그때 내생각은 POST면 POST 기능만 해야하는거 아닌가,,, 였는데,,, 따지고 보면 난 POST가 정확히 뭔질 모른다. 그래서 아차 싶었다 ㅋ...
다른 사람들은 어떻게 알고있나 해서 올린거 였는데 암튼 6명 감사함니다. (나랑 친구인 사람이 이걸보면 조용히 넘어가줘라...)
제목 보고 이게 무슨 소리여 하면서 들어오신 분들 진정하셔도 됩니다,,,
내가 잘못 알았던 사실
POST 요청은 서버에 데이터를 전달하기 위해 사용된다. ⭕
POST는 데이터를 서버에 전달만 한다. ❌ → 데이터를 받아서 처리하고 그에 따른 응답을 생성할 수 있다. ⭕
그렇다. POST는 서버로 보내기만 한다는 생각은 내 똥고집이였던 것이다.
GET은 뭐고, POST는 뭐야?
일단 둘 다 서버에 요청을 하는 메서드이다.
하지만,,,
GET은 클라이언트 데이터를 URL 뒤에 붙여서 보낸다.
? 을 통해 URL의 끝과 데이터 표현의 시작을 알린다.
데이터는 key와 value 쌍으로 넣어져야 하며, 2개 이상의 key-value 쌍 데이터를 보낼 때 & 마크로 구분한다.
URL에 붙어있기 떄문에 HTTP 패킷의 헤더에 포함되어 서버에 요청한다. → 그렇기 때문에 body도, body를 설명하는 Content-Type 헤더 필드도 들어가지 않는다.
- GET은 서버의 리소스에서 데이터를 요청할 때 사용된다.
클라이언트가 URL에 데이터를 첨부하고 서버로 전송하며, 서버는 요청된 데이터를 URL 매개변수를 통해 반환하게 된다.
POST는 body에다 데이터를 넣어 보낸다.
그렇기 때문에 POST를 사용할 때 headers에 body의 데이터가 무엇인지 알려주는 Content-Type 필드가 추가되는 것이다.
Content-Type을 명시하지 않으면 application/x-www-form-urlencoded 이라는 컨텐츠 타입으로 세팅되는데 이는 body에 key와 value 쌍으로 데이터를 넣는다.
이외에도 text/plain 은 단순 txt를, multipart/form-data 는 파일전송 시 많이 사용하는 타입으로 body 데이터를 바이너리 데이터로 넣는다.
아무리 해도 application/json 을 이길 순 없다.
- POST는 서버의 리소스를 새로 생성하거나 업데이트할 때 사용된다.
클라이언트가 서버로 데이터를 제출하고, 서버가 클라리언트에게 응답을 보내는데 이때 반환값은 요청에 따라 다양한 형태일 수 있다. (텍스트, JSON, XML 등)
사실 이번 글 제목에 대한 건 정답이라기 보단 사용의 차이? 정도라고 생각이 든다.
↑ 요 말을 보니 더더욱
그래도 이번 기회에 자칫 잘못 알고 있을 뻔한 지식 고쳐서 다행이당!
