📘 DRF + 📒 JavaScript
DRF(Django REST Framework)와 JavaScript 프런트엔드 작업을 연결을 위해 알아야 할 중요한 개념들
1️⃣ REST API 개념
- DRF : 데이터를 제공하는 API 서버 역할
- JavaScript(예: React, Vue, Vanilla JS) : DRF로부터 데이터를 받아서 화면에 보여주는 역할
- API 요청 방식:
- GET : 데이터를 가져옴 (예: 게시글 목록 조회)
- POST : 데이터를 생성 (예: 회원가입)
- PUT/PATCH : 데이터를 수정 (예: 프로필 수정)
- PUT :
- PATCH :
- DELETE : 데이터를 삭제 (예: 댓글 삭제)
2️⃣ CORS (Cross-Origin Resource Sharing)
- DRF 서버와 JavaScript 프론트가 다른 도메인(출처)에서 실행될 때 발생하는 보안 문제.
- 해결 방법: django-cors-headers 라이브러리를 설치하고 허용 설정 추가.
- JavaScript가 다른 도메인(예: localhost:5500 같은 곳)에서 실행된다면, DRF에 django-cors-headers를 설치하고 설정
▼ 설정 방법
더보기
pip install django-cors-headers# settings.py
INSTALLED_APPS = [
"corsheaders",
"rest_framework",
...
]
MIDDLEWARE = [
"corsheaders.middleware.CorsMiddleware",
...
]
CORS_ALLOW_ALL_ORIGINS = True # 개발 중에는 허용
특정 도메인만 허용하는 경우
# settings.py
CORS_ALLOWED_ORIGINS = [
"http://127.0.0.1:5500", # JS 실행되는 주소
]3️⃣ JSON 형식 데이터
- DRF는 데이터를 JSON 형태로 반환함.
# JSON
{
"id": 1,
"title": "Hello, DRF!",
"content": "This is my first post."
}- JavaScript에서는 fetch 또는 axios를 이용해 이 JSON 데이터를 가져옴.
✨ 예제
1️⃣ DRF에서 게시글 API 만들기
DRF에서 게시글 데이터를 제공하는 API를 만들었다고 가정.
# views.py
from rest_framework.response import Response
from rest_framework.decorators import api_view
posts = [
{"id": 1, "title": "첫 번째 글", "content": "안녕하세요!"},
{"id": 2, "title": "두 번째 글", "content": "반가워요!"},
]
@api_view(["GET"])
def get_posts(request):
return Response(posts)
2️⃣ JavaScript에서 API 데이터 가져와서 화면에 표시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>게시글 리스트</title>
</head>
<body>
<h1>게시글 목록</h1>
<!-- 게시글 목록을 표시할 <ul> 태그 -->
<ul id="post-list"></ul>
<script>
// 게시글 데이터를 가져오는 비동기 함수
async function fetchPosts() {
try {
// DRF에서 제공하는 API 엔드포인트로 GET 요청을 보냄
let response = await fetch("http://127.0.0.1:8000/api/posts/");
// 서버 응답을 JSON 형식으로 변환
let posts = await response.json();
// <ul> 요소 가져오기 (게시글 목록이 표시될 곳)
let postList = document.getElementById("post-list");
// 기존 목록을 지우고 새로운 데이터를 표시하기 위해 초기화
postList.innerHTML = "";
// API에서 받은 게시글 목록을 하나씩 반복하며 화면에 추가
posts.forEach(post => {
let li = document.createElement("li"); // <li> 요소 생성
li.textContent = `${post.id}. ${post.title}`; // 게시글 번호와 제목 추가
postList.appendChild(li); // <ul>에 추가
});
} catch (error) {
// 오류 발생 시 콘솔에 로그 출력
console.error("데이터를 가져오는 중 오류 발생:", error);
}
}
// 페이지가 로드되면 fetchPosts 함수 실행 (게시글 목록 불러오기)
fetchPosts();
</script>
</body>
</html>
💡 코드 설명
- HTML 구조
- <h1> : 제목 표시
- <ul id="post-list"> : 게시글 목록이 추가될 공간
- fetchPosts() 함수
- fetch("http://127.0.0.1:8000/api/posts/") : DRF 서버에서 게시글 데이터를 가져옴.
- response.json() : JSON 형식으로 변환.
- document.getElementById("post-list") : <ul> 요소를 가져옴.
- postList.innerHTML = "" : 기존 목록을 초기화.
- forEach(post => {...}) : API에서 받은 게시글 데이터를 <li> 요소로 추가.
- 오류 처리
- try...catch를 사용하여 API 요청 중 오류가 발생하면 콘솔에 로그를 출력.
- 자동 실행
- fetchPosts();가 실행되면서 페이지가 로드될 때 자동으로 게시글 목록을 가져옴.
'🔥 공부 > 🎨 Front-end' 카테고리의 다른 글
| [🎨Front-end] HTML/CSS/JS, JavaScript 통신 (0) | 2025.03.17 |
|---|---|
| [🎨Front-end] HTML, CSS 기초 (0) | 2025.02.20 |