여러가지 귀찮기 때문에 Django REST API+React/TypeScript로 앱 만들어 보자 2

통합 개발 환경

VSC

VSC에 확장 기능을 추가합니다.

· Prettier - Code formatter
・ES7 React/Redux/GraphQL/React-Native snippets

React 프로젝트를 만들겠습니다.

터미널에 다음을 입력합니다.

npx create-react-app . --template redux-typescript --use-npm

다운로드가 완료되면 Happy hacking!으로 돌아옵니다.

Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd C:\Users\xxx\Desktop\xxx
  npm start

Happy hacking!

그런 다음 사용할 모듈을 다운로드합니다.

axios,

브라우저 또는 node.js에서 실행되는 Promise 기반 HTTP 클라이언트입니다. REST-API를 실행하려는 경우와 같이이를 사용하면 구현을 쉽게 할 수 있습니다.

npm i axios

결과.

 [email protected]
added 1 package from 1 contributor and audited 1993 packages in 12.982s

133 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

React의 라우터라고 하는 것으로 로그인용의 페이지와 태스크 관리의 페이지를 라우터로 선을 그리기 때문에

react-rotuer-dom을 설치합니다.

npm i react-rotuer-dom @types/react-rotuer-dom

결과.

found 0 vulnerabilities

마스터 설치

npm i @material-ui/icore @material-ui/lab

결과.

found 0 vulnerabilities

모듈이 설치되면 React 서버를 시작합니다.

npm start

시작이 완료되었습니다.

사내에서 React를 시작할 때 npx create-react-app에서 오류가 발생하거나 npm이 통과하지 않을 때

원인 = 프록시 서버

대책↓

npm -g config set proxy プロシキ:xxx
npm -g config set https-proxy プロシキ:xxx
npm -g config set registry http://registry.npmjs.org/
npm -g config set strict-ssl=false

이렇게 config를 바꾸면 create-react-app를 실행할 수 있게 됩니다.