API란 무엇인가?｜웹 개발자를 위한 개념부터 실전 호출까지 완벽 정리

🔍 API란 무엇인가?｜웹 개발자를 위한 개념부터 실전 호출까지 완벽 정리

안녕하세요, 퍼블리셔 노미입니다!
웹 개발을 시작하면서 가장 많이 듣는 용어 중 하나가 바로 API일 거예요.
“API가 뭔가요?”, “REST API 호출이 뭔가요?”, “fetch로 API를 불러오면 그게 끝인가요?”

이 글에서는 API의 개념부터 REST API 구조, 실전 fetch 호출, 응답 처리 방법까지 초보자도 이해할 수 있도록 자세히 정리해드릴게요.

---

📌 API란?

API는 Application Programming Interface의 약자로,
서로 다른 프로그램 간에 정보를 주고받을 수 있게 해주는 인터페이스입니다.

쉽게 말하면, “데이터를 요청하고 응답받는 통로”라고 보면 돼요.

• 프론트엔드 → 백엔드로 요청할 때 사용
• 날씨, 뉴스, 검색 결과 등 외부 데이터를 가져올 때도 사용
• fetch, axios, $.ajax 등 도구로 요청 가능

---

📡 REST API란 무엇인가요?

요즘 가장 널리 쓰이는 API 구조가 바로 REST API입니다.
REST는 “Representational State Transfer”의 약자로, HTTP 프로토콜을 기반으로 자원을 표현하고 조작하는 방식이에요.

REST API의 특징

• URL로 자원(Resource)을 표현
• HTTP 메서드(GET, POST, PUT, DELETE 등)로 동작
• 무상태성(Stateless)

예시

기능	HTTP 메서드	요청 URL
회원 목록 가져오기	GET	/api/users
회원 등록	POST	/api/users
회원 정보 수정	PUT	/api/users/1
회원 삭제	DELETE	/api/users/1

---

📦 API 요청과 응답 구조 이해하기

1. 요청 (Request)

GET /api/products HTTP/1.1
Host: example.com
Authorization: Bearer access_token

2. 응답 (Response)

HTTP/1.1 200 OK
Content-Type: application/json

{
  "id": 1,
  "name": "노트북",
  "price": 1200000
}

→ 서버가 응답으로 JSON 데이터를 돌려줍니다.

---

🛠️ fetch API로 실전 API 호출

fetch("https://example.com/api/products")
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("에러 발생:", error);
  });

→ 웹 페이지에서 서버 API를 호출하는 기본 방식입니다.

---

🧪 실전 예제: 상품 목록 불러오기

<ul id="productList"></ul>

<script>
fetch("https://example.com/api/products")
  .then(res => res.json())
  .then(data => {
    const ul = document.getElementById("productList");
    data.forEach(item => {
      const li = document.createElement("li");
      li.textContent = item.name + " - " + item.price + "원";
      ul.appendChild(li);
    });
  });
</script>

---

✅ API 응답 코드도 꼭 확인!

상태 코드	의미
200	성공 (OK)
201	생성됨 (Created)
400	잘못된 요청 (Bad Request)
401	인증 필요 (Unauthorized)
500	서버 오류 (Internal Server Error)

---

🔐 인증이 필요한 API 호출

fetch("/api/private-data", {
  headers: {
    "Authorization": "Bearer abcdef123456"
  }
})

→ API 보안을 위해 토큰 기반 인증(Bearer Token)이 많이 사용됩니다.

---

📚 API 문서 보는 법

외부 API를 사용할 때는 보통 공식 문서를 참고하게 됩니다. 대표적인 예시로는:

• 카카오 개발자 센터
• 네이버 API 문서
• Google API

각 문서에는 인증 방식, 요청 예시, 응답 구조, 쿼리 파라미터 등이 잘 정리되어 있어요.

---

💡 API 사용 시 실수 줄이는 팁

• console.log로 요청/응답 확인하기
• 응답코드 확인 후 처리 분기
• try-catch + async-await로 오류 대응하기
• Postman, Thunder Client 등 API 테스트 도구 활용

---

📚 마무리하며

API는 더 이상 어렵고 무서운 개념이 아니에요.
우리가 만드는 웹사이트와 서버, 또는 외부 서비스와 데이터를 주고받을 때 가장 중요한 개념 중 하나이니 반드시 잘 익혀야 합니다.

다음 편에서는 JSON Server로 직접 API 서버를 구축하고 fetch로 호출하는 실습을 이어갈게요!

---

#API기초 #RESTAPI #웹개발입문 #fetch활용법 #실전API호출 #웹퍼블리싱 #프론트엔드개발 #JSON응답 #퍼블리셔노미