🌐 API란 무엇인가?

 

---

“백엔드랑 프론트엔드가 데이터를 주고받는다는데… 그게 바로 API야?”
코딩을 배우다 보면 자주 듣게 되는 말이 바로 API다.
하지만 정작 API가 정확히 뭔지, 어떻게 동작하는지,
그리고 내 코드에서 어떻게 쓰이는지 모르는 경우가 많다.

이번 글에서는 완전 초보자도 이해할 수 있도록
API의 개념, 작동 원리, 실제 예시, 그리고 활용 방법을 단계별로 설명한다.

#API기초 #RESTAPI #데이터통신

---

💡 1. API란 무엇인가?

“Application Programming Interface”의 약자
👉 프로그램끼리 데이터를 주고받는 통신 규칙

쉽게 말해,
**‘서로 다른 프로그램이 대화할 수 있게 하는 통역사’**다.

예를 들어,

• 당신(프론트엔드)은 “날씨 정보 좀 줘!”라고 요청하고,
• 서버(백엔드)는 “서울은 맑음, 23도야”라고 응답한다.

이때 요청(Request) 과 응답(Response) 사이를 이어주는 게 바로 API다.

---

🧭 2. 현실 예시로 보는 API

🍔 예시: “햄버거 주문 시스템”

• 당신이 “치즈버거 세트 주세요.” → 요청(Request)
• 직원이 주방에 전달하고, 음식이 나옴 → 응답(Response)

이 과정 전체가 API 호출과 같다.
당신은 햄버거 레시피나 조리 과정을 몰라도
‘주문 방법’(=API 규칙)만 알면 결과를 받을 수 있다.

💬 즉,

API = 복잡한 시스템을 몰라도 결과를 쉽게 요청할 수 있게 해주는 규칙

---

⚙️ 3. API의 구성 요소

구성 요소 설명 예시

Endpoint (주소)	요청을 보낼 대상의 URL	https://api.weather.com/seoul
Method (요청 방식)	어떤 동작을 할 것인가	GET, POST, PUT, DELETE
Header (요청 정보)	보안, 포맷 등 부가 정보	Authorization, Content-Type
Body (요청 데이터)	서버에 보낼 실제 내용	{ "user": "JoKibeom" }

---

🔗 4. REST API란?

“웹에서 가장 많이 쓰이는 API 규칙”

REST(Representational State Transfer) 는
API 통신의 대표적인 설계 방식이다.
단순하고 직관적이라 거의 모든 서비스가 이 구조를 따른다.

🔹 기본 메서드

Method 역할 예시

GET	데이터 조회	/users
POST	데이터 생성	/users
PUT	데이터 수정	/users/1
DELETE	데이터 삭제	/users/1

💡 예시 흐름

클라이언트(React)  →  서버(Node.js)  →  데이터베이스(MySQL)

React에서 버튼 클릭 → 서버에 API 요청 →
서버는 DB에서 데이터 꺼내 → React로 전달 → 화면 표시

---

📡 5. 실제 코드 예시 (React + Axios)

import axios from "axios";

function Weather() {
  const [weather, setWeather] = useState(null);

  const getWeather = async () => {
    const res = await axios.get("https://api.weatherapi.com/v1/current.json?q=seoul");
    setWeather(res.data);
  };

  return (

{weather &&

현재 온도: {weather.current.temp_c}°C

}

  );
}

💬 설명

• axios.get() → 서버에 GET 요청
• res.data → 응답 데이터
• setWeather() → 화면에 표시

즉, React에서 API를 호출하면 실시간 데이터를 가져올 수 있다.

---

🔐 6. API 키(API Key)란?

“API를 사용하는 사람을 인증하기 위한 비밀번호”

API는 누구나 호출할 수 있으면 위험하므로,
대부분의 서비스는 API Key(고유 인증 키) 를 요구한다.

예시:

https://api.openai.com/v1/chat?key=sk-123456

💡 주의사항

• API 키는 절대 공개 저장소(GitHub 등)에 올리면 안 된다.
• .env 파일에 보관하고 환경 변수로 불러와야 한다.

---

🧱 7. JSON — API의 언어

“서버와 프론트엔드가 서로 이해하는 공통 언어”

대부분의 API는 데이터를 JSON(JavaScript Object Notation) 형태로 주고받는다.

{
  "name": "기범",
  "age": 27,
  "skills": ["React", "Next.js", "Node.js"]
}

💬 JSON의 장점

• 사람이 읽기 쉽고,
• 자바스크립트에서 바로 사용할 수 있으며,
• 다른 언어에서도 쉽게 변환 가능하다.

---

🧠 8. API 설계의 기본 원칙 (백엔드 관점)

원칙 설명

일관성	요청 URL과 메서드는 명확해야 한다.
명확한 응답 구조	성공/실패 시 상태코드(200, 400, 404 등) 전달
보안	인증(JWT, OAuth), HTTPS 적용
확장성	버전 관리 (/api/v1/)로 유지보수 용이

💡 REST API를 직접 설계해보면
데이터의 흐름과 통신 구조를 훨씬 깊이 이해할 수 있다.

---

⚡ 9. GraphQL — 차세대 API 트렌드

“원하는 데이터만 정확히 요청하는 새로운 방식”

REST는 /users, /posts처럼 엔드포인트별로 요청해야 하지만,
GraphQL은 한 번의 요청으로 필요한 데이터만 선택적으로 가져올 수 있다.

{
  user(id: 1) {
    name
    email
    posts {
      title
    }
  }
}

💬 장점

• 불필요한 데이터 전송 줄임
• 프론트엔드에서 필요한 데이터만 명시 가능
• 대규모 프로젝트에 적합

---

🧩 10. API를 잘 다루는 개발자가 되는 법

1. Postman, Thunder Client로 API 테스트
2. 에러 코드(400, 401, 404, 500)의 의미 이해
3. API 문서(Swagger, Redoc) 읽는 연습
4. 외부 공개 API(OpenWeather, TMDB 등) 활용 프로젝트 만들어보기
5. React, Next.js, Node.js에서 직접 통신 로직 구현해보기

---

🚀 마무리 — “API를 이해하면 세상이 연결된다”

API는 단순한 기술이 아니라,
세상 모든 서비스가 연결되는 언어다.

• 네이버 지도, 카카오 로그인, 유튜브 영상 — 전부 API 기반
• 프론트엔드와 백엔드를 이어주는 다리
• 데이터를 주고받는 규칙을 이해하면 어떤 언어든 확장 가능

👉 API를 안다는 건, 세상과 소통할 줄 안다는 뜻이다.
당신의 첫 API 호출이 새로운 가능성의 시작이 될 것이다.

---