POST와 데이터 전송
요청 옵션과 함께 JSON 페이로드를 전송합니다.
POST와 데이터 전송은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
서버로 데이터 보내기
데이터를 생성하거나 업데이트하려면 본문이 포함된 요청을 보내야 합니다. Fetch에서는 두 번째 인수로 전달하는 옵션 객체를 통해 이를 지원합니다.
메서드 설정하기
필요한 HTTP 동사에 따라 method를 설정하십시오. POST는 생성, PUT/PATCH는 업데이트, DELETE는 제거에 사용합니다.
fetch(url, { method: "POST" });JSON 본문 추가하기
대부분의 API는 JSON을 요구합니다. JSON.stringify로 객체를 문자열로 만들고 그 결과를 body에 넣으십시오.
fetch(url, {
method: "POST",
body: JSON.stringify({ name: "Ada", age: 36 })
});Content-Type 헤더
Content-Type: application/json을 설정하여 본문이 JSON임을 서버에 알려 주십시오. 그렇지 않으면 서버가 데이터를 잘못 해석할 수 있습니다.
fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Ada" })
});응답 읽기
서버는 보통 생성된 리소스로 응답합니다. GET 요청과 같은 방식으로 response.json()을 사용하여 읽으십시오.
const response = await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
const created = await response.json();완전한 생성 함수
이 패턴을 재사용 가능한 함수로 묶으십시오. 함수는 데이터를 받아 전송하고 서버 응답을 반환합니다.
async function createUser(data) {
const res = await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
return res.json();
}PUT 및 PATCH
PUT은 리소스 전체를 교체할 때 사용하고, PATCH는 일부 필드만 업데이트할 때 사용합니다. 따라서 본문의 형태도 달라집니다.
fetch("/api/users/7", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ age: 37 })
});폼 데이터 전송
파일을 업로드하거나 폼을 제출할 때는 본문으로 FormData 객체를 사용하십시오. Content-Type을 직접 설정하지 마십시오. 브라우저가 올바른 멀티파트 경계를 추가합니다.
const form = new FormData();
form.append("avatar", fileInput.files[0]);
fetch("/upload", { method: "POST", body: form });인증
보호된 엔드포인트에는 자격 증명이 필요합니다. Content-Type과 함께 Authorization 헤더에 토큰을 보내십시오.
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + token
},
body: JSON.stringify(data)
});쿠키와 자격 증명
기본적으로 가져오기 요청은 출처가 다른 경우 쿠키를 전송하지 않습니다. 서버가 쿠키 기반 세션을 사용할 때는 credentials: "include"를 설정하십시오.
fetch(url, { method: "POST", credentials: "include", body: payload });문자열화 시 주의점
기억하십시오. body는 문자열(또는 FormData/Blob)이어야 합니다. 원시 객체를 전달하면 [object Object]가 전송됩니다. 객체는 항상 먼저 JSON.stringify로 변환하십시오.
body: JSON.stringify({ ok: true }) // correct
// body: { ok: true } <-- broken빠른 확인
POST로 JSON 보내기
정리
method, body, 헤더를 설정하여 데이터를 보내십시오. JSON의 경우 객체를 JSON.stringify로 변환하고 Content-Type: application/json을 설정하십시오. 업로드에는 FormData를 사용하고(Content-Type은 직접 설정하지 않음), 인증에는 Authorization을 추가하며, 쿠키에는 credentials: "include"를 사용하십시오. 응답은 response.json()으로 읽으십시오.
자주 묻는 질문
“POST와 데이터 전송” 강의는 무료인가요?
네 — “POST와 데이터 전송” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“POST와 데이터 전송”에서 뭘 배우나요?
요청 옵션과 함께 JSON 페이로드를 전송합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“POST와 데이터 전송” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.