[django] JWT를 이용한 회원관리(2)

React 프로젝트 생성

1. Node.js 설치
   • Node.js

2. yarn 설치

    npm install -g yarn
   

3. 리엑트 프로젝트를 생성하기 위해, create-react-app 도구 설치

    yarn global add create-react-app
   

    npm install -g create-react-app
   

    cd Desktop # 이미 바탕화면이면 안해도 됨. 
    create-react-app frontend
   

4. 편집기로 해당 폴더 열기

   

React와 Django 통신

• 서버가 구동되고 있는지 먼저 확인
  • 안되어있다면 runserver를 이용해 서버 열기
• 이 프로젝트에서 쓰지 않는 파일들 삭제
  • src 폴더의 App.css, App.js, index.js 를 제외한 5개의 파일 삭제
  • index.js 파일 수정

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import App from './App';
  
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
    );
  

  • App.css에 들어가 있는 코드들을 전부 지우기
  • App.js 코드 수정

    import './App.css';
  
    function App() {
    return (
        <div className="App">
        <p>Here is our react website</p>
        </div>
    );
    }
  
    export default App;
  

  • 터미널에 npm start 명령어로 서버 구동

  

  • src 폴더에 components 폴더와 pages 폴더, context 폴더, utils 폴더 만들기
  • 확장 프로그램에서 auto rename tag와 ES7 React/Redux/GraphQL/React-N 설치하기
  • pages 폴더에 Homepage.js를 만들고 rafce를 치면 자동으로 폼 완성됨.

    import React from 'react'
  
    const HomePage = () => {
    return (
        <div>
        <p>You are logged to the home page!</p>
        </div>
    )
    }
  
    export default HomePage
  

  • pages 폴더에 LoginPage.js 만들기
  • rafce로 폼 작성

    import React from 'react'
  
    function LoginPage() {
    return (
        <div>
        <form>
            <input type="text" name="username" placeholder='Enter Username'/>
            <input type="password" name="password" placeholder='Enter Password'/>
            <input type="submit"/>
        </form>
        </div>
    )
    }
  
    export default LoginPage
  
  

  • App.js 수정

    import './App.css';
    import { BrowserRouter as Router, Route } from 'react-router-dom'
    import HomePage from './pages/HomePage'
    import LoginPage from './pages/LoginPage'
  
    function App() {
    return (
        <div className="App">
        <Router>
            <Route component={HomePage} path="/" exact/>
            <Route component={LoginPage} path="/login"/>
        </Router>
        </div>
    );
    }
  
    export default App;
  

  • 터미널에 npm install react-router-dom 입력 후 설치