React
React에서 Python Flask 서버 호출하기
huipark
2025. 5. 25. 00:35
react 프로젝트 중 python을 써야 할 일이 생겼다
어떻게 두 프로젝트를 관리할까 하다가 평소 모노레포를 좋아해 이번 프로젝트 역시 모노레포를 적용하기로 했다
❗️환경
npm
파이썬 서버와 클라이언트를 동시에 실행하려면 concurrently 라이브러리를 설치 한다.
각자 환경에 맞게 concurrently 설치
npm install --save-dev concurrently
package.json 예시
{
"scripts": {
"dev:client": "cd client && npm run dev",
"dev:server": "cd server && source venv/bin/activate && python server.py",
"dev": "concurrently \"npm run dev:client\" \"npm run dev:server\""
},
"devDependencies": {
"concurrently": "^7.0.0"
}
}
모노레포 구조 잡기
- client / server 디렉토리 생성
my-fullstack-app/
├── client/ ← React 기반 프론트엔드
├── node_modules/
├── package.json
├── package-lock.json
└── server/ ← Python Flask 백엔드
파이썬 플라스크 세팅
파이썬 가상환경 생성
cd server
python3 -m venv venv
가상환경 실행
source venv/bin/activate
플라스크 설치
pip3 install Flask
파이썬 서버 코드 작성
touch server.py
from flask import Flask
app = Flask(__name__)
# Members API Route
@app.route("/members")
def members():
return {"members": ["Member1", "Member2", "Member3"]}
if __name__ == "__main__":
app.run(debug=True)
여기까지 하면 ptyhon flask 세팅은 끝
클라이언트 세팅
client로 이동 후 각자 원하는 리액트 기반의 프레임워크 생성
나는 react router로 결정!
react router는 빌드 도구로 vite를 사용하고 있다. 파이썬 서버로 요청을 보내기 위해서는 proxy 설정을 해줘야 한다
proxy 설정 - vite.config.ts에 추가
server: {
proxy: {
'/python': {
target: 'http://127.0.0.1:5000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/python/, ''),
},
},
},
- /python/members → http://127.0.0.1:5000/members로 프록시
- Flask 서버는 기본적으로 5000번 포트에서 리스닝을 시작한다
실행
npm run dev
위 명령어로 server, client를 실행시키고
/python/members로 요청을 보내면 정상적으로 요청이 된다.