2021.05.07 drf & react 연동하기

2021.05.07 drf & react 연동하기_정리노트

 

 

나름 빠른..시간안에 온게 맞겠지..? ㅎ.. 진짜 근데 핑계를 대자면..^^ 난리 부르스를 통해서... 해냈다.. 정말 ...ㅠ..

 

그 전에 PostMan 이라는 걸로 내 API 테스트 하기.

 

 

PostMan 이란 ?

개발한 API 를 테스트 하고, 테스트 결과를 공유하여 API 개발의 생산성을 높여주는 플랫폼!

 

쨋든 여기서 테스트 하는 과정에서 

 

 

어어..^^ 거부당했다...ㅎ 그래서 permission 이 거부 되어있는 부분이 어딨냐면,

 

 

views.py

 

 

 

역시 직관적이야.. 인증된 사용자만 보여줘라! 라고 되어 있기 때문인 것 같군

 

출처 - drf 공식 문서

 

 

음 여깄군..! 기본적으로 엄격하게 인증된 사용자만 허용되게 해놓았으니 postman 에서 거부가 뜬 것!! 

 

그러니 우리는 밑에 덜 엄격한 인증되지 않은 사용자에게는 읽기전용만 허용하는 IsAuthenticatedOrReadOnly 이걸 써주자!

 

 

 

 

이렇게 고쳐주고 다시 postman 돌려보면, 

 

 

잘받아와진다!!! 

 

굿굿 이제 우리가 해야할 것은, 8000번 포트 장고에서 3000번 리액트 화면을 띄워주는 것!

각자의 영역에서 백엔드, 프론트 의 개발은 각자의 서버에서 이뤄지겠지만, 우리는 리액트에서 rest api 를 받아올 수 있게 하고, 실제로 사용하는 서버인 8000번에서 리액트 화면이 나와야 한다.

 

오늘은 8000번에서 리액트 화면이 나오게 하는 거 까지 포스팅하고, 다음 포스팅은 또 api를 리액트에서 띄워보겠음 *^^*

 

 

 

자 !!!!!! 쨋든 이제 진짜 리액트 앱 만들어서 ㄱ ㄱ!!!!!!!

 

 

 

 

yarn global add create-react-app 

npm install -g create-react-app 

 

 

yarn,npm 둘 중에 하나를 써서 create-react-app global 로 설치

 

 

 

create-react-app 만들 앱 이름

 

 

 

cd 앱이름

yarn start

 

 

 

 

여기까지는 그냥 리액트이므로 다른 포스트 참고 !_!

korinkorin.tistory.com/44?category=974678

2021.01.23 React 설치 및 시작 흐름

 

 

그 전에 하나의 터미널로는 장고 서버와 리액트 서버 둘다 해줄 수 없으니

 

 

두 개 터미널을 켜서 하나는 python manage.py ruserver 로 하나는 yarn start 로 일단 두개 다 구동해주자.

 

 

이제 우리는 8000번에서 리액트의 index.html 을 띄워주면 되겠지?!?!

 

 

그 전에 우리는 알아둘 것이 하나 있다.

 

출처 - 생활코딩 유튜브

 

우리는 하나의 컴퓨터에 지금 총 django server, react server 두 가지를 가지고 있고, 그 서버들은 서로의 포트번호로 구분할 수 있다. 

 

그런데 보안상의 이슈로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다.

 

그 때 우리가 필요한 것은  CORS 체제.

 

CORS 

교차 출처 리소스 공유(Cross-Origin Resource Sharing,CORS) 는 여러 가지의 서버를 쓸 때 한 서버에서 다른 서버에 있는 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

 

 

 

이렇듯 우리가 리액트에서 장고의 API 를 가져오거나, 장고에서 리액트 화면을 띄울 때는 기본적으로 거부되기 때문에 리액트에서는 proxy 를 통해, 장고에서는 장고에서 제공하는 패키지인 django-cors-hearders 를 통해서 서로의 요청을 허용해준다.

 

 

오늘은 장고에서 리액트의 화면을 띄워줘야 하니, 장고에서 세팅만 해보자!

 

 

 

그래서 우리는 장고에서 pip install django-cors-headers 를 설치하고,

 

 

장고에서 하던 것처럼 installe_apps 에 적어줬음. 

 

 

 

그리고 또하나,

 

 

최상단에 corsheaders.middleware.CorsMiddleware 도 추가해준다. 

 

 

 

whitelist 에 내가 허용할 로컬서버 3000포트를 적어주었고, 모든 서버를 허용하려면 CORS_ORIGIN_ALLOW_ALL 옵션을 TRUE 로 설정해주면 된다.

 

 

