[FrontEnd] 백엔드 서버와 연결하기!

장고는 localhost:8000

리액트는 localhost:3000

둘을 연결 시키기 위한 방법이다.

아홉 까지 절차를 거치는데

1) Proxy the requests from :3000 to :8000

2) Install django-cors-headers

3) Add 'corsheaders' to INSTALLED_APPS

4) Add 'corsheaders.middleware.CorsMiddleware' before 'CommonMiddleware'

5)Add CORS_ORIGIN_ALLOW_ALL = True on base settings

6)Make Django load the bundles as static files with 'str(ROOT_DIR.path('frontend', 'build', 'static'))'

7) Create a views.py file on 'BackEnd' folder

8) Create ReactAppView that reads the file.

9)Add the ReactAppView as a URL

1.

패키지에 Proxy를 만든다.

Proxy는 만약 리액트에서 url요청값을 찾지 못하였을 경우에 8000으로 넘어가 찾아준다!

2.

pipenv install django-cors-headers

설치한다

3.,

앱에 추가한다

4.

미들웨어에 추가한다.

5.

추가한다.

6.

패스 추가한다

루트디렉토리(백엔드폴더) path(파일이 있는 디렉토리 순서대로 frontend/build/static)

7, 8 .

views.py 백엔드 폴더에 직접 생성하고

from django.views.generic import View

from django.http import HttpResponse

from django.conf import settings

import os

class ReactAppView(View):

def get(self, request):

try:

with open(os.path.join(str(settings.ROOT_DIR), 'frontend', 'build', 'index.html')) as file:

return HttpResponse(file.read())

except:

return HttpResponse(

"""

index.html not found ! build your React app !!

""",

status=501,

)

추가한다.

9.

from Moonstargram import views

    path("", views.ReactAppView.as_view()),

추가한다.

이렇게 되면

localhost:8000시

 ReactApp이 실행되게 되어진당!