Python과 Flask를 이용한 웹 개발 기초

byCode Keeper •

Python과 Flask를 이용한 웹 개발 기초


1. 서론

Flask는 Python으로 웹 애플리케이션을 개발할 수 있는 가벼운 웹 프레임워크입니다. Flask는 간결하고 유연한 구조로 인해 초보자도 쉽게 웹 개발을 시작할 수 있습니다. 이번 포스팅에서는 Flask를 사용하여 간단한 웹 애플리케이션을 만드는 방법을 단계별로 설명하겠습니다.


2. Flask란 무엇인가?

Flask는 Python으로 작성된 마이크로 웹 프레임워크입니다. Flask는 최소한의 핵심 기능만 제공하며, 필요한 기능은 확장하여 사용할 수 있습니다. 이는 Flask를 가볍고 유연하게 만들어줍니다.


3. 개발 환경 설정


3.1 Python 설치

Python이 설치되어 있지 않다면 Python 공식 웹사이트에서 설치합니다.


3.2 Flask 설치

Flask를 설치하려면 pip를 사용합니다.


pip install Flask

4. Flask 기본 구조


4.1 Flask 애플리케이션 생성

간단한 Flask 애플리케이션을 생성하는 방법을 알아보겠습니다.


from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, Flask!"

if __name__ == "__main__":
    app.run(debug=True)

4.2 라우팅

Flask의 라우팅은 URL과 함수 매핑을 통해 특정 URL로 요청이 들어올 때 실행할 함수를 지정합니다.


@app.route('/about')
def about():
    return "This is the about page."

4.3 템플릿 렌더링

Flask는 Jinja2 템플릿 엔진을 사용하여 HTML 파일을 렌더링합니다.


from flask import render_template

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

index.html 파일을 templates 폴더에 생성합니다.


<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
    <h1>Welcome to Flask!</h1>
</body>
</html>

5. 데이터베이스 연동


5.1 SQLite 사용하기

SQLite는 가벼운 파일 기반의 데이터베이스로, Flask와 함께 사용하기 적합합니다.


import sqlite3

def init_db():
    conn = sqlite3.connect('database.db')
    c = conn.cursor()
    c.execute('''CREATE TABLE IF NOT EXISTS posts (id INTEGER PRIMARY KEY, title TEXT, content TEXT)''')
    conn.commit()
    conn.close()

5.2 SQLAlchemy 설정

SQLAlchemy는 Python ORM(Object-Relational Mapping) 라이브러리로, 데이터베이스 작업을 쉽게 처리할 수 있게 해줍니다.


from flask_sqlalchemy import SQLAlchemy

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///database.db'
db = SQLAlchemy(app)

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.Text, nullable=False)

6. 폼 처리 및 유효성 검사

Flask-WTF를 사용하여 폼을 처리하고 유효성을 검사할 수 있습니다.


from flask_wtf import FlaskForm
from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import DataRequired

class PostForm(FlaskForm):
    title = StringField('Title', validators=[DataRequired()])
    content = TextAreaField('Content', validators=[DataRequired()])
    submit = SubmitField('Post')

7. 정적 파일 및 CSS

정적 파일(CSS, JS, 이미지 등)을 제공하기 위해 static 폴더를 사용합니다.


<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <h1>Welcome to Flask!</h1>
</body>
</html>

static/styles.css 파일을 생성합니다.


/* static/styles.css */
body {
    font-family: Arial, sans-serif;
}

8. 예제 프로젝트: 간단한 블로그 만들기


8.1 프로젝트 구조

프로젝트 폴더 구조는 다음과 같습니다.


my_blog/
├── app.py
├── database.db
├── templates/
│   ├── index.html
│   ├── post.html
│   └── create_post.html
└── static/
    └── styles.css

8.2 기본 페이지 생성

기본 페이지를 생성하고 라우트를 설정합니다.


from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///database.db'
db = SQLAlchemy(app)

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.Text, nullable=False)

@app.route('/')
def index():
    posts = Post.query.all()
    return render_template('index.html', posts=posts)

if __name__ == "__main__":
    app.run(debug=True)

8.3 글 작성 기능 구현

글 작성 폼과 글 저장 기능을 구현합니다.


from flask import Flask, render_template, redirect, url_for, request
from flask_sqlalchemy import SQLAlchemy
from flask_wtf import FlaskForm
from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecret'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///database.db'
db = SQLAlchemy(app)

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    content = db.Column(db.Text, nullable=False)

class PostForm(FlaskForm):
    title = StringField('Title', validators=[DataRequired()])
    content = TextAreaField('Content', validators=[DataRequired()])
    submit = SubmitField('Post')

@app.route('/')
def index():
    posts = Post.query.all()
    return render_template('index.html', posts=posts)

@app.route('/create', methods=['GET', 'POST'])
def create_post():
    form = PostForm()
    if form.validate_on_submit():
        post = Post(title=form.title.data, content=form.content.data)
        db.session.add(post)
        db.session.commit()
        return redirect(url_for('index'))
    return render_template('create_post.html', form=form)

if __name__ == "__main__":
    app.run(debug=True)

8.4 글 목록 및 상세보기 구현

글 목록과 상세보기 페이지를 구현합니다.


@app.route('/post/<int:post_id>')
def post(post_id):
    post = Post.query.get_or_404(post_id)
    return render_template('post.html', post=post)

templates/index.html 파일을 수정합니다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <h1>Blog Posts</h1>
    <a href="{{ url_for('create_post') }}">Create New Post</a>
    <ul>
        {% for post in posts %}
        <li>
            <a href="{{ url_for('post', post_id=post.id) }}">{{ post.title }}</a>
        </li>
        {% endfor %}
    </ul>
</body>
</html>

templates/post.html 파일을 생성합니다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ post.title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
    <a href="{{ url_for('index') }}">Back to Home</a>
</body>
</html>

9. 결론

이번 포스팅에서는 Flask를 사용하여 간단한 블로그 애플리케이션을 만드는 과정을 단계별로 살펴보았습니다. Flask는 간단하면서도 강력한 기능을 제공하여 웹 애플리케이션 개발을 쉽게 시작할 수 있게 해줍니다. 더 나아가 Flask의 다양한 확장을 활용하여 더욱 복잡한 애플리케이션도 구축할 수 있습니다.


Tags:
다음 이전