django rest-framework & React - 4 > 장고 DJango

장고 DJango

REST django rest-framework & React - 4

페이지 정보

본문

django rest-framework & React - 4


- django-rest-framework 설치 및 구성 

- serializers.py 생성 및 작성 

- corsheaders 설치 및 설정  



  1. django-rest-framework 구성 
  2. djangorestframework 설치
    $ pip install djangorestframework 
    63acdf2ca5c4d0eb0d0ce25136888c87_1681029480_5701.png

  3. settings.py 설정 
    rest_framework 앱추가 및 설정 추가 
    63acdf2ca5c4d0eb0d0ce25136888c87_1681029623_0839.png

     
  4. 시리얼라이징 serializing : 서버 엔드 즉 장고 프로그래밍의 결과 데이터를 프론트 엔드(예: 리액트 앱)에서 쉽게 활용가능한 json 데이터로 변환해서 보내주는 것. 시리얼라이즈 파일 serializers.py 파일은 자동 생성되지 않으므로 생성해야 한다. 데이터베이스 즉 models.py의 내용 중에서 시리얼라이징할 내용만 작성한다. 
  5. girlgroup/serializers.py >> serializers.py 파일 생성 후 내용 작성 
    63acdf2ca5c4d0eb0d0ce25136888c87_1681029846_5541.png

     
  6. girlgroup/view.py 
    63acdf2ca5c4d0eb0d0ce25136888c87_1681029921_9177.png

  7. girlgroup/urls.py 파일 생성후 내용 작성 
    63acdf2ca5c4d0eb0d0ce25136888c87_1681030348_5755.png

     
  8. djangoreactapi/urls.py 내용 수정 
    63acdf2ca5c4d0eb0d0ce25136888c87_1681030339_3276.png

     
  9. django rest framework 실행 결과 json 데이터 생성확인 테스트 
    http://localhost:8000/api/  # 걸그룹 데이터 목록 
    63acdf2ca5c4d0eb0d0ce25136888c87_1681030312_2668.png

    http://localhost:8000/api/1/  # 걸그룹 데이터 목록 중 id가 1인 데이터 상세 
    63acdf2ca5c4d0eb0d0ce25136888c87_1681030292_8505.png

     
  10. corsheaders - 서로 다른 포트를 사용하는 django와 react를 서로 연동할 수 있도록 해준다.  
  11. 서로 다른 포트를 사용하는 react와 django의 연동을 위한 django-cors-headers 설치 
    $ pip install django-cors-headers   
  12.  settings.py 파일 설정
    INSTALLED_APPS에 corsheaders 앱 등록 
    미들웨어 MIDDLEWARE에 
         'corsheaders.middleware.CorsMiddleware', # 맨위에 추가 
         'django.middleware.common.CommonMiddleware', # 추가
    화이트리스트 
        # 리소스 요청을 허가할 도메인 추가 
         CORS_ORIGIN_WHITELIST = [
           'http://localhost:3000',
         ]

    63acdf2ca5c4d0eb0d0ce25136888c87_1681031126_839.png



     
장고는? 장고(DJango)는 파이썬언어로 제작된 서버 엔드 위주의 웹프레임워크입니다.