프로젝트, 연구/도서관 관리 사이트

[도서관 관리 사이트] 2. 웹페이지 설계, 프로젝트 폴더 구성

CSE 2025. 10. 11. 17:50

이전 글에서 이 프로젝트가 어떤 내용인지 간단히 설명했었다.

 

[Flask + mySQL] 도서관 관리 사이트 만들기 1

학교 데이터베이스 수업의 과제로 '도서관 관리 사이트 만들기'를 하게 되었다. 1. 기능과제에서 요구한 필수 기능은 아래와 같다.로그인기능 • ID와 비밀번호를 이용해 로그인이 가능해야 한다

april2901.tistory.com

 

 

대략적인 table 구조는 이전 글에서 정했으니 웹페이지를 어떻게 구성할지, 대략적인 디자인은 어떻게 할지를 그려보았다.

 

 

이제 이번 글부터는 실제로 개발을 시작한다.


0. 필수 패키지 설치

먼저 프로젝트에 쓰일 모듈들을 프로젝트 폴더의 가장 상위 경로에서 pip를 사용해 다운받아야 한다.

pip3 install flask 
pip3 install mysql-connector-python 
pip3 install dotenv

1. 폴더 구조

프로젝트 폴더의 기본 구조는 아래와 같이 구성했다.

 

 

1-1. 전체 프로젝트 폴더

전체 DB_P2라는 프로젝트 폴더에 app 폴더와 .env , .gitignore , run.py , test_db.sql 파일이 존재한다.

DB_P2 폴더
        app 폴더
        .env 파일
        .gitignore 파일
        run.py 파일
        test_db.sql 파일

 

app 폴더는 프로젝트의 대부분의 파일이 포함된다. 밑에서 좀 더 자세한 설명을 할 예정이다.

 

.env 파일은 환경변수 파일로, 환경설정에 필요한 변수나 비밀번호 등 중요한 변수를 저장해놓는다.

 

.gitignore 파일은 github에 push할 때 포함시키지 않을 파일들에 대한 정보를 저장한다.

예를 들어 위의 .env파일 등이 있다.

 

run.py 파일은 로컬에서 개발하며 실행시킬 용도의 간단한 파일이다.

이 파일이 직접 실행될 때만 유효하다.

from app import create_app

app = create_app()

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

 

test_db.sql 파일은 sql쿼리가 들어있는 파일인데, 사이트를 만들고 테스트하기 위해 미리 insert문을 통해 데이터를 넣어놓는 용도이다.

 

 

 

 

 

1-2.  app 폴더

app 폴더는 templates라는 폴더와 여러 기능 별 폴더, __init__.py 파일, db.py 파일로 이루어져 있다.

 

먼저 __init__.py 파일은 flask프로그램을 시작하는 create_app() 함수가 있다.

이 파일이 전체 실행의 시작점이 되는 파일이다.

 

db.py는 sql쿼리들을 함수로 만들어 모아놓은 파일이다.

 

여러 기능별 폴더는 위 폴더구조 사진에서 보이듯이 main , auth 처럼 기능에 따라 폴더를 구분해놓은 것인데, main에서는 기본 홈페이지 등을 다루고, auth에서는 로그인 및 회원가입 등과 관련된 기능을 다루기 위해 구분해놓았다.

 

templates폴더는 html파일들을 저장하는 폴더이다. templates폴더 밑에도 기능별로 폴더를 나눠놓아 구분과 관리가 편하게끔 되어있다.

 

 

2. 실행 테스트

구축해놓은 폴더 구조가 유효한지 테스트 해보기 위해 최소한의 코딩을 통해 그 여부를 확인해보았다.

테스트 해볼 내용은 미리 test_db.sql파일에 insert문으로 넣어놓은 데이터 2개가 homepage.html에서 잘 보이는지 확인하는 것이다.

 

2-1. sql파일 적용

test_db.sql파일의 내용은 아래와 같다.

