ETC - #1 리액트와 플라스크 연동하기(React + Flask)

---

---

참고자료

유튜브 동영상
https://www.youtube.com/watch?v=7LNl2JlZKHA

벨로그
https://velog.io/@dalkong/Flask-React-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0

---

폴더, 파일 만들어서 틀 만들기

1. 리액트 실행시키기

2. 터미널 띄우기
   

3. 터미널에 mkdir flask-server 입력
   → 옆에 보면 폴더 아래에 flask-server 폴더가 생긴게 보인다.
   

4. 터미널에 cd flask-server 입력해서 flask-server 폴더로 접근
   

5. 터미널에 touch server.py 입력
   → 윈도우는 안되기 때문에 윈도우에서 안되면 type nul > server.py 입력
   → 옆에 보면 flask-server 폴더 안에 server.py 파이썬 파일이 생김
   

6. 터미널에 cd.. 쳐서 폴더 나오기
   

7. 터미널에 npx create-react-app client 입력해서 client라는 리액트 프로젝트 만들어주기
   → 밑에 Happy hacking이 뜨면 성공
   → 폴더 확인
   

---

가상환경 만들기

1. 터미널에 cd flask-server 입력해서 flask-server 폴더에 접근
   

2. 가상환경 생성
   터미널에 python3 -m venv venv 입력
   → 안되면 py -3 -m venv venv 입력
   → 파이썬 폴더 생겼는지 확인
   

3. 가상환경 실행
   터미널에 source venv/bin/activate 입력
   → 윈도우일 경우 venv\Scripts\activate 입력
   

---

Flask 설치

1. flask 설치
   터미널에 pip3 install Flask 입력
   

---

서버 파일 작성하고 실행 및 확인

1. 코드 작성
   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)

2. 서버 실행
   코드 작성하고 터미널에 py server.py 또는 python3 server.py 입력
   → http://127.0.0.1:5000에서 서버가 돌아가고 있는걸 확인할 수 있음

• Ctrl + 주소 클릭
  or 창 새로 열기

3. 데이터 확인
   주소창에 /members 입력 또는 127.0.0.1:5000/users 입력
   
   → 여기에 적은 루트로 입력

• 확인
  

---

React 프로젝트에 불필요한 파일 삭제

1. 불필요한 파일 삭제
   client 폴더 들어가서 App.test.js 삭제, index.css 삭제, logo.svg 삭제
   →

• index.js 들어가서 index.css import 지우기
  →

---

React 프로젝트에 flask 서버 연결

1. package.json 파일 수정
   "private" 밑에 "proxy": "http://localhost:5000," 추가
   →

2. App.js 코드 작성
   적어진 것들 다 지우고 rfce + Enter
   →

• 맨 위에 import 하기 (useState, useEffect)

import React, {useState, useEffect} from 'react'

---

브라우저 화면에 데이터 렌더링 및 결과 확인

18. 확인하기
    터미널에 cd.. 으로 나와서 cd client로 client 폴더에 접근
    

• 접근하고 npm start 명령어 실행
  (오류 생기면 맨 밑에 오류 잡기 설명 보고 잡은 다음에 실행)
  

19. 코드 작성
    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 명령어 실행 오류

1. 방법1
   https://velog.io/@black-pepper/Invalid-options-object.-Dev-Server-has-been-initialized-using-an-options-object-that-does-not-match-the-API-schema

2. 방법2
   https://flykimjiwon.tistory.com/58

3. 방법3
   https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

저는 첫 번째 방법에서 실행하고 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,
    })
  );
};

---