Flask를 ReactJs에 연결하는 방법

Flask 프레임워크와 내장jinja 템플릿을 사용하여 웹 응용 프로그램을 구축하는 것은 멋있지만, 백엔드를react 전단에 연결합니다. (나는 우리가 모두 좋아한다고 믿습니다)😉) 더 재밌어.이 강좌에서는 Flask 백엔드를 React 전단에 연결하는 데 필요한 간단한 절차를 이해할 수 있습니다.

선결 조건

1)flask 프레임워크에 대한 초급 이해.만약 당신이 Flask 초보라면,flask 프로젝트를 어떻게 설정하고 jinja 템플릿 엔진과 함께 사용하는지에 대한 글을 볼 수 있습니다.
2) 숙지ReactJs의 기본지식.useState 갈고리를 사용하고 axios 를 사용하여 API에서 데이터를 가져옵니다.
자, 시작합시다.

프로젝트 디렉토리

응용 프로그램을 저장할 항목 디렉토리를 만들고 탐색합니다.

mkdir project

cd project

반응 프런트엔드 설정

다음 명령을 실행하여 프런트엔드 react 응용 프로그램을 만듭니다.

npx create-react-app flask_react

디렉토리에 들어가기flask_react

cd flask_react

그리고 실행을 통해

npm start

브라우저에서 기본react 프로그램 페이지가 팝업됩니다.없는 경우 아래 링크를 복사하여 브라우저에서 엽니다.

http://localhost:3000

플라스크 백엔드 설정

기본 디렉토리에 새 디렉토리 만들기

mkdir backend

그리고 내비게이션을 해요.

cd backend

만약 네가 줄곧 나의 Building a web application with Flask 시리즈를 주목하고 있다면, 너는 다음에 만들어야 할 것을 알아야 한다.예, 가상 환경입니다.네 말이 맞았니?😀

가상 환경

프로젝트를 시작하기 전에 항상 가상 환경을 만드는 것이 좋습니다.이것은 이 응용 프로그램에서 사용하는 패키지를 다른 응용 프로그램과 분리하는 데 도움이 된다.여기서 변경한 내용은 시스템의 다른 응용 프로그램에서 동일한 패키지에 영향을 주지 않습니다.시스템에 가상 환경 만들기;다음 명령을 실행합니다.

For mac/unix users: python3 -m venv env
For windows users: py -m venv env

환경을 만든 후 다음 명령을 실행하여 활성화합니다.

For mac/unix users: source env/bin/activate
For windows users: .\env\Scripts\activate

플라스크를 설치하다

이제 환경이 시작되고 실행되므로 Flask 설치를 계속할 수 있습니다.

pip install flask

다음 단계는 환경 파일에 스크립트를 등록하는 것입니다.

pip install python-dotenv

성공적으로 설치한 후 위에서 만든 .flaskenv 디렉터리에 backend 파일을 만듭니다.

touch .flaskenv

앞의 .가 매우 중요하다는 것을 주의하세요.파일 이름만 flaskenv인 경우 배치할 환경 변수를 읽지 않습니다.
이제 환경 변수를 .flaskenv 파일에 넣습니다.

FLASK_APP=base.py
FLASK_ENV=development

응용 프로그램 환경이 개발 모델로 설정되어 있기 때문에 응용 프로그램과 기초를 쉽게 디버깅할 수 있습니다.다음 섹션에서는 flask 응용 프로그램을 포함하는py 파일을 생성합니다.
이 방법을 사용하지 않으면 터미널 창을 다시 시작할 때 export FLASK_APP=base.py 와 export FLASK_ENV=development 환경 변수를 계속 사용해야 한다.
주의: 본고의 중점이 일치하지 않도록 flask 백엔드 구조를 간소화하겠습니다.더 큰 프로젝트를 만들려면 프로그램에 더 좋은 폴더 구조를 만들어야 합니다.더 큰 프로젝트를 위한 폴더 구조를 만드는 법을 배울 필요가 있다면, 와 관련된 글을 볼 수 있습니다.

