---

📌 FastAPI + React로 파이보 서비스 개발하기

---

박응용님의 점프 투 FastAPI 내 파이보서비스 따라 개발하기

---

✅ python 설치

• python이 설치되어 있지 않다면 python을 설치한다.(3.8 이상) https://www.python.org/

• 터미널에서 python 버전을 확인한다.

  
  1. python 버전 확인
  baebae@baebaeui-MacBookPro ~ % python -V
  
  
  2. mac의 경우 기본 python이 2.x 버전으로 설치되어 있으므로 python3 버전 확인
  baebae@baebaeui-MacBookPro ~ % python3 -V
  Python 3.11.5
  
  
  3. python의 기본 경로를 python3로 지정해줄 수 있다.
  
    1. python 설치된 경로 확인
    baebae@baebaeui-MacBookPro ~ % ls -l /usr/local/bin/python*
  
    2. 환경변수 설정
    baebae@baebaeui-MacBookPro ~ % vi ~/.zshrc
  
    3. 파일 내 입력
    alias python=/Library/Frameworks/Python.framework/Versions/3.11/bin/python3
  
    4. 환경변수 적용
    baebae@baebaeui-MacBookPro ~ % source ~/.zshrc 
  
    5. 적용여부 확인
    baebae@baebaeui-MacBookPro myapi % python -V
    Python 3.11.5

✅ 가상환경 생성

프로젝트의 버전, 의존성 관리를 위해 가상환경을 생성하고 가상환경 내에서 개발한다.

1. 가상환경 생성

  1. venvs 디렉토리 생성
  baebae@baebaeui-MacBookPro fastapi % mkdir venvs
  baebae@baebaeui-MacBookPro fastapi % cd venvs

  2. myapi 내 가상환경 생성
  baebae@baebaeui-MacBookPro venvs % python -m venv myapi

  3. 가상환경 진입
  baebae@baebaeui-MacBookPro venvs % cd myapi
  baebae@baebaeui-MacBookPro myapi % cd bin
  baebae@baebaeui-MacBookPro bin % source activate
  (myapi) baebae@baebaeui-MacBookPro bin %

  4. 벗어나기
  (myapi) baebae@baebaeui-MacBookPro bin % deactivate
  baebae@baebaeui-MacBookPro bin %


2. FastAPI 설치
(myapi) baebae@baebaeui-MacBookPro bin % python -m pip install --upgrade pip
(myapi) baebae@baebaeui-MacBookPro bin % pip install fastapi


3. 환경변수 추가

  1. 파일열기
  vi ~/.zshrc

  2. 파일 내 입력
  alias myapi='cd /Users/baebae/Documents/practice/fastapi/projects/myapi;source /Users/baebae/Documents/practice/fastapi/venvs/myapi/bin/activate'

  3. 적용여부 확인
  baebae@baebaeui-MacBookPro myapi % myapi
  (myapi) baebae@baebaeui-MacBookPro myapi %

✅ React 환경 세팅

• Node.js 설치 : https://nodejs.org

  #설치된 버전 확인
  baebae@baebaeui-MacBookPro myapi % node -v
  v20.12.2

• React 설치

  
  1. 가상환경 진입
  baebae@baebaeui-MacBookPro myapi % myapi
  (myapi) baebae@baebaeui-MacBookPro myapi %
  
  
  2. React application 생성
  (myapi) baebae@baebaeui-MacBookPro myapi % npx create-react-app frontend
  
  
  3. React 설치
  
    1. npm 초기설정
    (myapi) baebae@baebaeui-MacBookPro myapi % npm init -y
    Wrote to /Users/baebae/Documents/practice/fastapi/projects/myapi/package.json:
  
    {
    "name": "myapi",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0"
    },
    "devDependencies": {},
    "keywords": [],
    "description": ""
    }
  
    2. React 설치
    (myapi) baebae@baebaeui-MacBookPro myapi % npm install --save react react-dom
  
  
  4. React 서버 실행
  
  baebae@baebaeui-MacBookPro frontend % npm start
  
  Compiled successfully!
  
  You can now view frontend in the browser.
  
  Local:            http://localhost:3000
  On Your Network:  http://xxx.xxx.x.xx:3000
  
  Note that the development build is not optimized.
  To create a production build, use npm run build.
  
  webpack compiled successfully

• 브라우저를 열고 http://localhost:3000/로 접속하면 아래 화면이 나타난다.

  

✅ Hello API 만들기

1. main.py 작성 [파일명: projects/myapi/main.py]

   
   from fastapi import FastAPI
   
   app = FastAPI()
   
   @app.get("/hello")
   def hello():
       return {"message": "hello world"}

2. 유비콘(Uvicorn)설치 : 비동기 호출을 지원하는 파이썬용 웹 서버

   
   (myapi) baebae@baebaeui-MacBookPro myapi % pip install "uvicorn[stadndard]"

3. FastAPI 서버 실행

   
   (myapi) baebae@baebaeui-MacBookPro myapi % uvicorn main:app --reload
   INFO:     Will watch for changes in these directories: ['/Users/baebae/Documents/practice/fastapi/projects/myapi']
   INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
   INFO:     Started reloader process [90154] using StatReload
   INFO:     Started server process [90156]
   INFO:     Waiting for application startup.
   INFO:     Application startup complete.
   INFO:     127.0.0.1:60303 - "GET /docs HTTP/1.1" 200 OK
   INFO:     127.0.0.1:60303 - "GET /openapi.json HTTP/1.1" 200 OK

4. Hello API 테스트

   1. 웹 브라우저에서 http://127.0.0.1:8000/docs 로 이동
      

   2. Try it out 누르고 Execute 누르면
      

5. React 웹페이지 만들기

   1. App.js 수정 [파일명: projects/myapi/frontend/src/App.js]

   
   import React, {useState} from "react";
   
   function App() {
     const [message, setMessage] = useState([]); 
     fetch("http://127.0.0.1:8000/hello")
       .then((response) => response.json())
       .then((json) => {
       console.log("json.message: ", json.message);     
       setMessage(json.message)
       console.log("message: ", message);
     })
   
     return (
       <h1>{message}</h1>
     );
   }
   
   export default App;

   2. main.py 수정 [파일명: projects/myapi/main.py]

   
   from fastapi import FastAPI
   from fastapi.middleware.cors import CORSMiddleware
   
   app = FastAPI()
   
   origins = [
       # "http://localhost:3000"
       "*"
   ]
   
   app.add_middleware(
       CORSMiddleware,
       allow_origins=origins,
       allow_credentials=True,
       allow_methods=["*"],
       allow_headers=["*"],
   )
   
   @app.get("/hello")
   def hello():
       return {"message": "hello world"}

   3. 웹 브라우저에서 http://localhost:3000/로 이동
      

🌟 REF

• 점프 투 FastAPI wikidocs
• https://reactjs-kr.firebaseapp.com/docs/installation.html#trying-out-react
• https://react.dev/learn/start-a-new-react-project