웹 개발에서 Flask와 Angular를 조합하여 웹 사이트를 개발하는 것은 매우 흥미로운 일입니다. Flask는 파이썬 웹 프레임워크로서 백엔드 서버를 구축하고 데이터를 처리하는데 사용됩니다. 한편, Angular는 프론트엔드 프레임워크로서 사용자 인터페이스를 개발하는데 주로 사용됩니다. 이번 블로그에서는 Flask와 Angular를 조합하여 웹 사이트를 개발할 때 어떻게 구조화해야 하는지에 대해 알아보겠습니다.

1. 폴더 구조

웹 애플리케이션을 개발할 때는 백엔드 서버와 프론트엔드 애플리케이션을 구분하여 폴더를 구성하는 것이 좋습니다. 보통 다음과 같은 구조를 취합니다.

myapp/
├─ backend/
│   ├─ app.py
│   ├─ static/
│   └─ templates/
└─ frontend/
    ├─ src/
    └─ angular.json

2. 백엔드 서버

Flask 애플리케이션은 backend 폴더 안에 위치합니다. app.py 파일은 Flask 앱의 진입점이며, static 폴더에는 정적 파일(이미지, 스타일 시트 등)이 위치합니다. 또한, templates 폴더에는 HTML 템플릿 파일이 위치합니다.

# backend/app.py

from flask import Flask, render_template
app = Flask(__name__)

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

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

3. 프론트엔드 애플리케이션

프론트엔드 애플리케이션은 frontend 폴더 안에 위치하며, Angular CLI를 사용하여 생성할 수 있습니다. 컴포넌트, 서비스 및 모듈과 같은 Angular 파일들은 src 폴더에 위치하며, 구성과 빌드 설정은 angular.json 파일에서 관리됩니다.

// frontend/angular.json

{
  "projects": {
    "myapp": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "../backend/static"
          }
        }
      }
    }
  }
}

4. 백엔드와 프론트엔드 통합

백엔드와 프론트엔드 애플리케이션을 통합하기 위해서는 Flask 서버에서 Angular 애플리케이션을 제공해야 합니다. 이를 위해 백엔드 서버에서 정적 파일과 Angular 빌드 파일을 호스팅할 수 있도록 설정해야 합니다.

# backend/app.py

from flask import Flask, render_template, send_from_directory
app = Flask(__name__)

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

@app.route('/<path:filename>')
def static_files(filename):
    return send_from_directory('../frontend/src', filename)

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

이와 같이 Flask와 Angular를 조합하여 웹 애플리케이션을 구축할 수 있습니다. 이러한 구조를 통해 백엔드 서버와 프론트엔드 애플리케이션을 분리하여 개발하고, 필요에 따라 통합할 수 있습니다.

이상으로 Flask와 Angular를 조합한 웹 사이트의 구조에 대해 알아보았습니다. 감사합니다.

참고 문헌:

• Flask 공식 문서: https://flask.palletsprojects.com/
• Angular 공식 문서: https://angular.io/
• “Angular in Action” (Manning Publications) - by Jeremy Wilken