기지.py

base.py 디렉터리가 있는 backend 디렉터리에 새 파일을 만듭니다.flaskenv.

touch base.py

현재 폴더 구조는 다음과 같습니다👇
base.py 스크립트에서 이름과 정보를 반환하는 간단한 API를 만듭니다.

from flask import Flask

api = Flask(__name__)

@api.route('/profile')
def my_profile():
    response_body = {
        "name": "Nagato",
        "about" :"Hello! I'm a full stack developer that loves python and javascript"
    }

    return response_body

위의 코드에는 간단한 API가 포함되어 있으며, react 전단에서 이 API를 호출해서 response_body 사전을 가져옵니다.
너는 두 가지를 알아차릴 수 있다.
i) http 메서드는 여기에 지정되지 않았습니다GET.기본적으로 flask의 view 함수는 GET 요청만 수락합니다.
ii) 함수 끝에 되돌아오는 response_body 사전은 유행하는 jsonify 함수에 매개 변수로 전달되지 않았습니다. 예를 들어 jsonify(response_body).Flask의 보기 함수가 사전을 되돌려주고 Flask가 JSON 형식으로 변환하기 때문이다.
백엔드가 성공적으로 설정되었습니다. 프로그램을 실행해서 테스트할 수 있습니다.

flask run

그리고 URLhttp://127.0.0.1:5000/profile으로 가세요.JSON 형식으로 표시된 사전 response_body 을 보실 수 있습니다.

너도 postman를 사용하여 이 점을 확인할 수 있다. 너는 여전히 같은 결과를 얻을 것이다.

당신의 코드를 원본 코드 관리로 미루고 싶다면env 및 __pycache__ 폴더를 기본 디렉토리의 gitignore 파일에 추가하는 것을 잊지 마십시오.

backend/env
backend/__pycache__

API 끝점(/profile)을 react 프런트엔드에 연결

현재,react 전단에 있는 기본 디렉터리를 되돌릴 수 있습니다.

cd ..

axios 라이브러리를 설치하려면:

참고: HTTP 요청에는 axios 또는 fetch를 사용할 수 있습니다.그러나 본 논문에서 axios 라이브러리는 이전에 구축한 API 노드에 요청을 보내는 데 사용됩니다.

npm install axios

소포.json

소포를 열다.json 파일을 "private":true 줄 아래에 에이전트를 추가하면 됩니다.👇.

  "name": "flask_react",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000", //newline

이렇게 하면 API 요청을 보낼 때 상대 경로를 사용할 수 있습니다.너는 사용http://localhost:5000/profile이 아니라 간단하게 사용할 수 있다/profile.
주의: 보통 브라우저에서flask 프로그램에 접근하는 데 사용되는 기본 URL은 http://127.0.0.1:5000 이지만, 프록시 키의 값으로 http://localhost:5000 을 사용합니다.헷갈리지 마라, 그것들은 모두 같다.더 많은 정보를 읽을 수 있습니다here
당분간 package.json 파일을 닫지 마세요.너도 멋있는 걸 추가할 수 있어.react 서버를 언제 시작하든지, 파일을 변경하고 저장하든지, 새로운 변경 사항이 정확하게 반영될 수 있도록 서버가 다시 시작됩니다.flask 백엔드 응용 프로그램에 이 기능을 추가할 수도 있습니다.이것은 react를 플라스크에 연결하는 또 다른 장점이다😎.scripts 부분에 다른 키와 값을 추가합니다."start-backend": "cd backend && env/bin/flask run --no-debugger",그래서 얘가 닮았어요.👇

  "scripts": {
    "start": "react-scripts start",
    "start-backend": "cd backend && env/bin/flask run --no-debugger", //new line
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

이제 npm run start-backend를 사용하여 백엔드 서버를 시작할 수 있습니다.이것은 가방에서 그 값으로 전달되는 명령을 실행할 것이다.json 파일.이것은 env 디렉터리에 있는 backend 디렉터리로 이동하여 flask run 명령을 실행합니다.
Flask 백엔드는 API 엔드포인트를 저장하는 서버로만 사용되기 때문에 브라우저 기반 디버거를 사용하지 않도록 --no-debugger 옵션도 전달되었습니다.

응용 프로그램.js

여기서 flask 백엔드 서버에서 API 엔드포인트를 호출합니다.변경 후 프로그램이 자동으로 시작됩니다.js 파일은 보기에👇

import { useState } from 'react'
import axios from "axios";
import logo from './logo.svg';
import './App.css';

function App() {

   // new line start
  const [profileData, setProfileData] = useState(null)

  function getData() {
    axios({
      method: "GET",
      url:"/profile",
    })
    .then((response) => {
      const res =response.data
      setProfileData(({
        profile_name: res.name,
        about_me: res.about}))
    }).catch((error) => {
      if (error.response) {
        console.log(error.response)
        console.log(error.response.status)
        console.log(error.response.headers)
        }
    })}
    //end of new line 

  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>

        {/* new line start*/}
        <p>To get your profile details: </p><button onClick={getData}>Click me</button>
        {profileData && <div>
              <p>Profile name: {profileData.profile_name}</p>
              <p>About me: {profileData.about_me}</p>
            </div>
        }
         {/* end of new line */}
      </header>
    </div>
  );
}

