프로젝트 지식(1) - Django React 연동

Django & React 연동과정

개발 셋업

1. cors 문제를 해결하기 위해 django-cors-header 설치

2. settings.py에서

   • INSTALLED_APPS에 ‘corsheaders’ 추가
   • MIDDLEWARE에 ‘corsheaders.middleware.CorsMiddleware’ 추가(가장 위에 놓으라는 말도 있고 CommonMiddleware 위나 밑에 놓으라는 말도 있다.)
   • CORS_ORIGIN_WHITELIST = [‘http://127.0.0.1:3000’ ,’http://localhost:3000’] 추가

배포 셋업

1. react npm run buid를 통해 배포폴더 생성

2. TEMPLATES 경로에 build 폴더를 연결한다.

3. STATICFILES_DIRS 경로에 build/static을 연결한다.

4. views.py에 index.html 렌더링

5. urls.py에 index 뷰 연결

이러한 작업을 다 셋팅하면 git의 pull push 이용해서 로컬에서 테스트하면서 백엔드와 프론트엔드가 서로 협업할 수 있다.