[Django] 초급 React + Django 간단한 익명 블로그 만들기 5

 

 

 

 

djangorestframework 설치, REST API 호출, useState와 uesEffect 사용, CORS 이해, django-cors-headers 설치, 양단간의 통신

 

 

 

DjangoRestFramework

• 웹 API를 구중하기 위한 강력하고 유연한 툴킷
• OAuth1a 및 OAuth2용 패키지를 포함한 인증 정책
• ORM 및 비ORM 데이터소스를 모두 지원하는 직렬화

 

 

 

우선 pip install djangorestframework 명령어를 실행하여 패키지를 받아줍니다.

 

 

pip freeze 명령어를 실행하여 패키지의 버전을 확인할 수 있습니다.

 

 

 

python3 manage.py runserver 명령어 실행시 python manage.py migrate 명령어를 사용하여 적용이 안된 마이그레이션 항목을 적용하라고 출력됩니다.

ctrl + c 로 서버를 꺼준후 python3 manage.py migrate 명령어를 사용하여 마이그레이션을 적용합니다.

 

다시 실행시키면 빨간 출력 없이 잘 실행됩니다.

 

 

 

rest 요청에 따른 views와 utils처리를 하도록 디렉터리를 생성합니다.

디렉터리 각각에 about.py를 만들어 줍니다.

 

 

 

 

django rest framework 패키지를 설치하였으니 settings의 INSTALLED_APPS에 추가해줍니다.

 

 

 

urls.py

from django.contrib import admin
from django.urls import path
from anonymous_blog_server.views.about import get_views_about

urlpatterns = [
    path('about/', get_views_about),
]

 

 

 

views.py

# rest
from django.http import HttpResponse, JsonResponse
from django.views.decorators.csrf import csrf_exempt
from rest_framework.parsers import JSONParser

from anonymous_blog_server.utils.about import get_utils_about

def get_views_about(request):
    return JsonResponse(data=get_utils_about())

 

 

 

utils.py

def get_utils_about():
    return {'test' : 'test'}

 

 

 

브라우저에서 127.0.0.1:8000/about/ 요청시에 응답으로 json형식의 데이터를 받을 수 있습니다.

 

 

 

이제 화면에서 응답을 받아 보여줘보도록 하겠습니다.

React 프로젝트 디렉터리로 이동하여 npm install axios 명령어를 입력합니다.

 

 

npm add axios를 입력하여도 됩니다. add는 install의 별칭입니다.

 

 

react에서 useState, useEffect를 임포트하여 사용하기 위하여 function으로 변경합니다.

 

About.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const About = () => {
  const [data, setData] = useState('');

  const fetchData = async () => {
    const headers = {
      'Content-type': 'application/json; charset=utf-8;',
      Accept: 'application/json',
    };
    axios
      .get('http://127.0.0.1:8000/about/', { headers })
      .then((response) => {
        setData(response.data.about);
      })
      .catch((response) => {
        alert(response.data.messege);
      });
  };

  useEffect(() => {
    fetchData();
  }, [setData]);

  return (
    <div style={{ padding: 60 }}>
      <h1 style={{ fontSize: 62, fontWeight: 'bold', padding: 30 }}>About</h1>
      <div>{data}</div>
    </div>
  );
};
export default About;

 

useEffect

• 컴포넌트가 렌더링 된 후 수행해야하는 일을 지정합니다.
• useEffect를 function에 지정하면 function을 가지고 있다가 DOM 업데이트가 완료된 후에 호출되게 합니다.
• 변형, 구독, 타이머, 로깅 또는 다른 부작용(side effects)은 (React의 렌더링 단계에 따르면) 함수 컴포넌트의 본문 안에서는 허용되지 않습니다. 그렇기 때문에 useEffect를 사용한다면 렌더링 완료 이후에 호출되기 때문에 부작용에서 벗어날 수 있습니다.

 

useState

• 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다.
• 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다.
• setState 함수는 state를 갱신할 때 사용합니다. 새 state값을 받아 컴포넌트 리렌더링을 큐에 등록합니다.

 

실행시에 에러를 확인할 수 있습니다.

 

origin 'http://localhost:8000/about/'의 XMLHttpRequest 액세스가 CORS 정책에 의해 차단되었습니다. 요청한 리소스에 '액세스-제어-허용-오리진' 헤더가 없습니다.

 

 

 

이는 포트번호를 제외한 서로 같은 호스트의 주소를 참조하는것을 허용하지 않기 때문이라고 합니다.

 

cors(Cross-origin resource sharing)

• cors(교차 출처 리소스 공유)는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조
• 다양한 옵션으로 CORS를 활성화하는데 사용할 수 있는 Connect / Express 미들웨어를 제겅하기 위한 node.js 패키지

 

 

pip django-cors-headers를 내려받아줍니다.

pip install django-cors-headers 명령어를 실행하니 다운은 됬는데 pip upgrade 하라고 하여

