[파이썬] Flask로 SPA (Single Page Application) 서비스하기

06 Sep 2023

flask

소개

Flask는 파이썬 웹 프레임워크로, 단일 페이지 애플리케이션 (SPA)을 개발할 때도 사용될 수 있습니다. SPA는 웹 애플리케이션의 일부분만을 동적으로 업데이트하며, 새로운 페이지를 전환하는 대신 클라이언트 측에서 자바스크립트를 사용해 내부적으로 렌더링합니다.

이번 블로그 게시물에서는 Flask를 사용하여 SPA를 구축하는 방법에 대해 살펴보겠습니다. Flask는 라우팅, 템플릿 엔진 및 데이터베이스 연결과 같은 기능을 제공하므로, 이러한 기능을 활용하여 SPA를 쉽게 개발할 수 있습니다.

프로젝트 설정

우선, Flask를 설치하고 새로운 프로젝트 디렉토리를 만듭니다.

pip install flask
mkdir my_spa_project
cd my_spa_project

필요한 패키지 설치

SPA를 개발하는 데에는 일반적으로 자바스크립트 라이브러리나 프레임워크가 필요합니다. 여기에서는 React를 사용하여 간단한 SPA를 만든다고 가정합니다. Flask와 React를 통합하기 위해 Flask-React 패키지를 사용할 것입니다. 필요한 패키지를 설치합니다.

pip install flask-react

라우팅 설정

Flask에서는 URL에 따라 적절한 뷰 함수에 연결하는 라우팅이 필요합니다. 이를 위해 Flask의 @app.route() 데코레이터를 사용합니다.

from flask import Flask, render_template
from flask_react import FlaskReact

app = Flask(__name__)
react = FlaskReact(app)

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

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

위의 코드에서는 @app.route('/')라는 데코레이터를 사용하여 루트 URL에 대한 뷰 함수를 정의했습니다. 뷰 함수는 render_template() 함수를 호출하여 index.html 템플릿을 반환합니다.

뷰 함수에서 SPA의 페이지를 렌더링하려면 템플릿 엔진을 사용해야 합니다. Flask는 Jinja2라는 템플릿 엔진을 기본적으로 제공합니다.

템플릿 작성

템플릿은 클라이언트에서 SPA의 초기 HTML을 렌더링하는 데 사용됩니다. 여기에는 SPA에서 사용할 JavaScript 및 CSS 파일의 링크를 포함해야 합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>SPA with Flask</title>
    {% block head %}
    {% endblock %}
  </head>
  <body>
    <div id="root"></div>
    
    {% block scripts %}
    {% endblock %}
  </body>
</html>

위의 코드는 템플릿의 기본 구조입니다. {% block %} 및 {% endblock %}으로 둘러싸인 부분에는 특정 페이지에서 조정되는 블럭을 정의할 수 있습니다.

뷰 함수 업데이트

Flask 애플리케이션의 루트 URL에 연결된 뷰 함수를 업데이트하여 템플릿을 렌더링하도록 만들어 봅시다.

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

위의 코드에서는 render_template() 함수를 사용하여 index.html 템플릿을 렌더링하도록 했습니다.

서비스 실행

Flask 애플리케이션을 실행해 보겠습니다.

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

터미널에서 다음 명령을 실행하여 애플리케이션을 실행합니다.

python app.py

정상적으로 실행되면 웹 브라우저에서 “http://localhost:5000”에 접속하여 SPA 애플리케이션을 확인할 수 있습니다.

결론

이번 블로그 게시물에서는 Flask를 사용하여 SPA를 개발하는 방법에 대해 알아보았습니다. Flask의 강력한 기능과 라이브러리의 통합을 통해 간단하게 SPA를 생성할 수 있습니다. Flask를 사용하여 SPA를 개발하고 싶은 경우, 이 튜토리얼을 참고하여 시작해 보세요.