API(Application Programming Interface)의 원리

🍔 햄버거 가게에 비유해서 API의 원리를 쉽게 설명해보자.
React(프론트엔드)와 Python(백엔드)가 소통하는 방법을 이해해봅시다.

---

1. API(Application Programming Interface) 란?

"손님과 주방을 연결하는 웨이터"

• 예시:
  • 손님(프론트엔드): "햄버거 주세요!"
  • 웨이터(API): 주방(백엔드)에 주문 전달 → 완성된 햄버거를 손님에게 전달
  • 주방(백엔드): 재료를 조리해 햄버거 생성

👉 "API는 프론트엔드와 백엔드가 대화할 수 있게 하는 중간 다리입니다!"

---

2. 프론트엔드(React)와 백엔드(Python) 역할

구분	설명	예시
프론트엔드	사용자가 보는 화면	버튼, 폼, 애니메이션
백엔드	데이터 처리 & 저장	회원가입 로직, DB 연동

---

3. API 통신 원리 (햄버거 주문 과정)

1. 손님(React)이 주문서 작성
2. // React에서 API 호출 (Fetch 예시) fetch('https://api.myapp.com/order', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ menu: "치즈버거", count: 2 }) })
3. 웨이터(API)가 주방(Python)에 전달
4. # Flask(Python)로 API 엔드포인트 처리 from flask import Flask, request app = Flask(__name__) @app.route('/order', methods=['POST']) def order(): data = request.get_json() # { "menu": "치즈버거", "count": 2 } # 주문 처리 로직 실행 (DB 저장 등) return { "status": "success", "message": "주문 완료!" }
5. 주방(백엔드)에서 작업 완료 후 응답
6. // API 응답 데이터 (JSON 형식) { "status": "success", "message": "주문 완료!", "orderNumber": 123 }
7. 손님(React)이 결과 확인
8. fetch(...) .then(response => response.json()) .then(data => { console.log(data.message); // "주문 완료!" });

---

4. HTTP 메서드 (주문 유형)

메서드	설명	예시
GET	데이터 조회	메뉴판 요청
POST	데이터 생성	주문서 제출
PUT	데이터 수정	주문 변경
DELETE	데이터 삭제	주문 취소

---

5. 실제 연결 시 필요한 도구

1. React: fetch 또는 axios 라이브러리로 API 호출
2. Python: Flask/Django/FastAPI로 API 서버 구축
3. 공통 규격:
   • 엔드포인트(URL): https://api.myapp.com/order
   • 데이터 형식: JSON (JavaScript Object Notation)

---

6. 주의사항

1. CORS(Cross-Origin Resource Sharing): 프론트-백엔드 도메인이 다르면 차단됨 → 백엔드에서 CORS 설정 필요
2. 에러 처리: 네트워크 오류 시 대비 코드 작성 필수
3. 보안: API 키, 토큰 관리 주의 (예: JWT 사용)

---

🔨 간단한 예제: 회원가입 기능

(1) React (프론트엔드)

function SignupForm() {
  const [email, setEmail] = useState("");

  const handleSubmit = async () => {
    const response = await fetch('https://api.myapp.com/signup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: email, password: "1234" })
    });
    const result = await response.json();
    console.log(result);
  };

  return (
    <input value={email} onChange={(e) => setEmail(e.target.value)} />
    <button onClick={handleSubmit}>가입</button>
  );
}

(2) Python (백엔드 - Flask)

from flask import Flask, request
app = Flask(__name__)

@app.route('/signup', methods=['POST'])
def signup():
    data = request.get_json()
    # DB에 회원 정보 저장 로직
    return { "success": True, "user_id": 1 }

---

📚 정리

1. API = 프론트엔드와 백엔드가 JSON 데이터로 소통하는 규칙
2. React → 요청(fetch) ⇄ Python → 응답(Flask)
3. 원리: "햄버거 주문 과정"처럼 요청(Request)과 응답(Response) 반복

이제 API가 웨이터 역할을 해서 프론트엔드와 백엔드를 연결한다는 걸 이해했죠? 🍟

🍕 피자 주문으로 예를 들어 API 통신 과정을 차근차근 설명해드릴게요.
실제 데이터를 사용해 단계별로 보여드리겠습니다.

---

예시 시나리오: 피자 주문 앱

• 프론트엔드(React): 사용자가 주문하는 앱 화면
• 백엔드(Python): 주문을 받고 피자를 만드는 서버

---

1. 프론트엔드(React)에서 메뉴 조회 (GET 요청)

(1) React 코드

function MenuList() {
  const [menu, setMenu] = useState([]);

  // API 호출: 피자 메뉴 가져오기
  useEffect(() => {
    fetch('https://pizza-api.com/menu')
      .then(response => response.json())
      .then(data => setMenu(data));
  }, []);

  return (
    <div>
      {menu.map(pizza => (
        <div key={pizza.id}>
          <h3>{pizza.name}</h3>
          <p>가격: {pizza.price}원</p>
        </div>
      )}
    </div>
  );
}

(2) 백엔드 응답 데이터 (JSON)

[
  {
    "id": 1,
    "name": "페퍼로니 피자",
    "price": 20000
  },
  {
    "id": 2,
    "name": "고구마 피자",
    "price": 18000
  }
]

👉 결과: 사용자 화면에 피자 메뉴가 표시됩니다!

---

2. 주문하기 (POST 요청)

(1) React 코드

function OrderForm() {
  const [order, setOrder] = useState({ pizzaId: 1, quantity: 1 });

  const handleSubmit = async () => {
    // API 호출: 주문 전송
    const response = await fetch('https://pizza-api.com/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(order)
    });
    const result = await response.json();
    console.log("주문 결과:", result);
  };

  return (
    <div>
      <input 
        type="number" 
        value={order.quantity}
        onChange={(e) => setOrder({ ...order, quantity: e.target.value })}
      />
      <button onClick={handleSubmit}>주문하기</button>
    </div>
  );
}

(2) 백엔드(Python) 코드 (Flask)

from flask import Flask, request, jsonify
app = Flask(__name__)

orders = []  # 임시 주문 저장소

@app.route('/orders', methods=['POST'])
def create_order():
    data = request.get_json()  # React에서 보낸 데이터
    new_order = {
        "id": len(orders) + 1,
        "pizzaId": data["pizzaId"],
        "quantity": data["quantity"],
        "status": "조리 중"
    }
    orders.append(new_order)
    return jsonify(new_order), 201  # 201: 생성됨

(3) API 응답 데이터

{
  "id": 1,
  "pizzaId": 1,
  "quantity": 1,
  "status": "조리 중"
}

👉 결과: 주문이 성공적으로 접수되었습니다!

---

3. 주문 상태 확인 (GET 요청)

(1) React 코드

function OrderStatus() {
  const [order, setOrder] = useState(null);

  useEffect(() => {
    // API 호출: 주문 번호 1의 상태 가져오기
    fetch('https://pizza-api.com/orders/1')
      .then(response => response.json())
      .then(data => setOrder(data));
  }, []);

  return (
    <div>
      {order && <p>주문 상태: {order.status}</p>}
    </div>
  );
}

(2) 백엔드 응답 데이터

{
  "id": 1,
  "pizzaId": 1,
  "quantity": 1,
  "status": "배달 중"
}

👉 결과: 사용자 화면에 "주문 상태: 배달 중"이 표시됩니다!

---

🔍 전체 흐름 요약

1. 프론트엔드 → fetch로 백엔드 API 호출
   • GET: 데이터 조회
   • POST: 데이터 생성
2. 백엔드 → 요청 처리 후 JSON 데이터 반환
3. 프론트엔드 → 받은 데이터로 UI 업데이트

---

📝 실제 데이터 흐름

1. React → { pizzaId: 1, quantity: 2 } (주문 데이터)
2. Python → { id: 1, status: "조리 중" } (응답 데이터)

---

💡 핵심 정리

• API는 프론트와 백엔드가 데이터를 주고받는 창구입니다.
• JSON 형식으로 메뉴, 주문, 상태 같은 정보를 교환해요.
• React는 사용자 입력을 받아 API 호출 → Python은 로직 처리 후 응답

이제 피자 주문처럼 데이터가 오가는 과정이 이해되시나요? 😊