API 호출 기초

정적 사이트는 미리 만들어 둔 내용만 보여줍니다. 하지만 날씨, 환율, 게시글 목록처럼 "매번 달라지는 데이터"를 보여주려면 다른 서버에 "이 정보 좀 줘"라고 요청해야 합니다. 이 요청 창구가 바로 API이고, 브라우저에서 가장 많이 쓰는 도구가 fetch입니다. 이번 챕터에서는 fetch로 데이터를 받아 JSON으로 다루고, 키를 노출하지 않는 법까지 봅니다.

fetch로 데이터 받아오기

fetch는 주소(URL)로 요청을 보내고, 응답이 도착하면 처리하는 함수입니다. 네트워크는 즉시 끝나지 않으므로 fetch는 비동기로 동작합니다. 그래서 await로 "응답이 올 때까지 기다린다"고 표현합니다.

async function loadUsers() {
  const res = await fetch('https://api.example.com/users');
  if (!res.ok) {
    throw new Error('요청 실패: ' + res.status);
  }
  const data = await res.json(); // 본문을 JSON으로 변환
  console.log(data);
}
loadUsers();

응답 상태와 JSON 다루기

초보자가 가장 자주 하는 오해가 "fetch가 에러 없이 끝났으니 성공이다"입니다. 사실 서버가 404나 500을 돌려줘도 fetch 자체는 성공으로 봅니다. 그래서 반드시 res.ok 또는 res.status를 직접 확인해야 합니다.

응답으로 받은 JSON은 그냥 텍스트가 아니라 자바스크립트 객체로 변환된 상태입니다. 점 표기로 값을 꺼내면 됩니다.

const data = await res.json();
// { "name": "민지", "items": [1, 2, 3] }
console.log(data.name);        // 민지
console.log(data.items.length); // 3
data.items.forEach(n => console.log(n));

API 키를 안전하게

많은 API는 신원을 확인하려고 API 키를 요구합니다. 여기서 결정적인 보안 원칙이 있습니다.

브라우저(프론트엔드) 자바스크립트에 비밀 키를 그대로 적으면, 누구나 개발자도구 → 네트워크 탭에서 그 키를 볼 수 있습니다. 비밀 키는 절대 클라이언트 코드에 넣지 않습니다.

• 비밀 키 — 서버(백엔드)에 보관하고, 브라우저는 내 서버에만 요청합니다. 내 서버가 대신 외부 API를 호출하고 키를 끼워 넣습니다.
• 환경변수 — 키를 코드가 아니라 .env 같은 환경변수에 두고, 그 파일은 .gitignore로 Git에 올라가지 않게 막습니다.
• 공개 키 — 일부 키는 도메인 제한이 걸린 "노출돼도 되는" 키입니다. 이 둘을 혼동하지 마세요.

# .gitignore 에 추가
.env

# .env 파일 (Git에 올리지 않음)
API_KEY=비밀값여기에

정리하면 fetch로 요청하고, res.ok로 성공 여부를 확인하고, res.json()으로 데이터를 꺼내며, 비밀 키는 절대 브라우저에 두지 않습니다. 이 네 가지가 API를 안전하게 쓰는 출발점입니다.