Colin's Blog
[파이썬] Flask와 Frontend 프레임워크 연동

빠르고 간편한 개발을 위해 Flask와 Frontend 프레임워크를 함께 사용하는 것은 매우 일반적입니다. Flask는 강력한 백엔드 프레임워크이며, Frontend 프레임워크는 사용자 인터페이스를 만들기 위한 훌륭한 도구입니다. 이 글에서는 Flask와 Frontend 프레임워크를 연동하는 간단한 예제를 살펴보겠습니다.

Flask 백엔드 설정

우선, Flask를 사용하기 위해 프로젝트를 설정해야 합니다. Flask를 설치하고 가상 환경을 만든 후, 다음과 같은 기본적인 Flask 앱을 작성할 수 있습니다.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello, world!'

if __name__ == '__main__':
    app.run()

이 코드는 최소한의 Flask 앱을 생성하는 예제입니다. ‘/’ 경로에 요청이 들어오면 ‘Hello, world!’라는 메시지를 반환합니다.

Frontend 프레임워크 설정

이제 Flask와 연동할 Frontend 프레임워크를 설정해보겠습니다. 아래 예제에서는 React를 사용하여 프론트엔드를 작성하였습니다.

  1. React 프로젝트 설정하기 위해 터미널에서 다음 명령을 실행합니다. 
    npx create-react-app frontend
  2. 생성된 frontend 폴더로 이동한 후, src/App.js 파일을 열고 다음과 같이 코드를 수정합니다. ```javascript import React, { useState, useEffect } from ‘react’; import axios from ‘axios’;

const App = () => { const [message, setMessage] = useState(‘’);

useEffect(() => { axios.get(‘http://localhost:5000/’) .then(response => { setMessage(response.data); }); }, []);

return ( <div> <h1>{message}</h1> </div> ); }

export default App;


위 코드는 `App` 컴포넌트를 정의하고, Flask 백엔드로부터 받은 메시지를 화면에 표시합니다. 해당 컴포넌트에서는 `useEffect` 훅을 사용하여 컴포넌트가 마운트될 때 한 번만 Flask 서버로 요청을 보내고, `useState` 훅을 사용하여 요청에 대한 응답을 상태로 관리합니다.

## Flask와 Frontend 프레임워크 연동

이제 Flask 백엔드와 React 프론트엔드를 연동시킬 차례입니다. Flask 앱의 `index` 뷰 함수를 수정하여 React 앱의 루트 페이지를 렌더링하도록 변경합니다.

```python
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

그리고 Flask 앱과 React 앱을 함께 실행하려면, 다음 명령어를 각각의 터미널에서 실행합니다.

이제 http://localhost:3000/로 이동하면 Flask 백엔드에서 반환하는 메시지가 표시되는 것을 확인할 수 있습니다.

결론

Flask와 Frontend 프레임워크를 함께 사용하는 것은 강력한 백엔드와 사용자 인터페이스를 구축하는 데 큰 도움이 됩니다. 이 글에서는 Flask와 React의 간단한 연동 예제를 살펴보았습니다. 이를 통해 프로젝트를 더욱 효율적으로 개발할 수 있을 것입니다. Flask와 다른 Frontend 프레임워크도 함께 사용해보세요!

© 2018 Colin. All rights reserved.