🛠Music_Community(1일차)🛠

✔ 2022.02.24(목)

 

- BE(Flask)를 먼저 셋팅을 한뒤에 하위 폴더를 만들어 FE(React)생성 후 Flask에 연동이 잘되는지 Testing 작업을 하였고 Testing 작업 후 GitHub에도 업로드를 완료하는 작업까지 하였습니다.

 

⚙ [1일차 진행상황]

 

1. vscode를 접속한뒤 back-End폴더를 생성한다.

2. Terminal에 flask를 설치하기 위해서 명령어를 입력한다. 

python -m venv venv

2-1. 설치가 완료되면 back-End폴더 안에 venv폴더, __pycahe__폴더가 있다. 체크해야 하는 부분은 venv폴더 안에 lib, include, Scripts라고 되어있다면 Scripts폴더를 bin으로 변경시켜줘야 한다!

2-2. bin폴더로 변경 후 Terminal에 명령어를 입력한다.

source venv/bin/activate

2-3. Terminal에 (venv) 되어있다면 flask 셋팅은 완료했다.

3. Flask를 Testing하는 작업이다.

3-1. Flask실행전 작업으로 app.py를 venv폴더 안이 아닌 밖에 만들어준뒤! app.py에 아래와 같게 코드를 작성해준다.

from flask import Flask, send_from_directory
from flask_restful import Api, Resource, reqparse
from flask_cors import CORS
from api.HelloApiHandler import HelloApiHandler
app = Flask(__name__, static_url_path='', static_folder='frontend/build')
CORS(app)
api = Api(app)
@app.route("/", defaults={'path':''})
def serve(path):
    return send_from_directory(app.static_folder,'index.html')
api.add_resource(HelloApiHandler, '/flask/hello')

✔ 유의할 사항으로는 3-1에서 static_folder={프론트엔드 폴더 위치/빌드된 폴더 위치}를 잘 설정을 해줘야한다.

🛠 간단하게 설명하면 static_url_path은 웹에서 정적인 파일에 대해 다른 경로를 지정 할 수 있고, 기본값으로 설정되는 폴더위치가 static_folder이다. 즉, 내가 파일을 실행 할껀데, 파일 실행전 실행 파일 폴더 위치가 어디에 있는지 여부라고 보면 된다. @app.route는 serve(경로)를 설정하는 것을 말하며 send_from_directory는 "frontend/build" 디렉터리에서 "index.html"파일을 보낼 것이다. 즉, Flask로 연결할껀데 그전에 작업하던 경로와 파일은 어디서 들고 오고 보여줄 것인지라고 생각하면 편하다.

4. 혹여 API요청에서 발생할 수 있는 CORS오류를 제거하기 위한 작업을 한다. 배포 전, React에서는 port번호가 3000이고, Flask에서는 port번호가 5000번이다. 여기에서 port번호가 서로 다르기에 요청하게 된다면 에러가 난다. 그래서 미리 사전에 방지하고자 back-end폴더안에 api라는 폴더를 생성 후 HelloApiHandler.py를 만들어서 Terminal에 flask run을 하였을 경우 localhost:5000/flask/hello를 url에 검색하였을때 JSON에서 Success가 되면 flask 작업이 완료가 된다. back-end 작업끝.

from flask_restful import Api, Resource, reqparse
class HelloApiHandler(Resource):
  def get(self):
    return {
      'resultStatus': 'SUCCESS',
      'message': "Hello Api Handler"
      }

  def post(self):
    print(self)
    parser = reqparse.RequestParser()
    parser.add_argument('type', type=str)
    parser.add_argument('message', type=str)

    args = parser.parse_args()
	print(args)
    
    request_type = args['type']
    request_json = args['message']
    
    ret_status = request_type
    ret_msg = request_json

    if ret_msg:
      message = "Your Message Requested: {}".format(ret_msg)
    else:
      message = "No Msg"
    
    final_ret = {"status": "Success", "message": message}

    return final_ret

5. front-end 작업을 위해서 Terminal에 frontend 폴더로 이동한다.

5-1. Terminal에 React를 생성해준다.

npx create-react-app {생성하고자 하는 폴더명}

5-2. frontend 폴더에 들어가서 생성한 폴더안에 src로 들어간뒤 app.js로 가서 flask에 연동을 해주기 위한 작업을 해준다.

import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';
import axios from 'axios'

function App() {
  const [getMessage, setGetMessage] = useState({})

  useEffect(()=>{
    axios.get('http://localhost:5000/flask/hello').then(response => {
      console.log("SUCCESS", response)
      setGetMessage(response)
    }).catch(error => {
      console.log(error)
    })

  }, [])
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>React + Flask Tutorial</p>
        <div>{getMessage.status === 200 ? 
          <h3>{getMessage.data.message}</h3>
          :
          <h3>LOADING</h3>}</div>
      </header>
    </div>
  );
}

export default App;

✔ React 실행시 화면

6. Heroku에 배포하는 작업(프론트, 백엔드 작업이 제대로 이루어 졌는지 테스하는 작업 시작!)

6-1. front-end에서 요청할때 back-end에서도 통신이 잘되는지 여부 테스트를 한다.

6-2. front-end 요청 전 Terminal에 명령어를 입력하여 다운을 받는다.

yarn add axios

6-3. app.js에서 통신이 잘되는지 아래와 같이 코드를 작성 후 실행해본다.

import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';
import axios from 'axios'

function App() {
  const [getMessage, setGetMessage] = useState({})

  useEffect(()=>{
    axios.get('https://react-flask-tutorial.herokuapp.com/flask/hello').then(response => {
      console.log("SUCCESS", response)
      setGetMessage(response)
    }).catch(error => {
      console.log(error)
    })
  }, [])
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>React + Flask Tutorial</p>
        <div>{getMessage.status === 200 ? 
          <h3>{getMessage.data.message}</h3>
          :
          <h3>LOADING</h3>}</div>
      </header>
    </div>
  );
}

export default App;

6-4. 마지막으로 front-end에서 Terminal에 명령어를 입력해 준다.

npm run build

7. 마지막으로 프로젝트를 GitHub에 commit, push해준다.