GET 요청 만들기
데이터를 가져오고 JSON 응답을 구문 분석합니다.
GET 요청 만들기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
fetch의 역할
Fetch API는 브라우저에서 HTTP 요청을 보내고 Promise를 반환합니다. 이는 이전의 XMLHttpRequest를 대체하는 현대적인 방식입니다.
기본 GET 요청
URL과 함께 fetch(url)를 호출하십시오. 기본적으로 GET 메서드를 사용하며 Response 객체로 이행됩니다.
fetch("https://api.example.com/users")
.then((response) => {
console.log(response.status); // 200
});Response 객체
이행된 값은 데이터 자체가 아니라 Response입니다. 여기에는 상태, 헤더 및 본문을 읽는 메서드가 들어 있습니다. 콘텐츠를 얻으려면 본문 메서드를 호출해야 합니다.
fetch(url).then((response) => {
console.log(response.ok); // true if status 200-299
console.log(response.status); // 200
});JSON 분석하기
대부분의 API는 JSON을 반환합니다. response.json()을 호출하십시오. 이 메서드 자체는 분석된 객체로 이행되는 Promise를 반환합니다.
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data); // parsed JS object/array
});Promise가 두 개인 이유
첫 번째 Promise는 헤더가 도착하면 이행되고, 두 번째 Promise(.json())는 전체 본문을 다운로드하고 분석하면 이행됩니다. 따라서 .then() 호출을 두 번 연결합니다.
async/await 사용하기
대부분의 코드는 가독성을 위해 async/await를 사용합니다. 각 await는 해당 Promise가 이행될 때까지 실행을 일시 중지합니다.
async function getUsers() {
const response = await fetch(url);
const data = await response.json();
return data;
}다른 본문 읽기 메서드
json() 외에도 Response는 text(), blob()(이진 데이터), arrayBuffer() 또는 formData()로 읽을 수 있습니다. 서버가 반환하는 값에 따라 선택하십시오.
const response = await fetch(url);
const html = await response.text(); // raw string본문은 한 번만 읽기
응답 본문은 한 번만 소비할 수 있는 스트림입니다. 같은 응답에서 json()을 호출한 다음 text()를 호출하면 오류가 발생합니다. 두 가지가 모두 꼭 필요하다면 response.clone()으로 복제하십시오.
쿼리 매개변수
쿼리 문자열을 직접 이어 붙이는 대신 URLSearchParams로 안전하게 만드십시오. 특수 문자를 자동으로 인코딩해 줍니다.
const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);헤더 보내기
옵션과 함께 두 번째 인수를 전달하십시오. GET 요청에서는 Accept 헤더나 인증 토큰을 설정하는 경우가 많습니다.
fetch(url, {
headers: {
"Accept": "application/json",
"Authorization": "Bearer " + token
}
});Promise 반환하기
호출자가 이를 await할 수 있도록 가져오기 로직을 Promise를 반환하는 함수로 감싸십시오. 이렇게 하면 앱 전체에서 데이터 로딩을 재사용할 수 있습니다.
function loadUser(id) {
return fetch("/api/users/" + id).then((r) => r.json());
}빠른 확인
fetch를 사용한 GET 요청입니다.
복습
fetch(url)은 Response를 위한 Promise를 반환합니다. json(), text() 또는 blob()으로 본문을 읽으십시오(한 번만 읽을 수 있습니다). 명확한 코드를 위해 async/await를 사용하고, 쿼리 문자열에는 URLSearchParams를 사용하며, 헤더에는 옵션 객체를 사용하십시오. 재사용할 수 있도록 Promise를 반환하는 함수로 감싸십시오.
자주 묻는 질문
“GET 요청 만들기” 강의는 무료인가요?
네 — “GET 요청 만들기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“GET 요청 만들기”에서 뭘 배우나요?
데이터를 가져오고 JSON 응답을 구문 분석합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“GET 요청 만들기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.