테스트겸 상품 추천 페이지 만들면서 Django DRF에 관심이 있었다.
Django는 한두번 해본적 있는데 이제 기억이 또 가물가물해서...(안쓰다보면 자꾸 잊는다.)
아무튼 귀찮아서 chatGPT의 도움을 받아 테스트 환경을 만들었는데 몇가지 빠진 부분이있어서 보완하며 테스트 환경을 만들어 진행해보았다.
일단 연동을 목적으로 하고 있으며 패키지 분석이나 버전등 체크는 진행하지 않았다.

React

프론트엔드 라이브러리

Django DRF

Django Rest FrameWork

---

QuickStart

Django DRF 설정

python venv 적용상태라 가정한다.

Django DRF 프로젝트 생성

Django 프로젝트 생성gpt 참고

# 참고하고 변형해서 사용한다.
django-admin startproject myproject
cd myproject

Django 프로젝트작성자 수정 적용

django-admin startproject myproject .

Django 앱 생성

Django 앱 생성gpt적용

python manage.py startapp myapp

Django Project Settings.py 설정

myproject/settings.py 파일을 열어 INSTALLED_APPS에 myapp을 추가합니다.gpt적용

INSTALLED_APPS = [
    ...
    'myapp',
    ...
]

Django REST framework 설치 및 설정

Django와 React를 통신하게 하기 위해 Django REST framework를 사용합니다.gpt적용

pip install djangorestframework

settings.py에 REST framework를 추가합니다.gpt적용

INSTALLED_APPS = [
    ...
    'rest_framework',
    ...
]

모델 및 API 뷰 설정

myapp/models.py에서 모델을 정의합니다.gpt적용

from django.db import models

class Item(models.Model):
    name = models.CharField(max_length=100)
    description = models.TextField()

    def __str__(self):
        return self.name

모델을 적용합니다. 작성자 추가

python manage.py makemigrations
python manage.py migrate

gpt에서 이 과정이 빠져있어 추가하였다.

myapp/admin.py 관리자 페이지에 등록 합니다.작성자 추가

from django.contrib import admin
from .models import Item

admin.site.register(Item)

gpt에서 이 과정이 빠져있어 추가하였다. 이부분이 누락되면 개발 전까지 데이터 입력 수단이 없다. shell을 이용하면 되기는 한다...

myapp/serializers.py 파일을 생성하고 시리얼라이저를 정의합니다.gpt적용

from rest_framework import serializers
from .models import Item

class ItemSerializer(serializers.ModelSerializer):
    class Meta:
        model = Item
        fields = '__all__'

myapp/views.py에서 API 뷰를 설정합니다.gpt적용

from rest_framework import viewsets
from .models import Item
from .serializers import ItemSerializer

class ItemViewSet(viewsets.ModelViewSet):
    queryset = Item.objects.all()
    serializer_class = ItemSerializer

myapp/urls.py 파일을 생성하고 URL 라우팅을 설정합니다.gpt적용

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import ItemViewSet

router = DefaultRouter()
router.register(r'items', ItemViewSet)

urlpatterns = [
    path('', include(router.urls)),
]

myproject/urls.py에 myapp의 URL을 포함시킵니다.gpt적용

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('myapp.urls')),
]

React 설정

React 프로젝트 생성

# python 프로젝트와 동일 레벨에 서 진행한다.
npx create-react-app myfrontend

Axios 설치

React에서 Django API와 통신하기 위해 Axios를 사용합니다.gpt적용

npm install axios

API 호출 설정

src/App.js 파일에서 Axios를 사용하여 API를 호출합니다.gpt적용

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:8000/api/items/')
      .then(response => {
        setItems(response.data);
      })
      .catch(error => {
        console.error('There was an error fetching the items!', error);
      });
  }, []);

  return (
    <div className="App">
      <h1>Items</h1>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}: {item.description}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Django 추가설정(CORS 설정)

Django와 React가 다른 포트에서 실행되므로 CORS 설정이 필요합니다.gpt적용

pip install django-cors-headers

settings.py 설정

settings.py에 CORS 설정을 추가합니다.gpt적용

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

Django 접속 및 데이터 생성

관리자 계정 생성

데이터 생성을 위하여 관리자 계정을 생성합니다. 작성자 추가

python manage.py createsuperuser

관리자 페이지 접속

python manage.py runserver

http://127.0.0.1:8000/admin

데이터 생성

MYAPP 카테고리 Items를 눌러 데이터를 생성한다.작성자 추가

이 부분이 누락되면 Items라는 단어만 보이며, 연동되었는지 확인이 불가하다. gpt에 빠져서 추가하였음.

React 서버 실행

npm run start

후기

약 1시간정도 테스트를 진행해보았다.
테스트 환경으로 급하게 진행해보았지만,
gpt를 이용하면 약간의 기초 지식만 있어도 연동 할수 있다는 점이 일단 놀라웠다...
응용하는데는 추가 학습이 필요하리라는 생각과 음...일단 알긴 알아야 활용하기도 좋을것 같다.