20260402_공부기록3편_1

HY_1023·2026년 4월 2일

MENTOS

목록 보기

17/19

질문

HTML 과 JSON 은 API 확장이해라고 하는데.. 결국 데이터를주고받는 URL주소라고 생각하면되는거니

답변

네, 방향은 맞는데 한 단계만 더 정리하면 훨씬 명확해져요.

핵심: 같은 URL, 다른 응답 형식

예를 들어 "3번 게시글을 보여줘"라는 요청을 생각해 보세요.

기존 Django (HTML 응답)

GET /posts/3/

→ 서버가 HTML 페이지 통째로 만들어서 돌려줌

<html>
  <h1>Django 공부중</h1>
  <p>DRF 재밌다</p>
</html>

브라우저가 바로 그려서 보여줌. 화면 + 데이터가 섞여있음.

DRF 방식 (JSON 응답 = API)

GET /api/posts/3/

→ 서버가 순수 데이터만 돌려줌

{
  "id": 3,
  "title": "Django 공부중",
  "content": "DRF 재밌다"
}

이건 화면이 아니라 날것의 데이터. 이걸 누가 받든 자유롭게 쓸 수 있음.

그래서 "API 확장 이해"가 뭐냐면

교안에서 말하는 건 이거예요:

같은 모델 데이터를 HTML이 아니라 JSON으로도 내보낼 수 있다는 걸 이해해라

즉 Django의 Model(DB 데이터)은 그대로인데, 출력 형식만 바꾼 것이에요.

	HTML 방식	JSON(API) 방식
누가 쓰나	브라우저가 직접 화면으로 표시	React, 모바일앱, 다른 서버 등 아무나
데이터+화면	섞여있음	데이터만 깔끔하게 분리
유연성	낮음 (Django 템플릿에 묶임)	높음 (프론트를 자유롭게 바꿀 수 있음)

정리하면

"API 엔드포인트 = 데이터를 주고받는 URL 주소"라는 이해가 맞습니다. 거기에 한 가지만 추가하면 완벽해요:

HTML로 주던 걸 JSON으로 바꿔서 주는 URL → 그게 API 엔드포인트

이렇게 하면 Django는 데이터만 제공하는 서버가 되고, 화면은 React든 모바일앱이든 아무나 가져다 쓸 수 있는 구조가 되는 거예요. 그게 바로 교안에서 말하는 "프론트엔드와 백엔드를 나누는 구조"의 출발점입니다.

질문

API 엔드포인트가 무엇이고 추후 React / Next.js 같은 프론트엔드와 Django 백엔드를 나누는 구조를 배우는데 그것들에 대한 각각의 기초개념과 큰흠구조에서의 역할을 알려줘

답변

좋은 질문이에요. 큰 그림부터 잡고, 각 개념을 하나씩 정리해 드릴게요.

큰 그림: 프론트엔드 / 백엔드 분리 구조

전통적인 Django는 서버에서 HTML을 만들어서 브라우저에 통째로 보내는 방식이에요. 하지만 현대적인 구조에서는 역할을 둘로 나눕니다.

브라우저(사용자) ↔ 프론트엔드(React/Next.js) ↔ API 엔드포인트 ↔ 백엔드(Django/DRF) ↔ 데이터베이스

프론트엔드는 "화면"만 담당하고, 백엔드는 "데이터 처리"만 담당해요. 이 둘을 연결해주는 통로가 바로 API 엔드포인트입니다.

1. API 엔드포인트란?

"데이터를 주고받기 위한 특정 URL 주소"입니다.

예를 들어 게시판 앱이라면:

GET /api/posts/ → 글 목록을 달라
POST /api/posts/ → 새 글을 등록해라
GET /api/posts/3/ → 3번 글의 상세 내용을 달라
PUT /api/posts/3/ → 3번 글을 수정해라
DELETE /api/posts/3/ → 3번 글을 삭제해라

핵심은 HTML 페이지가 아니라 JSON 데이터를 돌려준다는 점이에요.

// GET /api/posts/3/ 의 응답 예시
{
  "id": 3,
  "title": "Django 공부중",
  "content": "DRF 재밌다",
  "author": "철수",
  "created_at": "2026-04-02"
}

2. Django + DRF (백엔드)의 역할

"데이터의 저장, 조회, 수정, 삭제 + 비즈니스 로직"

Django REST Framework(DRF)를 쓰면 Django가 HTML 대신 JSON을 돌려주는 API 서버가 됩니다.

백엔드가 하는 일:

데이터베이스와 대화 (Model)
요청이 올바른지 검증 (Serializer)
누가 요청했는지 인증/권한 확인 (Authentication/Permission)
JSON으로 응답 생성

비유하면 "주방"이에요. 주문(요청)을 받아서 음식(데이터)을 만들어 내보내는 곳.

3. React / Next.js (프론트엔드)의 역할

"사용자가 보고 조작하는 화면(UI)"

프론트엔드가 하는 일:

예쁜 화면을 그린다
사용자가 버튼을 클릭하면 → 백엔드 API에 요청을 보낸다
받은 JSON 데이터를 화면에 보여준다
페이지 전환, 애니메이션, 입력 폼 관리 등

비유하면 "홀/서빙"이에요. 손님(사용자)과 직접 대면하고, 주방(백엔드)에 주문을 전달하는 곳.

React는 화면을 컴포넌트 단위로 쪼개서 만드는 라이브러리이고, Next.js는 React 위에 서버사이드 렌더링(SSR), 라우팅, SEO 등을 추가한 프레임워크입니다.

4. 실제 흐름 예시

사용자가 게시글 목록을 본다고 하면:

사용자가 브라우저에서 페이지를 연다
React가 화면을 그리면서 fetch("/api/posts/")를 호출
이 요청이 Django(DRF)에 도착
Django가 DB에서 게시글을 꺼내서 JSON으로 응답
React가 JSON을 받아서 카드 형태 등으로 화면에 렌더링

// React 쪽 코드 (간략)
const [posts, setPosts] = useState([]);

useEffect(() => {
  fetch("http://localhost:8000/api/posts/")
    .then(res => res.json())
    .then(data => setPosts(data));
}, []);

요약 정리

개념	한 줄 정의	비유
API 엔드포인트	데이터를 주고받는 URL 주소	주문 창구
Django + DRF	데이터 처리 & JSON 응답 서버	주방
React	화면(UI)을 컴포넌트로 만드는 도구	홀 인테리어
Next.js	React + SSR/라우팅/SEO 등 추가	홀 운영 시스템
JSON	프론트↔백이 주고받는 데이터 형식	주문서 양식

지금 교안에서 DRF Serializer / ViewSet / Router를 배우는 이유가 바로 이 "주방 쪽 창구 만들기"를 익히는 것이에요. 이게 익숙해지면 나중에 React를 붙이는 건 "홀에서 그 창구로 주문 넣기"만 배우면 되니까 자연스럽게 연결됩니다.