Flask로 웹개발: #7 구현 - 기능 개발

안녕하세요! 이번 포스팅에서는 Flask를 사용하여 미니 쇼핑몰을 만드는 과정 중 app.py 파일을 자세히 설명드리겠습니다. app.py는 Flask 애플리케이션의 핵심 파일로, 라우팅, 데이터베이스 연결, 템플릿 렌더링 등을 처리합니다. Flasksk 파이썬에 익숙하지 않은 분들도 쉽게 따라올 수 있도록 하나씩 차근차근 설명해드리겠습니다.

1. 개발할 기능들에 대한 설명

우리가 만드는 미니 쇼핑몰에서는 아래와 같은 기능을 제공합니다. 아직은 구체적인 기능들이 많이 부족하지만 파이썬에 대한 감각을 익혀가는 과정이고 실제 개발에 대한 적응을 하는 과정이기 때문에 간단한 기능부터 시작해 봅니다.

• 첫 번째 화면(index 화면): 웹 사이트에 접속하면 가장 먼저 보이는 화면입니다.
• 제품 상세 페이지: 어떤 제품을 클릭하면 보이는 상세 페이지 입니다.
• 장바구니: 여러 분이 마음에 드는 제품을 담아두는 공간입니다(익숙하시죠?ㅎㅎ).
• 장바구니 담기: 상품을 장바구니에 추가하는 기능입니다.
• 장바구니 비우기: 장바구니에 담긴 상품을 전체 삭제하는 기능입니다.

2. 전체 app.py 파일

이제 app.py 파일을 작성해보겠습니다. 이전 포스팅에서 데이터베이스와 연동하는 부분에 대한 것은 이미 작성했습니다. 이번 포스팅에서는 라우트를 정의하고 각 기능에 대한 개발을 해보겠습니다. 먼저 전체 app.py에 대한 내용을 살펴보고 각 기능 하나하나에 대해 설명하겠습니다.

'''필요 패키기 임포트'''
from flask import Flask, render_template, request, redirect, url_for, session
from flask_sqlalchemy import SQLAlchemy

'''Flask 및 db 설정'''
app = Flask(__name__)
app.secret_key = 'flasksecretkey'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///products.db'
db = SQLAlchemy(app)

# 제품 DB 모델
class Product(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(80), nullable=False)
    price = db.Column(db.Float, nullable=False)
    description = db.Column(db.String(200), nullable=False)

# Index 페이지
@app.route('/')
def index():
    products = Product.query.all()
    return render_template('index.html', products=products)

# 제품 상세 페이지
@app.route('/product/<int:product_id>')
def product(product_id):
    product = Product.query.get_or_404(product_id)
    return render_template('product.html', product=product)

# 선택한 제품을 장바구니에 담는 기능
@app.route('/add_to_cart/<int:product_id>')
def add_to_cart(product_id):
    product = Product.query.get_or_404(product_id)
    cart = session.get('cart', [])
    cart.append({'id': product.id, 'name': product.name, 'price': product.price})
    session['cart'] = cart
    return redirect(url_for('cart'))

# 장바구니 확인
@app.route('/cart')
def cart():
    cart = session.get('cart', [])
    total = sum(item['price'] for item in cart)
    return render_template('cart.html', cart=cart, total=total)

# 장바구니 비우기
@app.route('/clear_cart')
def clear_cart():
    session.pop('cart', None)
    return redirect(url_for('cart'))

# Flask 실행
if __name__ == '__main__':
    with app.app_context():
      db.create_all()
    app.run(host="0.0.0.0", debug=True)

3. 세부 기능 별 설명

Index 페이지

Index 페이지를 생성하는 코드에 대해 설명드리겠습니다. 아래 코드는 위에서 작성한 코드 중 index에 해당하는 부분만 발췌한 것입니다.

@app.route('/') # 1)
def index():
    products = Product.query.all() # 2)
    return render_template('index.html', products=products) # 3)

 

1) Flask에서 URL 라우트를 정의하는 데코레이터입니다. app.route('/')는 루트 URL (/)에 접속할 때 index 함수를 호출하도록 Flask에게 지시합니다. 즉, 사용자가 웹 브라우저에서 http://localhost:5000/ (기본 포트가 5000인 경우)와 같이 사이트의 루트 URL에 접근하면 이 데코레이터가 index 함수를 실행하게 합니다.

 

