저번 시간에 이어 플라스크(Flask)를 이용하여 애플리케이션에 템플릿을 추가하고 라우팅을 확장하여 웹페이지를 더 그럴듯하게 확장해볼께요. 이 단계에서는 플라스크의 render_template 기능을 사용할 예정이며 HTML 템플릿을 렌더링하고, 다양한 URL 경로에 대한 처리, 즉 라우팅을 알아보도록 하겠습니다.
1. HTML 템플릿 생성
먼저 templates 폴더 안에 HTML 템플릿 파일을 생성합니다.
여기서는 index.html 이라는 파일을 만들어 볼께요
만약 vscode(비주얼 스튜디오)로 코드로 작성 중이시라면 ! + Shift + Tab 을 누르시면 기본 코드가 다음과 같이 짠하고 나타나요
이 상태에서 아래와 같이 코드를 수정해 봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to My Memo App !!</title>
</head>
<body>
<h2>나의 메모 앱에 오신것을 환영해요</h2>
<p> 이것은 온라인 메모장 앱입니다.</p>
</body>
</html>
이렇게 HTML 파일은 기본적인 웹페이지 구조를 기반으로 수정되었으며, 웹페이지 남기고 싶은 메시지를 포함해 주시면 됩니다.
2. 플라스크 애플리케이션의 템플릿 렌더링
이제 Flask 애플리케이션에서 루트 URL('/') 경로에 대한 뷰 함수를 수정하여, render_template() 함수를 임포트하고 실행해서 index.html 템플릿을 렌더링해보도록 할께요. 수정한 부분이 정상적으로 동작하는지를 확인하기 위해 플라스크 서버를 재실행해야 합니다.
먼저 저번시간에 입력한 app.py를 다음과 같이 수정해 줍니다.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
그러고 나서 플라스크 서버를 아래와 같이 재실행 해줍니다.
그러면 다음과 같이 내용이 잘 표현되는 것을 알 수 있습니다.
3. 추가적 라우팅 설정하기
우리는 웹페이지를 만들면서 한가지 페이지에 머물러 있지 않습니다. 더 많은 추가적인 페이지를 위해 다음 아래와 같이 '/about' 이라는 경로의 페이지를 설정해 보도록 하겠습니다.
물론 app.py 맨 아랫부분에 추가되게 코딩합니다.
@app.route('/about')
def about():
return '이것은 간단하게 메모를 할 수 있는 기능의 앱입니다.'
이후 app.py를 저장하고 플라스크 서버를 재실행 해줍니다. 참고로 파일이 수정될 때 마다 서버를 재실행해야 함을 잊지마세요
그러고 나서, http://127.0.0.1:5000/about 주소로 접근하면, 위에 저장한 메시지가 그대로 표현되는 것을 보실 수 있습니다.
3. 데이터베이스(Database) 연동 및 모델 정의
이번 단계는 애플리케이션에 MySQL 데이터 베이스를 연동하고, CRUD 기능을 구현해 봅니다.
많은 데이터를 효율적인 관리를 위해서는 데이터베이스는 필수적 요소입니다.
먼저, MySQL 데이터 베이스 서버에 my_memo_app 데이터베이스를 새로 생성할 것이며, 이 데이터베이스는 애플리케이션에서 사용한 메모 데이터가 저장되는 곳이 됩니다.
참고로, MySQL 설치에 관한 내용은 생략토록 하겠습니다.
MySQL Command Line Client를 이용해 다음과 같이 데이터베이스를 생성합니다.
그리고 app.py 파일을 수정하기에 앞서 Flask-SQLAlchemy와 pymysql를 pip 명령어로 설치를 해야합니다.
]# pip install Flask=SQLAlchemy
]# pip install pymysql
그런 다음 app.py 파일에 데이터베이스 연동 및 모델 정의를 추가해줍니다.
from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
# Database 설정
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://root:password@localhost/my_memo_app'
db = SQLAlchemy(app)
# 데이터 모델 정의
class Memo(db.Model):
id = db.Column(db.Interger, primary_key=True)
title = db.Column(db.String(100), nullable=False)
content = db.Column(db.String(1000), nullable=False)
def __repr__(self):
return f'<Memo {self.title}>'
# 기존 라우트
@app.route('/')
def home():
return render_template('index.html')
@app.route('/about')
def about():
return '이것은 간단하게 메모를 할 수 있는 기능의 앱입니다.'
# 데이터베이스 생성
with app.app_context():
db.create_all()
# Database 설정 이하는 여러분의 접속 환경에 따라 변경해 주시면됩니다.
SQLALCHEMY_DATABASE_URI는 MySQL 데이터베이스에 연결하는 데 필요한 정보를 포함합니다.
여기서 username, password, localhost, my_memo_app은 각각 사용자 이름, 비밀번호, 호스트 주소, 데이터베이스 이름에 해당하는 부분입니다.
이들을 제 환경에 맞게 설정하시면 됩니다.
#데이터 모델 정의 부분은 플라스크 애플리케이션에서 사용할 데이터 모델을 정의하는 부분입니다. 위 예시에서는 Memo라는 모델을 생성해서 메모의 제목과 내용을 저장하는 테이블을 정의하게 됩니다.
그리고 아랫부분에 with app.app_conext() 부분은 플라스크 애플리케이션 컨텍스트 내에서 db.create_all() 메서드를 호출하여 데이터베이스 테이블을 생성하도록 하게됩니다.
그러면 mysql 커맨드에서 테이블의 상태를 확인해보겠습니다.
지금은 아무것도 없는 상태입니다.
이 상태로 위 app.py가 실행되기 위해 Flask 서버를 실행해봅니다.
그리고 다시 MySQL Command로 테이블을 확인합니다.
보는김에 테이블의 구조를 볼까요? desc memo 명령어로 조회를 해볼께요
데이터 모델에서 정의한 그대로 테이블에 반영된 것을 확인할 수 있겠네요
그럼, 다음에 또 만나요 감사합니다. ^^
'IT' 카테고리의 다른 글
| Flask - 애플리케이션(메모앱) 만들어보기 #5 (0) | 2024.11.19 |
|---|---|
| Flask - 애플리케이션(메모앱) 만들어보기 #4 (1) | 2024.11.17 |
| Flask - 애플리케이션(메모앱) 만들어보기 #3 (1) | 2024.11.17 |
| Flask - 애플리케이션(메모앱) 만들어보기 #1 (2) | 2024.11.14 |
| python 가상환경 설정하기(venv 모듈 사용하기) (4) | 2024.11.04 |