그러면 우리는 이제 장고 서버에서 리액트를 허용했으니 리액트에 있는 index 를 장고의 경로에 추가만 해주면 끝!!

 

 

 

먼저 yarn build 라는 명령어를 실행해주자.

 

 

yarn build

build 를 수행하게 되면, html 도 공백 없이 한 줄로 나열하고, js 의 경우도 용량을 조금이라도 줄이기 위해서 최적화를 시킨다.

그래서 해당 리액트를 최적화 된 형태의 build 를 수행해서 웹 표준에 맞추어 만든다.

 

쨋든 실행하게 되면, 

 

 

 

리액트 앱/ build 라는 파일이 생성되면서 안에 index와 static 또한 생기게 된다.

 

 

 

 

우리가 띄워주어야 할 것들이 바로 이 둘이다!

 

template 에서 장고는 html 을 띄워주니까 우리는 템플릿의 경로를 여기로 바꿔주어야 겠지!! 

 

다시 

 

settings.py 

 

 

뜬금 없이 이게 어디서 나온거냐라고 물으신다면,

 

 

settings.py 최상단에 보면 기본적으로 경로가 설정이 되어 있다. 

 

해당 BASE_DIR 은 settings.py 파일이 위치한 폴더, 즉 프로젝트 폴더를 가리킨다. 그래서 장고는 해당 디렉토리를 기준으로 여러 경로를 찾아 다닐 수 있다. 

 

위에서 장고가 적어놓은 것을 보면 알 수 있듯이, 프로젝트 내에서 경로를 찾을 때는 BASE_DIR / 'subdir'  의 형식으로 적으라고 되어 있다. 

 

이를 통해, BASE_DIR은 settings.py 파일이 위치한 폴더가 위치한 폴더, 즉 프로젝트 폴더를 가리킨다는 것을 파악할 수 있다. 장고는 이 경로를 기준으로 프로젝트 내 필요한 파일들을 찾아다닐 것이다.

 

그래서 우리는 프로젝트 하위 경로를 나타낼 때

os 를 import 해와서

os.path.join(BASE_DIR,'subdir')

의 형식으로 써주면 된다. 

 

 

 

그래서 위로 다시 돌아가서 

 

 

여기에 우리가 띄워야할 index 가 있어요!!! 하면 되는 것이다 ㅎㅁㅎ !

 

 

마찬가지로 static 파일도 설정해줍씨다!!

 

korinkorin.tistory.com/9

2020.08.27 _Django_ Static , Media _정리

 

이 게시물에서도 말했지만, 외부에서 static 관련을 가져올 때는 이렇게 STATICFILES_DIRS 에 적어 주었다!

 

 

 

 

후..진짜 마지막으로 장고에서 첫화면 url 설정을 해줍씨다!!

 

 

 

 

 

출처 - 장고 공식문서

 

django 에서 가장 기본 형태인 templateview 를 가지고 와서 template_name 을 url 상에서 바로 적어주었다. 

 

그러면 장고는 index.html  template 을 찾는데, settings.py  에서 우리는 리액트 앱의 build 폴더로 템플릿의 경로를 변경해주었으니, 해당의 경로를 찾아서 frontend - build - index.html 이라는 파일을 찾는다. 

또한 static 또한 우리가 설정해준 frotend-build-static 으로 가서 찾게 된다.

 

 

자 그러면 runserver 를 돌려보게씀니다.

 

python manage.py runserver

 

 

8000번 포트에서,

 

 

리액트 화면이 뜬다!!!!!!!!!  static 까지 연결해주어야 로고가 잘 돌아감니다!!

 

---

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 진짜 여러 가지를 다 설정 해주었는데, 중간에 진짜 오만가지 다 구글링 하다가 다 섞여서 결국 다시 만들어서 처음부터 차근차근 했다... cors 는 장고에서 패키지를 지원하기 때문에 어렵지 않았지만, 해당 리액트의 index 를 장고의 8000번 포트의 서버에서 띄워준다는 개념을 잘 이해하고 ,경로를 설정해서 마지막으로 url 연결하는 게 정리가 오래걸렸다.. 

 

쨋든 다들 간단하다고 하는 것을 나는 전혀 간단하지 않았지만.. 쨋든 해결했으니 뿌듯하게 포스팅 마무리!!

 

다음 포스팅은 이제 리액트에서 api 요청을 보내서 띄우는 포스팅으로 돌아오겠음.. 난항 예상..ㅎㅁㅎ.. 쨋든 오늘의 포스팅 끝끝!