🔍 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 사용 시 실수 줄이는 팁

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

📚 마무리하며

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

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

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

저작자표시 비영리 변경금지 (새창열림)