pip install --upgrade pip 명렁어를 사용하여 업그레이드 하였습니다.

이후에 pip install django-cors-headers 명령어를 다시 쳐봅니다.

프로그레스바가 없는걸보니 위쪽에서 12KB밖에 안되서 프로그레스바가 안나온것같습니다.

 

 

django-cors-headers

• CORS 헤더를 추가하면 다른 도메인에서 리소스에 액세스할 수 있습니다.
• 의도치 않게 사이트의 개인 데이터를 다른 사람에게 공개할 수 있으므로 헤더를 추가하기 전에 해당 패키지가 어떤 역할을 하는지 이해하는 것이 중요합니다.

 

 

 

settings.py 수정

 

 

 

다시 요청을 보내보면 응답으로 콘솔에 이상없고 key가 test인것을 맵핑해서 setState로 상태가 바뀌었습니다.

 

 

 

긴 문장을 랜덤하게 생성해주는 입숨입니다, 영문버전도 있긴합니다

http://hangul.thefron.me/

 

 

10문단으로 생성하였습니다.

 

 

 

utils 의 about.py에 붙여넣기 해줍니다. key는 about로 바꾸었습니다.

def get_utils_about():
    return {
        'about' : '''
        가진 피고 품으며, 이상은 끓는 착목한는 풀밭에 생의 봄바람이다. 같지 생생하며, 밝은 영락과 피어나는 피다. 인도하겠다는 황금시대의 소담스러운 밥을 꽃이 오아이스도 무엇을 얼음과 힘있다. 동산에는 가진 실현에 청춘은 것이다. 능히 남는 긴지라 사랑의 밥을 품으며, 동산에는 풀이 아름다우냐? 우리의 피가 피부가 이것이다. 열매를 쓸쓸한 피는 없으면 충분히 행복스럽고 그러므로 풀이 인생의 것이다. 시들어 가지에 구할 만물은 위하여서. 그들은 긴지라 하였으며, 넣는 웅대한 내는 물방아 사막이다.\n\
        아름답고 사라지지 인생의 사막이다. 되는 속잎나고, 타오르고 따뜻한 청춘의 그것은 투명하되 그들에게 보라. 실현에 튼튼하며, 품었기 넣는 동산에는 이것을 눈에 뛰노는 뿐이다. 것이 보는 봄바람을 우는 뜨고, 칼이다. 원질이 힘차게 얼음과 그들을 든 가슴에 있다. 꽃이 주며, 설레는 바로 약동하다. 동력은 소금이라 남는 눈에 것이다. 바이며, 불러 이 구할 소담스러운 뼈 크고 이것을 모래뿐일 그리하였는가? 가슴에 피가 우리의 부패뿐이다.\n
        온갖 그들의 뼈 천자만홍이 천고에 것이다. 굳세게 것은 불어 끓는 힘차게 들어 아니한 쓸쓸한 있음으로써 끓는다. 풀이 미묘한 소담스러운 천자만홍이 청춘의 것이다. 투명하되 얼마나 있는 가슴이 구하기 놀이 듣는다. 하는 곧 가는 수 두손을 미묘한 곳으로 뿐이다. 돋고, 피가 듣기만 사라지지 미인을 보라. 힘차게 같이 그들에게 것은 사람은 반짝이는 듣는다. 그들은 불어 뭇 위하여 웅대한 싸인 사막이다. 같은 보는 영락과 주며, 이 봄바람을 품었기 것이다. 긴지라 거선의 가는 인생을 봄바람이다.\n
        가진 할지라도 열락의 얼마나 그들은 피에 얼음과 속잎나고, 고행을 것이다. 들어 공자는 청춘 열매를 원대하고, 봄바람이다. 같이, 그들을 것은 것이다. 많이 할지니, 무엇이 피가 용기가 만물은 없으면 때문이다. 따뜻한 자신과 끝에 가치를 어디 방황하여도, 피다. 같이, 구하지 가장 예가 청춘 공자는 이상의 이상 힘있다. 그들은 굳세게 자신과 피부가 돋고, 속에서 불어 것이다. 영원히 내는 싸인 부패뿐이다. 것이다.보라, 예가 천지는 품었기 봄바람이다. 보내는 우리의 공자는 예가 타오르고 풀밭에 것이다.\n
        품에 이상, 커다란 청춘의 있으며, 같이 사막이다. 기쁘며, 청춘을 천지는 타오르고 있는 석가는 것이다. 안고, 주며, 인간의 철환하였는가? 피어나기 무엇을 가진 아니다. 얼마나 밥을 것은 오아이스도 방황하였으며, 그들의 아니한 심장의 보라. 바이며, 평화스러운 같은 것은 인생을 뼈 쓸쓸하랴? 청춘의 무엇을 살았으며, 보라. 할지니, 긴지라 그들은 용감하고 작고 소담스러운 위하여 평화스러운 이것이다. 그들의 물방아 뜨거운지라, 있음으로써 오직 낙원을 그들은 가진 약동하다. 속잎나고, 피는 맺어, 얼마나 실현에 살았으며, 것이다. 실현에 커다란 피가 위하여서 가슴이 인간의 눈에 운다.\n
        위하여서, 살 않는 원대하고, 것은 보는 그리하였는가? 끓는 있는 꾸며 많이 유소년에게서 약동하다. 더운지라 현저하게 따뜻한 심장의 사막이다. 같이 곳이 열매를 속에 보라. 생의 이상의 위하여 보내는 것이다. 청춘을 천고에 없으면 가치를 인생을 유소년에게서 끝까지 봄바람이다. 얼음 하는 얼마나 이상 설레는 산야에 반짝이는 속에 작고 아니다. 끓는 거선의 청춘을 물방아 낙원을 속잎나고, 돋고, 목숨을 우는 운다. 창공에 살 투명하되 품으며, 아름답고 것이다.\n
        가지에 착목한는 구하기 칼이다. 이상은 것이 평화스러운 있으랴? 뼈 아니더면, 불어 수 그들에게 생의 대한 뿐이다. 기관과 가슴이 것은 무한한 그것을 인생에 노년에게서 착목한는 것이다. 생명을 물방아 것은 찾아다녀도, 남는 대고, 영원히 위하여서. 불어 날카로우나 것은 있는가? 이것이야말로 인간의 우리는 위하여 안고, 이것이다. 얼마나 것이다.보라, 천고에 소담스러운 바로 고행을 품에 것이다. 그림자는 거선의 피부가 그들을 없는 이것이다. 발휘하기 주며, 작고 어디 얼음 이것을 물방아 그것을 것이다. 싸인 되려니와, 만물은 노래하며 가장 쓸쓸하랴?\n
        되려니와, 두손을 품에 청춘 희망의 자신과 이상은 거선의 듣는다. 뜨거운지라, 위하여, 하는 내는 기관과 무한한 하는 가치를 그들은 봄바람이다. 가치를 이상은 같지 피가 그것은 작고 것이다. 그들에게 그들은 주는 것이다. 이상의 새 그들은 그들은 거친 같이, 있는 일월과 돋고, 것이다. 이상을 인류의 시들어 두손을 품에 무엇이 것이다. 따뜻한 곳으로 인도하겠다는 물방아 있는 아니다. 그들에게 가치를 있는 위하여서, 부패뿐이다. 원대하고, 이상, 피는 싹이 인생을 열매를 교향악이다.\n
        가는 동력은 방황하였으며, 듣는다. 능히 긴지라 그들은 이상은 인간의 품었기 사막이다. 우리 밝은 바로 사막이다. 보배를 모래뿐일 원질이 따뜻한 보라. 것은 몸이 싶이 때에, 못하다 주며, 그들은 어디 시들어 뿐이다. 이상은 방황하여도, 부패를 맺어, 있는 위하여서. 남는 구하지 황금시대를 끓는다. 인도하겠다는 같은 광야에서 피다. 꽃이 간에 그러므로 현저하게 거선의 이것을 별과 그들을 힘있다.\n
        그들의 청춘을 그들은 이는 살 얼음이 모래뿐일 황금시대다. 장식하는 황금시대를 피가 실로 것이다.보라, 부패뿐이다. 피가 있는 청춘이 것이다. 가치를 주며, 풍부하게 칼이다. 길지 웅대한 인간에 대고, 철환하였는가? 뛰노는 안고, 그것은 그러므로 사막이다. 우는 창공에 끓는 놀이 희망의 듣기만 사랑의 이상을 있으랴? 곳으로 그들에게 때까지 그들은 주며, 현저하게 뛰노는 있음으로써 꾸며 말이다. 만물은 군영과 관현악이며, 아니다. 온갖 쓸쓸한 얼음 위하여 것은 찾아 것이다.\n
        '''
    }

 

 

보여주기만 할 것이여서 이쁘게 꾸미지는 않겠습니다

About.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const About = () => {
  const [data, setData] = useState('');

  const fetchData = async () => {
    console.log('fetcda');
    const header = {
      'Content-type': 'application/json; charset=utf-8;',
      Accept: 'application/json',
    };
    axios
      .get('http://127.0.0.1:8000/about/', { header })
      .then((response) => {
        setData(response.data.about);
      })
      .catch((response) => {
        alert(response.data.message);
      });
  };

  useEffect(() => {
    fetchData();
  }, [setData]);

  return (
    <div style={{ padding: 60 }}>
      <h1 style={{ fontSize: 62, fontWeight: 'bold', padding: 30 }}>About</h1>
      <div>{data}</div>
    </div>
  );
};
export default About;

 

 

 

다시 요청시 볼 수 있는 화면입니다.

 

 

 

 

이렇게까지 djangorestframework 설치, REST API 호출, useState와 uesEffect 사용, CORS 이해, django-cors-headers 설치, 양단간의 통신를 해봤습니다.