django react 연동하기 - django

프로젝트를 하며 react와 연동해야할 일이 생겼다. 다만 나 혼자 개발하는 것이 아니라 친구와 함께 하는 것이어서 연동을 어떻게 해야하는지 고민이 있었다.

1. 다른 pc에서 개발
2. 다른 ip
3. django와 react

내가 찾은 해결책은 개인 핫스팟을 이용하는 것이다.

1. django-cors-headers

터미널에서 corsheaders를 설치한다.

pip install django-cors-headers

INSTALLED_APPS에 corsheaders를 추가해준다.

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

cors관련 MIDDLEWARE를 추가해준다.

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 추가
    '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',
]

ALLOWED_HOST를 추가해 허용할 호스트 주소를 입력한다.

ALLOWED_HOSTS = ['172.nn.nn.n']
# 개인 ip 주소이다. 입력할 때 nn이 아닌 자신의 ip 주소를 입력하자.

WHITELIST를 추가해준다.

CORS_ORIGIN_WHITELIST = [
       'http://127.0.0.1:8000',
       'http://127.0.0.1:3000',
]

2. 핫스팟에 연결한 후 ip주소를 확인한다.

- mac 기준 네트워크 - WIFI - TCP/IP에 들어가면 자신의 ip주소를 볼 수 있다.

확인한 자신의 주소를 위에 있는 nn에 넣는다.

3. runserver

python manage.py runserver 172.nn.nn.n:8000