Django 초기 설정 및 REACT 연결

 

Django란?

• Django란 파이썬으로 만들어진 웹 애플리케이션 프레임워크(web application framework)
• MTV(Model-Template-View)의 개발방식
• → 웹 프로그래밍 영역을 3가지 개념(모델, 템플릿, 뷰)으로 나눠 개발하는 방식
• 인스타그램, 핀터레스트 등 에서 사용

Django 특징

• 보안 공격에 튼튼한 웹 프레임워크 (SQL 인젝션, XSS(cross-site scripting), CSRF(cross-site request forgery), 클릭재킹(clickjacking)과 같은 보안 공격을 기본으로 막아 줌)
  • SQL 인젝션: 악의적인 SQL을 주입하여 공격하는 방법
  • XSS: 자바스크립트를 삽입해 공격하는 방법
  • CSRF: 위조된 요청을 보내는 공격 방법
  • 클릭재킹: 사용자의 의도하지 않은 클릭을 유도하는 공격 방법

• 여러 기능이 이미 준비되어 있음(로그인, 관리자..... 등)
• 출시된지 오래되어 관련 자료가 많다.
• Django의 철학 - 무조건 쉽고, 무조건 편하게
• High level framework: 자유도가 떨어진다. (Flask-micro framework 비교)

Frontend와 Backend의 완벽한 분리

서로 다른 언어로 만들어진 웹 프레임워크와 라이브러리가 만나 하나의 서비스로 작동하기 위해서는?

1. django template에서 react가 작동할 수 있게 static파일에 react js를 넣어 라이브러리로 사용
2. frontend를 작성하고 이를 django-rest-framework(drf) 네트워크를 사용하여 가져오기

→ 왜 두번째 방법을 이용하는지?

frontend와 backend의 완전한 분리가 유지보수성 및 작업효율 향상에 많은 영향을 끼지기 때문

backend프로그래머들은 데이터에만 신경쓰면 되고 frontend프로그래머들은 어떻게 보여지는지에 대한 신경만 쓰면 된다.

vsCode 사용, 터미널은 bash사용하였다. 

## django-rest-framework(drf) 네트워크를 사용

1.1 가상환경 생성하기

python -m venv venv

1.2 가상환경 실행하기

#맥 os
source myvenv/bin/activate

#윈도우
source myvenv/Scripts/activate

1.3 pip 업데이트 이후 가상환경에 django 설치

python -m pip install --upgrade pip
pip install django

1.4 pip 목록들 저장

pip freeze > requirements.txt

1.4 django를 활용하여 프로젝트 생성

django-admin startproject <프로젝트명> .

2.1 django로 호출할 앱 생성하기(users)

python manage.py startapp users

2.2 settings.py 수정

#English_conversation_app/settings.py

...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'users', #추가된부분
    
]
...

2.3 django 실행해보기

python manage.py migrate
python manage.py runserver

이후 터미널에서 Ctrl(Control) + C로 종료

 

3.1 user 모델 정의하기

#English_conversation_app/users/models.py

from django.db import models
from django.contrib.auth.models import AbstractUser
# Create your models here.

class User(AbstractUser):
    # CEFR 레벨 선택지를 정의
    LEVEL_CHOICES = [
        ('A1', 'Beginner'),
        ('A2', 'Elementary'),
        ('B1', 'Intermediate'),
        ('B2', 'Upper Intermediate'),
        ('C1', 'Advanced'),
        ('C2', 'Proficiency')
    ]
    level = models.CharField(max_length=2, choices=LEVEL_CHOICES, default='A1', verbose_name="CEFR Level")
    profile_img = models.ImageField(upload_to='profile_images/', blank=True, null=True)

    def __str__(self):
        return self.username

#English_conversation_app/users/admin.py

from django.contrib import admin
from .models import Users
admin.site.register(Users)

python manage.py makemigrations
python manage.py migrate

3.2 superuser 생성하기

python manage.py createsuperuser

3.3 django 실행해서 확인해보기

python manage.py runserver

4.1 django-rest-framework를 설치하기

pip install djangorestframework

4.2 settings.py 수정하기

English_conversation_app/settings.py

...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'users',
    'rest_framework', #추가한 내용
    
]
...
#이하 추가하기
REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
}

5.1 django-cors-headers 설치하기

pip install django-cors-headers

5.2 settings.py 수정

#settings.py
...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'users',
    'rest_framework',
    'corsheaders', # 추가
]
...

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',     # 추가
    'django.middleware.common.CommonMiddleware', # 추가
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
...

#이하 추가
CORS_ORIGIN_WHITELIST = [
    'https://localhost:3000',
]

CORS_ORIGIN_ALLOW_ALL = True

6.1 리액트 앱 생성하기

npm install -g create-react-app
#yarn global add create-react-app
create-react-app frontend

# 다른 명령어
npx create-react-app frontend

6.2 리액트 앱 실행하기

cd frontend
npm start
#yarn start