Django 파이썬 웹 프로그래밍(8) React 설치

React를 설치하기 위해 node.js를 먼저 설치해야 한다.

https://nodejs.org/en/download/

Download | Node.js

node.js 쉬운 설치를 위해 .msi 파일로 자신의 운영체제에 맞는 버전을 선택한다.

설치를 완료하면 다음과 같이 뜬다. 

node가 잘 설치되었는지 확인하는 방법은 cmd 창에 npm -v를 입력하면 된다.

(django_project) C:\Users\devgu\community>npm -v
6.14.6

그 다음 create react app을 설치한다. create react app은 react app을 세팅할 수 있는 facebook 공식 프로젝트다.

npm install -g create-react-app

(django_project) C:\Users\devgu\community>npm install -g create-react-app
C:\Users\devgu\AppData\Roaming\npm\create-react-app -> C:\Users\devgu\AppData\Roaming\npm\node_modules\create-react-app\index.js
+ create-react-app@3.4.1
added 98 packages from 46 contributors in 4.759s

그 다음 frontend 이름의 app을 설치한다.

create-react-app frontend

frontend를 들어가서 react project를 시작한다.

cd frontend
npm start

http://localhost:3000/에 들어가면 react 앱을 볼 수 있다.

8000번 포트의 django rest api 3000번 포트의 리액트에서 접근하는 방법

proxy를 사용하면 localhost:8000의 /api에 접속할 수 있다.

{app_이름}/package.json에 다음을 입력한다.

"proxy": "http://localhost:8000"

다음 글에서는 react store history 등 설정을 하도록 하겠다.