클래스 관리자 Django + React

그래서 최근에 제 친구 중 한 명이 코딩 포트폴리오(풀스택 개발자용)를 만들기 시작했습니다. 그래서 나는 그와 다른 사람들이 포트폴리오를 만드는 데 도움이 될 것이라고 생각했습니다.

다음은 React(JavaScript)로 만든 Class Manager(기본적으로 학교 시스템, 교사가 시험과 학생 성적을 게시하고 학생이 시험을 제출하고 다른 급우와 채팅하고 화상 통화를 할 수 있는 앱)입니다. 프론트엔드와 백엔드를 위한 Django(Python).

면책 조항, 이것은 초보자용 튜토리얼이 아닙니다. 대부분의 내용은 설명하지 않습니다. 첫 번째로 시간이 많이 걸리기 때문입니다. 두 번째로 대부분의 기본 사항을 알고 있다고 생각합니다. 설명할 내용은 고급 부분뿐입니다.

둘째, 이것은 꽤 큰 프로젝트이기 때문에 여러 부분으로 분리됩니다 : ) 이것은 “Getting Started” 부분입니다 : )

이 자습서에서는 node.js, yarn, Python 3.10.5( and Django)를 사용할 것이므로 다운로드했는지 확인하십시오. 모든 항목을 다운로드한 후 모든 항목을 저장할 폴더를 엽니다. 저에게는 Class Manager/ 모든 것이 이 폴더 내에서 발생합니다.

장고부터 시작해 봅시다. cmd에서 Class Manager/를 열고 다음 명령을 실행합니다.

Class Manager> django-admin startproject backend
Class Manager> cd backend
Class Manager\backend> python manage.py startapp Auth
Class Manager\backend> python manage.py startapp Class
Class Manager\backend> pip install djangorestframework channels channels-redis django-cors-headers

이제 React를 설정해 보겠습니다. 다음 명령을 실행합니다.

여기까지 왔으니 frontend/src에서 수정해야 할 몇 가지 사항이 있습니다. 다음을 수행하십시오.

Delete: App.css

Delete: App.test.js

Delete: logo.svg

Delete: setupTests.js

Add a /components folder inside /src

Add a /redux folder inside /src 

따라서 폴더 구조는 다음과 같아야 합니다.

/Class Manager
|
|-- /backend
    |
    |--- /Auth
    |--- /backend
    |--- /Class
|-- /frontend
    |
    |--- /node_modules
    |--- /public
    |--- /src
        |
        |--- componets
    |--- redux
    |
    |--- package.json
    |--- package-lock.json

이제부터는 2 cmd’s open(보다 효율적이려면)을 갖는 것이 중요합니다. 하나는 Class Manager/backend에 대한 것이고 다른 하나는 Class Manager/frontend에 대한 것입니다.

이제 앱을 설정하고 종료하겠습니다! backend/settings.py 업데이트INSTALLED_APPS:

INSTALLED_APPS = [
    # ...

    'rest_framework',
    'rest_framework.authtoken',
    'django_filters',
    'corsheaders',
    'channels',

    'Auth',
    'Class',
]

그리고 다음을 추가하십시오INSTALLED_APPS.

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication', # We will be using auth token for authentication : )
    ],
    'DEFAULT_PARSER_CLASSES': [
        'rest_framework.parsers.JSONParser',
        'rest_framework.parsers.MultiPartParser', # We will need to parse images later : )
    ],
    'DEFAULT_FILTER_BACKENDS': [
        'django_filters.rest_framework.DjangoFilterBackend' # We will manage filtering with FilterBackend : )
    ],
}

그리고 다음과 같이 업데이트MIDDLEWARE합니다.

MIDDLEWARE = [
    # ...

    'corsheaders.middleware.CorsMiddleware', # Initialize CORS
    'csp.middleware.CSPMiddleware'
]

마지막으로 settings.py의 맨 아래에 다음을 추가합니다.

# Setting up media files( images, .txt, etc.)
STATIC_URL          =   'static/'
DEFAULT_AUTO_FIELD  =   'django.db.models.BigAutoField'

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

ASGI_APPLICATION = "backend.routing.application"

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer"
    }
}

CSRF_COOKIE_SECURE                  =      True
SESSION_COOKIE_SECURE               =      True
SECURE_HSTS_SECONDS                 =      0
SECURE_HSTS_INCLUDE_SUBDOMAINS      =      True
SECURE_HSTS_PRELOAD                 =      True
CSP_DEFAULT_SRC                     =      ("'self'",)
CSP_STYLE_SRC                       =      ("'self'",)
CSP_SCRIPT_SRC                      =      ("'self'",)
CSP_IMG_SRC                         =      ("'self'",)
CSP_FONT_SRC                        =      ("'self'",)

CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
]

이제 backend/urls.py로 이동하여 업데이트합니다.

from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path("", include("Auth.urls")),
    path("", include("Class.urls"))
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

우리는 python code로 끝났습니다(이 자습서의 경우). 이제 frontend/src/App.js로 이동합니다.

export default function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

지금은 여기까지입니다: ). 나는 우리가 어떤 코드도 실행할 필요가 없다는 것을 알고 있지만, 그것은 단지 설정하는 것이었기 때문에 이 튜토리얼에만 해당됩니다! 다음 튜토리얼을 기대해주세요 :)