export default App;

이제 프로그램에 추가된 새 코드 줄을 살펴봅시다.js 파일.
파일의 맨 위에 useState 갈고리와 axios 모듈을 가져옵니다.
그리고 App라는 함수에서useState 갈고리는 profileData 변수의 상태를 제어하는 데 사용된다.
함수getData가 API 호출을 처리합니다.이것은 axios 모듈을 포함하고, 이 모듈은 백엔드의 API 포트 (\profile) 에 요청 GET 을 보내고, 후자는view 함수에 표시된 사전 jsonified 형식으로 응답합니다.
다음에 setProfileData 함수는 json 응답의 데이터를 profileData와 profile_name에 분배하여 about_me의 상태를 업데이트합니다.getData 기능은 click me 단추를 눌렀을 때만 호출됩니다.
마지막&&은 오류를 피하기 위해 조건 연산자로 사용됩니다.profileData는 어플리케이션을 처음 로드할 때 초기null 상태가 할당되므로 액세스를 시도할 경우profileData.profile_name 또는 profileData.about_me 오류 메시지가 표시됩니다.

TypeError: Cannot read properties of null (reading 'profile_name')

따라서 && 조건 연산자가 필요합니다. profileData.profile_name의 값이 profileData.about_me에서 API 호출을 포함하는 profileData로 바뀌었을 때 응용 프로그램은 null와 response data 코드의 존재를 알 수 있습니다.
기본 디렉터리에 있는 다른 파일을 변경할 필요가 없습니다.응용 프로그램의 앞부분 작업이 이미 끝났다.이제 테스트를 계속할 수 있습니다.
1단계: npm run start-backend로 백엔드 서버 시작
주의: 이 명령은 모든 디렉터리에서 실행할 수 있습니다.기본 디렉토리(flask react) 또는 flask 디렉토리(백엔드)
2단계: npm start로 react 서버 시작

API 호출을 위해 click me 버튼을 클릭하고 백엔드에서 name 및 about_me 데이터를 가져옵니다.

봐라!!flask 백엔드를 react 전단에 연결했습니다.현재,flask 백엔드에서 소형 API 포트를 구축하고,react 전단에서 포트를 호출할 수 있다고 확신합니다.
만약 문제가 있으면 언제든지 평론을 발표하거나 저에게 메시지를 보내주십시오. 저는 가능한 한 빨리 회답할 것을 보장합니다.
만약 네가 Django의 연인이라면, 너도 틀림없이 그것을 React에 연결하는 것을 좋아할 것이다.너는 나의 문장을 보고 어떻게 이 점을 해내는지 이해할 수 있다.안녕히 계십시오.👋