REACT x FLASK 설정

FLASK란 무엇인가요?
FLASK는 최소한의 상용구 코드로 신속하게 웹 앱을 구축할 수 있게 해주는 Python용 경량 웹 프레임워크입니다. 가자 스텝-.

단계별 시작
필요한 설정을 만드는 것부터 시작해 보겠습니다. Vite로 이동하여 다음 명령을 복사하세요:

npm create vite@latest

저는 MAC만 사용하기 때문에 WINDOWS에서는 설정이 조금 다를 수 있습니다. 다음으로 터미널을 열고 Vite 웹사이트에서 복사한 코드를 붙여넣으세요. 코드를 실행하면 다음 메시지가 표시됩니다.

? Project name: › vite-project

vite-project를 자신의 프로젝트 이름으로 바꾸세요. 이름을 지정한 후 프레임워크를 선택하라는 메시지가 표시됩니다. 제 경우에는 REACT를 프레임워크로 선택하겠습니다. 하지만 익숙한 프레임워크를 선택하고 Enter 키를 누를 수 있습니다.

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

프레임워크를 선택했으면 이제 원하는 변형(언어)을 선택할 수 있습니다. 저는 JavaScript에 익숙하므로 그것을 선택하겠습니다. 기억하세요: 더 많이 지배하는 변형을 선택하고 Enter 탭을 눌러야 합니다.

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC
    Remix ↗

이러한 프롬프트를 선택한 후에는 이를 실행하기 위해 다음 명령이 제공됩니다.

Scaffolding project in /Users/Marlon/Development/code/practice-phase-4/flask_app_dev/my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

위 코드를 성공적으로 실행했다면 로컬 호스트에 도착하게 됩니다:

  VITE v5.4.8  ready in 1455 ms

  ➜  Local:   http://127.0.0.1:5555/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

http 주소를 복사하여 브라우저에 붙여 넣으면 이제 프로젝트에 사용할 수 있는 Vite React 페이지가 표시됩니다.

이제 코드 편집기를 엽니다. 저는 Visual Studio Code를 코드 편집기로 사용하고 있습니다. 다시 한 번, 선호하는 편집기를 사용할 수 있습니다. 다음으로, VSCode의 통합 터미널 내에서 이러한 명령을 별도로 실행하여 로컬 호스트 주소를 얻고, 앱을 편집하고 빌드를 시작해야 합니다.

npm install
npm run dev

src 안에 CD를 넣으면 다음 파일을 볼 수 있습니다

src % tree
.
├── App.css
├── App.jsx
├── assets
│   └── react.svg
├── index.css
└── main.jsx

'App.jsx' 내에서 해당 파일 내의 코드를 편집 및/또는 삭제하고 이에 따라 자신만의 코드를 추가할 수 있습니다. 이 파일에는 Vite 및 React 로고가 포함되어 있습니다.

생성한 파일에 익숙해지면 이제 프런트엔드 및 백엔드 디렉터리를 설정할 수 있습니다. 다음 코드를 실행하여 만들어 보겠습니다.

mkdir backend; mkdir server; mkdir frontend

다음과 같이 프로젝트 설정을 만들어 보겠습니다.

my-app/
├── backend/
|       server/
│       ├── app.py
│       ├── models.py
│       ├── requirements.txt
├── frontend/
│   ├── src/
│   ├── public/
│   ├── package.json

두 개의 터미널 열기:
한 터미널은 백엔드/서버용이고 다른 터미널은 프런트엔드/src용입니다.
백엔드/서버 내부에서 다음 명령을 실행하세요.

pipenv install && pipenv shell

모든 종속성이 설치되었는지 확인하고 Pipfile을 생성합니다.

frontend/src 내부에서 다음 명령을 실행하세요.

npm install
npm run dev

package.json 파일과 같은 필요한 모든 파일이 생성되었는지 확인합니다.

2부가 나옵니다....

위 내용은 REACT x FLASK 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!