참고자료
벨로그
https://velog.io/@dalkong/Flask-React-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0
폴더, 파일 만들어서 틀 만들기
- 리액트 실행시키기
- 터미널 띄우기
- 터미널에
mkdir flask-server입력
→ 옆에 보면 폴더 아래에 flask-server 폴더가 생긴게 보인다.
- 터미널에
cd flask-server입력해서 flask-server 폴더로 접근
- 터미널에
touch server.py입력
→ 윈도우는 안되기 때문에 윈도우에서 안되면type nul > server.py입력
→ 옆에 보면 flask-server 폴더 안에 server.py 파이썬 파일이 생김
- 터미널에
cd..쳐서 폴더 나오기
- 터미널에
npx create-react-app client입력해서 client라는 리액트 프로젝트 만들어주기
→ 밑에 Happy hacking이 뜨면 성공
→ 폴더 확인
가상환경 만들기
- 터미널에
cd flask-server입력해서 flask-server 폴더에 접근
- 가상환경 생성
터미널에python3 -m venv venv입력
→ 안되면py -3 -m venv venv입력
→ 파이썬 폴더 생겼는지 확인
- 가상환경 실행
터미널에source venv/bin/activate입력
→ 윈도우일 경우venv\Scripts\activate입력
Flask 설치
- flask 설치
터미널에pip3 install Flask입력
서버 파일 작성하고 실행 및 확인
- 코드 작성
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)- 서버 실행
코드 작성하고 터미널에py server.py또는python3 server.py입력
→ http://127.0.0.1:5000에서 서버가 돌아가고 있는걸 확인할 수 있음
- Ctrl + 주소 클릭
or 창 새로 열기
- 데이터 확인
주소창에/members입력 또는127.0.0.1:5000/users입력
→ 여기에 적은 루트로 입력
- 확인
React 프로젝트에 불필요한 파일 삭제
- 불필요한 파일 삭제
client 폴더 들어가서App.test.js삭제,index.css삭제,logo.svg삭제
→ 
index.js들어가서index.cssimport 지우기
→ 
React 프로젝트에 flask 서버 연결
- package.json 파일 수정
"private"밑에"proxy": "http://localhost:5000,"추가
→ 
- App.js 코드 작성
적어진 것들 다 지우고rfce + Enter
→ 
- 맨 위에 import 하기 (useState, useEffect)
import React, {useState, useEffect} from 'react'
브라우저 화면에 데이터 렌더링 및 결과 확인
- 확인하기
터미널에cd..으로 나와서cd client로 client 폴더에 접근
- 접근하고
npm start명령어 실행
(오류 생기면 맨 밑에 오류 잡기 설명 보고 잡은 다음에 실행)
- 코드 작성
App.js 들어가서 return문 위에 아래 코드 작성
const [data, setData] = useState([{}])
useEffect(() => {
fetch("/members").then(
res => res.json()
).then(
data => {
setData(data)
console.log(data);
}
)
}, [])- 전체 코드
import React, {useState, useEffect} from 'react'
function App() {
const [data, setData] = useState([{}])
useEffect(() => {
fetch("/members").then(
res => res.json()
).then(
data => {
setData(data)
console.log(data);
}
)
}, [])
return (
<div>App</div>
)
}
export default App
- 결과 화면
→ server.py 파일에 작성한 것 리액트 페이지에 데이터 띄우기
npm start 명령어 실행 오류
저는 첫 번째 방법에서 실행하고 proxy 오류 나는 것을 두 번째, 세 번째 방법으로 잡았습니다!
- 새로운 파일 추가(
.env파일 추가)
아래 코드 작성
DANGEROUSLY_DISABLE_HOST_CHECK=true 
- 새로운 파일 추가(src/setupProxy.js)
아래 코드 작성
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};
노는게 제일 좋아~!