2) SQLAlchemy ORM을 사용하여 데이터베이스의 Product 테이블에 저장된 모든 레코드를 쿼리합니다. Product.query.all()은 데이터베이스의 Product 테이블에서 모든 레코드를 조회하고, 그 결과를 products 변수에 리스트 형태로 저장합니다.

 

3) Flask는 index.html 파일을 찾아서 렌더링하고, products 리스트를 해당 템플릿에 전달합니다. 템플릿은 전달된 데이터를 사용하여 동적으로 HTML 페이지를 생성합니다.

제품 상세 페이지

제품 상세 페이지에 대해 코드를 보면서 자세히 설명드리겠습니다.

@app.route('/product/<int:product_id>') # 1)
def product(product_id):
    product = Product.query.get_or_404(product_id) # 2)
    return render_template('product.html', product=product)

 

1) URL 라우트를 정의하는 부분인데 앞서 보신거와는 달리 int:product_id 부분이 추가되 있습니다. 이 int:product_id는 URL 경로에서 정수형 product_id 값을 받아서 product 함수에 전달하는 기능을 합니다.

2) Product.query.get_or_404(product_id)는 product_id에 해당하는 제품을 데이터베이스에서 가져옵니다. 만약 해당 제품이 없으면 404 오류를 반환하여 "Not Found" 페이지를 표시합니다.

장바구니 담기

다음으로는 어떤 제품이 마음에 들었을 때 해당 상품을 장바구니에 담는 기능에 대해 설명하겠습니다.

@app.route('/add_to_cart/<int:product_id>')
def add_to_cart(product_id):
    product = Product.query.get_or_404(product_id)
    cart = session.get('cart', []) # 1)
    cart.append({'id': product.id, 'name': product.name, 'price': product.price}) # 2)
    session['cart'] = cart # 3)
    return redirect(url_for('cart')) # 4)

 

1) Flask의 session 객체를 사용하여 사용자의 세션에서 cart(장바구니) 데이터를 가져옵니다. session은 Flask가 제공하는 객체로, 사용자의 세션 데이터를 저장하고 관리합니다. session.get('cart', [])는 세션에서 cart 키의 값을 가져오며, 만약 cart 키가 존재하지 않으면 빈 리스트 []를 반환합니다.cart 변수는 사용자의 현재 장바구니 목록을 나타내는 리스트가 됩니다.

2) product 객체의 id, name, price 속성을 딕셔너리 형태로 장바구니 리스트에 추가합니다. cart 리스트는 이제 새로운 제품을 포함하게 됩니다.

3) session['cart']에 cart 리스트를 저장하여 사용자의 세션 데이터에 업데이트된 장바구니 정보를 반영합니다.

4) url_for('cart')는 cart 뷰 함수의 URL을 생성합니다. redirect 함수는 생성된 URL로 사용자를 리디렉션합니다. 제품을 장바구니에 추가한 후, 사용자는 장바구니 페이지로 이동하게 됩니다.

장바구니 확인

장바구니 확인 기능은 대부분 앞에서 사용했던 기능이나 함수입니다. 상세한 설명보다 여러분이 추측해 보시는 것도 좋을 것 같아서 숙제.. 비슷한 것으로 남깁니다.

@app.route('/cart')
def cart():
    cart = session.get('cart', [])
    total = sum(item['price'] for item in cart)
    return render_template('cart.html', cart=cart, total=total)

장바구니 비우기

장바구니에 담겨있는 상품을 모두 비우는 기능입니다. 전체 삭제 기능이죠. 지금까지 기능을 차근차근 개발을 잘 해오셨다면 충분히 이해하실 것이라고 생각합니다.

@app.route('/clear_cart')
def clear_cart():
    session.pop('cart', None)
    return redirect(url_for('cart'))

결론

이번 포스팅에서는 Flask로 미니 쇼핑몰을 만드는 과정에서 app.py 파일의 구성과 각 부분의 역할을 설명드렸습니다. Flask 애플리케이션을 설정하고, 데이터베이스 모델을 정의하며, 라우트를 작성하는 방법을 알아보았습니다. 이제 Flask를 통해 쇼핑몰을 개발하는 것을 1차적으로 마무리할 수 있습니다. 이제 배포하고 우리가 만든 미니 쇼핑몰을 테스트를 수행하도록 하겠습니다. 추가적인 기능이나 질문이 있다면 언제든지 댓글로 남겨주세요!

감사합니다!