소개

직장에서 React에 의한 프론트 개발에 종사하기 시작했기 때문에, 아웃풋의 연습도 겸해 간이 web 어플리케이션을 작성했습니다.

어떠한 앱으로 할지 아이디어는 전혀 떠오르지 않았기 때문에, 수중에 있었다 mecab 하는 매우 간단한 응용 프로그램입니다.
(주목적은 react와 flask를 연결하는 부분을 공부하는 것이었기 때문에, 앱의 외형이나 기능은 전혀 만들지 않기 때문에 미안하다.)

표제대로, 프론트 측은 React, 서버 측은 python flask로 구현됩니다.

이번에 구현한 스크립트는 여기 에서 공개하고 있습니다.

완제품

화면


나누어 봐

구현 환경

OS: Ubuntu 18.04.2 LTS
Python: 3.6
flask==1.0.2

npm: 6.14.7

react의 환경 구축에 대해서는 이번 만지지 않습니다만, 공식 튜토리얼이 일본어에서도 충실하고 있어 매우 참고가 되었습니다.
- htps : // 그럼. Rea ctjs. rg/

이쪽도 굉장히 추천합니다.
- htps : // 음. 짱 b. 인 / 아 r ゔ ぇ s / 2529

구현하다

구성도

이번에 구현한 앱의 구성은 다음과 같이 되어 있습니다(주요 부분만).

서버측

서버측은 다음과 같은 구성으로 되어 있습니다.

backend/
   ├─ requirements.txt
   ├─ server.py
   └─ utils.py

server.py 는 flask 서버를 시작하는 코드입니다.

주소나 포트는 맨 아래, app.run(host='127.0.0.1', port=5000) 로 지정합니다.

server.py

from flask import Flask
from flask import request, make_response, jsonify
from flask_cors import CORS
from utils import wakati

app = Flask(__name__, static_folder="./build/static", template_folder="./build")
CORS(app) #Cross Origin Resource Sharing

@app.route("/", methods=['GET'])
def index():
    return "text parser:)"

@app.route("/wakati", methods=['GET','POST'])
def parse():
    #print(request.get_json()) # -> {'post_text': 'テストテストテスト'}
    data = request.get_json()
    text = data['post_text']

    res = wakati(text)
    response = {'result': res}
    #print(response)
    return make_response(jsonify(response))

if __name__ == "__main__":
    app.debug = True
    app.run(host='127.0.0.1', port=5000)

@app.route("/wakati", methods=['GET','POST') 부분에서 프런트로부터 텍스트를 받아, 나눠쓰기 처리한 후, 프런트에 돌려주는 처리를 하고 있습니다.data = request.get_json() 에 의해 프런트로부터 포스트 되어 온 내용을 json 형식으로 취득합니다.
여기에서 필요한 데이터를 꺼내어, 어떠한 처리(함수에 걸거나 DB에 넣거나 해)를 해, response = {'result': res} 와 같이 json 형식으로 해 프론트에 돌려줍니다.

(보충: CORS란?)
다른 리소스에 액세스(=크로스 사이트 HTTP 요청)할 수 있도록 하는 데 필요한 규칙입니다. 이것이 없으면 프런트 측에서 시작한 flask 서버에 액세스 할 수 없습니다.
- 참고: htps : // 아에리나 01. 기주 b. 이오/bぉg/2016-10-13-1

앞면

이번에는 create-react-app의 병아리를 사용했습니다.
(create-react-app의 설정 및 사용법은 여기 가 매우 알기 쉽습니다!)

프런트측은 이하와 같은 구성으로 되어 있습니다(주요 파일만 게재).

frontend/app/
   ├─ node_modules/
   ├─ public/
   ├─ src/
   |   ├─ App.css
   |   ├─ App.js
   |   ├─ index.js
   |   └─ ...
   └─ ...

자동 생성된 병아리 안에 App.js 를 다음과 같이 다시 작성했습니다.

App.js

import React from 'react';
import './App.css';
import Axios from 'axios';

//function App() {
export class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>text parser</h1>
          <form onSubmit={this.handleSubmit}>
            <label>
              <textarea name="text" cols="80" rows="4" value={this.state.value} onChange={this.handleChange} />
            </label>
            <br/>
            <input type="submit" value="Parse" />
          </form>
        </header>
      </div>
    );
  }


  wakati = text => {
    //console.log("input text >>"+text)
    Axios.post('http://127.0.0.1:5000/wakati', {
      post_text: text
    }).then(function(res) {
      alert(res.data.result);
    })
  };

  handleSubmit = event => {
    this.wakati(this.state.value)
    event.preventDefault();
  };

  handleChange = event => {
    this.setState({ value: event.target.value });
  };
}

export default App;

이 중의 다음 부분에서 서버 측과의 교환을 실시하고 있습니다.

  wakati = text => {
    //console.log("input text >>"+text)
    Axios.post('http://127.0.0.1:5000/wakati', {
      post_text: text
    }).then(function(res) {
      alert(res.data.result);
    })
  };

server.py 에 서 있는 http://127.0.0.1:5000/wakati 에 this.state.value 의 값을 게시합니다.
서버 측에서 처리 된 후 반환 된 result의 값이 alert(res.data.result);에 의해 브라우저에 표시됩니다.

움직이다

프런트 엔드/백 엔드용으로 각각 터미널을 시작하고 다음 명령을 실행합니다.

서버측

$ cd backend
$ python server.py

앞면

$ cd frontend/app
$ yarn start

브라우저에서 localhost:3000에 액세스하여 앱을 사용할 수 있습니다 (yarn start에서 자동으로 시작).

결론

이번에는 React와 Python flask를 사용하여 간단한 웹 앱을 구현했습니다.
간단하다고는 해도, 단시간에 편하게 Web 앱을 구현할 수 있기 때문에 훌륭하네요.

프런트 수행 중의 몸이므로, 외형이나 기능에 대해서는 아직이므로 의견, 어드바이스등 받을 수 있으면 다행입니다.
끝까지 읽어 주셔서 감사합니다!