create database if not exists library_db;
use library_db;

create table user(
    id int auto_increment primary key ,
    pw varchar(20) not null,
    role int not null
);

insert into user(pw, role) values('pw1', 1);
insert into user(pw, role) values('pw2', 0);

 

먼저 이 파일을 실행시켜 sql서버에 넣어야한다.

 

터미널에서 아래 명령어를 실행시켜 파일을 적용시킨다. 

./mysql -u root -p < 파일경로/test_db.sql

 

적용이 잘 되었는지 확인을 위해 sql 내에서 아래 명령어들을 실행해본다.

show databases;
use library_db;
select * from user;

 

2-2. 기본 코드 작성

2-2-1. db.py

아래처럼 sql 서버와 연결을 해주는 함수 get_db_connection()과 user table의 모든 데이터를 가져오는 쿼리가 담긴 함수 test_func()를 만들었다.

test_func()는 쿼리 실행 결과를 리턴해준다.

import mysql.connector
from flask import current_app

def get_db_connection():
    conn = mysql.connector.connect(**current_app.config['DB_CONFIG'])
    return conn


def test_func():
    conn = get_db_connection()
    cursor = conn.cursor()
    query = "select * from user"
    cursor.execute(query)
    result = cursor.fetchall()
    cursor.close()
    conn.close()
    return result

 

2-2-2. main/routes.py

위의 test_func()의 결과를 user_list에 담는다.

flask에서 지원하는 render_template라는 것을 이용해 사용할 html 파일의 경로와, html 파일 내부에서 쓸 변수를 인자로 넘길 수 있다.

여기서 파일의 경로찾기는 기본적으로 templates폴더에서 시작된다.

따라서 아래 코드처럼 main부터만 경로를 작성해도 충분하다. 

from flask import Blueprint, render_template
from app import db

main_bp = Blueprint('main', __name__)

@main_bp.route('/')
def homepage():
    user_list = db.test_func()
    return render_template('main/homepage.html', users = user_list)

 

 

2-2-3. templates/main/homepage.html

매우 간단히 작성한 html코드이다.

render_template에서 인자로 준 users를 이용하는 것을 볼 수 있다.

<!DOCTYPE html>
<html>
<body>
    <h2>User List</h2>
    <ul>
        {% for user in users %}
            <li>{{ user }}</li>
        {% endfor %}
    </ul>
</body>
</html>

 

2-2-4. __init__.py

db.py 파일의 get_db_connection() 함수에서 사용할 연결관련 설정을 한다.

os.environ.get을 통해 .env파일에 저장되어 있는 변수의 값들을 가져온다.

또 main/routes.py에서 만들었던 blueprint라는 것을 등록해 사용가능하게 한다.

blueprint는 url과 기능들을 합쳐서 하나로 묶어놓은 것 같은 개념이다.

from flask import Flask, render_template
import os

def create_app():
    app = Flask(__name__)

    # .env 파일에서 환경 변수 불러오기
    app.config['DB_USER'] = os.environ.get('DB_USER')
    app.config['DB_PASSWORD'] = os.environ.get('DB_PASSWORD')
    app.config['DB_HOST'] = os.environ.get('DB_HOST')
    app.config['DB_NAME'] = os.environ.get('DB_NAME')

    # db.py에서 사용할 DB 설정 저장
    app.config['DB_CONFIG'] = {
        'user': app.config['DB_USER'],
        'password': app.config['DB_PASSWORD'],
        'host': app.config['DB_HOST'],
        'database': app.config['DB_NAME']
    }

    from .main import routes as main_routes
    app.register_blueprint(main_routes.main_bp)

    return app

 

2-3. 최종 테스트

이제 run.py를 실행 시키면 아래와 같은 터미널 창을 확인할 수 있다.

그리고 터미널에 보이는 주소로 들어가면 아래처럼 결과가 나와 잘 작동했다는 것을 알 수 있다.