Django+React 프로젝트 생성

아래 설명은 (주) 밀키웨이 컴퍼니에서 Django+React 프로젝트 생성에 표준으로 사용하는 과정입니다. 이후 과정은 각 프로젝트 성격에 따라 달라지므로, 개인의 프로젝트 구성 하실때 참고만 해주세요.

0. 프로젝트 구조

django-react            # ROOT
├── backend_django      # Django 프로젝트 
│   └── config
└── front_react         # React app 프로젝트 
    ├── node_modules
    ├── public
    └── src

아래 예제에서, Shell Script 명령 중 각 프로젝트에서 실행되어야 할 명령어는 cd <프로젝트 디렉토리>로 시작 합니다.

그 외의 경우는 ROOT(django-react 디렉토리)에서 실행하시면 됩니다.

1. 프로젝트 생성

$ mkdir django-react
$ cd django-react
$ create-react-app front_react
$ django-admin startproject config
$ mv config backend_django
$ pyenv virtualenv 3.7.4 django-react
$ pyenv local django-react
$ pip install Django
$ pip freeze > requirements.txt

create-react-app, django-admin, pyenv 명령어는 개인 개발 환경에 맞춰서 설치해 줍니다.

2. IntelliJ 프로젝트 등록

1. 신규 프로젝트 생성

   

2. 빈 프로젝트로 생성

   

3. 위 챕터1에서 생성한 ROOT 디렉토리 지정하여 프로젝트 생성

   

4. React app 모듈 추가

   1) +버튼을 눌러 New Module을 선택 한다.

   

   2) Static Web의 React App을 선택 한다.

   

   3) React App 경로를 지정한다.

   

5. Django 모듈 추가

   1) +버튼을 눌러 New Module을 선택 한다.

   

   2) 챕터1에서 생성한 django-react 가상환경을 이용하기 위해 New... 버튼을 선택한다.

   

   3) 사용자 Home 디렉토리의 .pyenv 디렉토리 안쪽에 생성된 가상환경 경로를 설정해준다.

   

   4) 다시 New Module 화면으로 돌아와 Python의 Django를 체크해준다. 나머지는 각 프로젝트 설정에 맞춰서 추가 설정한다.

   

   5) Djang 프로젝트 경로를 지정한다.

   

   6) Django 설정을 아래 화면을 참고하여 잡아준다.

   

   7) [추가] 소스 경로가 자동으로 잡히지 않은 경우 Add Content Root 를 이용하여 경로 설정을 해준다.

   

   8) [추가] SDK 가 잡혀있지 않은 경우 챕터1에서 생성한 가상환경을 잡아준다.

   

3. Django Settings.py 수정

1. .secrets 생성 및 SECRET_KEY 등록

   $ mkdir .secrets
   $ touch .secrets/base.json
   $ vi .secrets/base.json
   

   base.json에 아래와 같이 SECRET_KEY를 등록 한다.

   {
     "SECRET_KEY": "<YOUR_SECRET_KEY>"
   }
   

2. config/settings.py 파일의 프로젝트 경로 및 Security 설정 을 아래와 같이 수정한다.

   import json        # 추가
   import os
       
   BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
       
   # 아래 내용을 추가합니다.
   ROOT_DIR = os.path.dirname(BASE_DIR)
       
   TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')
       
   SECRETS_DIR = os.path.join(ROOT_DIR, '.secrets')
   SECRETS_BASE = os.path.join(SECRETS_DIR, 'base.json')
       
   secrets = json.loads(open(SECRETS_BASE, 'rt').read())
       
   # SECRET_KEY 값 직접 입력된 부분을 아래와 같이 수정합니다.
   SECRET_KEY = secrets['SECRET_KEY']
   

4. git 버전관리 시작

$ rm -Rf front_react/.git
$ curl https://www.gitignore.io/api/linux,macos,python,django,intellij+all > .gitignore
$ echo ".secrets" | cat - .gitignore > temp && mv temp .gitignore
$ git init
$ git add .
$ git commit -m "Init."
$ git remote add origin git@github.com:litlhope/django-react.git
$ git push origin master

1. React App 생성시 자동으로 생성된 .git 디렉토리 삭제

   $ rm -Rf front_react/.git
   

2. .gitignore 파일 구성

   $ curl https://www.gitignore.io/api/linux,macos,python,django,intellij+all > .gitignore
   $ echo ".secrets" | cat - .gitignore > temp && mv temp .gitignore
   

   https://www.gitignore.io 사이트를 이용하여 .gitignore 기본 파일을 생성합니다. 필요한 경우 사이트에 직접 방문하여, 각 프로젝트에 맞는 구성으로 새로 생성해 주세요. .gitignore 파일 생성 후 위에서 별도로 생성했던 .secrets 디렉토리를 무시목록에 추가해 줍니다. .secrets의 SECRET_KEY 정보는 버전관리 하지 않고, 별도로 공유합니다.

3. git 버전관리 시작

   $ git init
   $ git add .
   $ git commit -m "Init."
   

4. git 저장소 공유

   $ git remote add origin git@github.com:litlhope/django-react.git
   $ git push origin master
   

   remote 저장소 생성 후 공유 합니다.

전체 소스는 GitHub에서 다운로드 하실 수 있습니다.

참고1 - IntelliJ에서 Django 실행 구성이 되어 있지 않을 경우

1. 툴바의 Run/Debug 영역에서 Edit Configurations... 선택

   

2. + 버튼 선택 후 Django server선택

   

3. Name 입력 및 Python Interpreter 선택

   

   그 외 설정은 개인 개발환경에 맞게 조정해 줍니다.

4. 실행

   실행 버튼을 눌러 Django를 실행 합니다.

   

   아래와 같이 로그가 표시되면 정상 실행된 상태입니다. 링크를 눌러 브라우저에서 정상 작동 확인 합니다.