Flask 백엔드로 React 앱을 만드는 방법은 무엇입니까?

9569 단어 reactpythonwebdev
React 프로젝트의 백엔드로 Python을 사용하시겠습니까? Javascript로 프론트엔드 로직을 작성하고 백엔드에 Python을 사용할 수 있습니다. Flask는 이 통합을 하나의 단일 프로젝트로 정말 쉽게 만듭니다.

우리는 취재할 것입니다,
  • Flask API 생성
  • React 앱 만들기
  • 통합

  • 플라스크 API 생성



    먼저 Flask 프로젝트를 생성하여 시작합니다. 백엔드 서버 코드를 실행할 별도의 폴더를 만드는 것이 좋습니다.

    $ mkdir flask-api
    $ cd flask-api
    

    나는 항상 가상 환경을 설정합니다. 가상 환경은 프로젝트의 종속성을 관리하고 단일 프로젝트에 대해 특정하게 유지됩니다. 시스템 패키지에는 영향을 미치지 않습니다. 다음 명령은 Unix 기반 시스템용입니다. 가상 환경을 만들고 활성화합니다.

    $ python3 -m venv venv
    $ source venv/bin/activate
    (venv) $ 
    

    Python 버전<3.4에는 가상 환경이 내장되어 있지 않습니다. 타사 패키지virtualenv를 설치하고 실행해야 합니다virtualenv venv.

    이제 플라스크와 파이썬의 dotenv 패키지 설치를 시작합니다. 그리고 cross-origin http 호출을 만들기 위해 Cross Origin Resource Sharing을 처리하기 위한 flask-cors.

    (venv) $ pip install flask python-dotenv
    (venv) $ pip install -U flask-cors
    
    app.py 디렉토리에 파일flask-api을 생성하고 플라스크 환경을 초기화합니다.

    from flask import Flask
    from flask_cors import CORS
    
    app = Flask(__name__)
    CORS(app)
    

    다음 단계는 다음 데이터가 포함된 .env 파일을 만드는 것입니다.

    FLASK_APP=app.py
    FLASK_ENV=development
    

    Flask는 FLASK_APP 환경 변수에서 프로젝트를 자동으로 가져옵니다. 그리고 FLASK_ENV 변수에서 환경을 읽습니다.

    "Hello World"로 응답하는 간단한 API 작성부터 시작하겠습니다. 최신 버전에서 Flask는 암시적으로 사전을 JSON화하기 때문에 호출jsonify() 대신 사전 반환을 지원합니다.

    from flask import Flask
    from flask_cors import CORS
    
    app = Flask(__name__)
    CORS(app)
    
    @app.route('/hello')
    def say_hello_world():
        return {'result': "Hello World"}
    
    flask run 를 사용하여 Flask 서버를 시작합니다. 다음과 같은 내용이 표시되어야 합니다.

    * Serving Flask app "app.py" (lazy loading)
    * Environment: development
    * Debug mode: on
    * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
    * Restarting with fsevents reloader
    * Debugger is active!
    * Debugger PIN: 306-333-596
    

    반응 앱 만들기



    $ npx create-react-app react-flask-app
    $ cd react-flask-app
    
    package.json 에서 이 특정 줄을 추가합니다. API 서버에 대한 요청을 프록시하도록 개발 서버에 지시합니다.

    "proxy": "http://localhost:5000"
    

    완성



    React의 App.js 파일에서

    import React, { useState, useEffect } from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    function App() {
      const [placeholder, setPlaceholder] = useState('Hi');
    
      useEffect(() => {
        fetch('/hello').then(res => res.json()).then(data => {
          setPlaceholder(data.result);
        });
      }, []);
    
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
            <p>Flask says {placeholder}</p>
          </header>
        </div>
      );
    }
    
    export default App;
    



    만세! 우리는 해냈다! Flask 백엔드에 자동으로 요청하고 DOM을 업데이트합니다. 클라이언트 서버 통신에는 언어 장벽이 없습니다.

    좋은 웹페이지 즐겨찾기