DoITgrow

[파이썬 활용 웹 개발] 플라스크(Flask) 개발 환경 설정 - DB 공유/관리 시스템② 본문

백엔드 & 프론트엔드 & DevOps

[파이썬 활용 웹 개발] 플라스크(Flask) 개발 환경 설정 - DB 공유/관리 시스템②

김수성 (Kim SuSung) 2021. 12. 14. 16:31
반응형

들어가며

오늘은 본격적인 웹 개발을 위한 사전 준비로 가상환경과 패키지를 준비하는 것에 대해 포스팅하려고 합니다. 또한 간략히 만든 웹 페이지를 자체 서버를 통해 열어보는 것까지 본 포스팅에서 다루고자 합니다.

 

▼ 앞으로 구현할 웹의 상세 내용은 첫번째 포스팅을 통해서 파이썬을 이용하여 앞으로 만들어볼 웹 시스템을 간략히 소개드렸으니 참고하시면 될 것 같습니다.

2021.12.11 - [백엔드 & 프론트엔드 & DevOps] - [파이썬 활용 웹 개발] 인트로 - DB 공유/관리 시스템①

 

[파이썬 활용 웹 개발] 인트로 - DB 공유/관리 시스템①

배우고 싶은 것은 많은데 시간은 한정되어 있고, 또 회사 일과 병행하다 보면 하루 24시간이 너무 짧다는 생각이 부쩍 드네요. 딥러닝 알고리즘과 같이 개념을 공부하는 것도 중요하지만 결국 누

doitgrow.com

패키지 설치

설치할 주요 패키지는 2개가 있습니다. 웹 개발 프레임워크인 "Flask" 패키지, 데이터베이스를 쉽게 다룰 수 있는 "SQLAlchemy" 패키지, 이 2개만 있으면 우리가 만들고자 하는 시스템을 구현할 수 있습니다. 여기서 "SQLAlchemy" 패키지만 따로 설치해서 Flask에 DB를 연결할 수 있지만 본 포스팅에서는 조금 더 편하게 사용할 수 있는 Flask-Migrate 패키지를 활용한 방법으로 소개드리려고 합니다. (다양한 방법이 있다보니 정답은 없고, 이렇게도 사용할 수 있구나로 편히 생각하면 좋을 것 같네요.)

아래와 같이 "Flask" 패키지와, "Flask-Migrate" 패키지 2개를 설치하면 필요한 패키지 설치는 모두 끝납니다. "Flask-Migrate" 패키지를 설치하면 "SQLAlchemy" 패키지도 함께 설치되므로 2개의 패키지만 설치하면 됩니다.

>>> pip install Flask, Flask-Migrate

간단한 웹 사이트 빠르게 만들어 보기

# \MyWeb\app.py

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "웹 페이지 만들기"

if __name__ == "__main__":
	app.run(host="127.0.0.1", port=5000, debug=True)

▲ 위 코드는 플라스크를 이용하여 제일 간단히 웹을 구현할 수 있는 코드입니다. 몇 줄의 코드만으로 간단한 웹 페이지를 오픈할 수 있습니다. 'app = Flask(__name__)' 코드는 현재 파이썬 스크립트에서 가장 기본적인 웹 어플리케이션 객체를 생성하는 코드입니다. 이렇게 생성한 객체를 통해 앞으로 웹사이트 내에서 자유롭게 이동할 수 있는 통로도 여러개 만들거나 데이터베이스를 연결을 할 수 있습니다. 

 

코드를 실행하면 아래와 같이 터미널에서 서버가 가동되고 있는 모습을 확인할 수 있습니다.

이제 크롬이나 기타 웹 브라우저를 통해 http://127.0.0.1:5000/ 또는 http://localhost:5000/ 을 입력하여 내가 만든 웹사이트에 접근이 가능합니다.

▼ 아래 코드는 만들어진 웹 사이트에 들어가기 위해 대문을 두드릴 경우, 어떤한 대꾸를 하느지를 구현하는 부분입니다.

'@app.route("/")' 데코레이터를 작성할 때, "/" 부분에 어떤 것을 작성하느냐에 따라 두드릴 대문의 위치를 바꿀 수 있습니다. "/" 는 가장 기본적인 대문으로 우리가 "127.0.0.1:5000" 주소로 웹을 오픈한다고 하면 "127.0.0.1:5000/"을 입력하면 아래에 정의한 함수 코드가 실행됩니다. 즉, 웹 페이지에 "웹 페이지 만들기"라는 글자가 출력됩니다.

# \MyWeb\app.py

@app.route("/")
def index():
    return "웹 페이지 만들기"

이 뿐만 아니라 만약에 우리가 회원가입을 하는 페이지를 만들고 싶다면 아래와 같이 의미를 맞추어 새로운 대문을 만들 수도 있습니다. 아래와 같이 새로운 대문을 만들고, 이 안에 서버에서 할 일을 코딩해주면 되는 것이죠.

이제 아래의 대문으로 들어가려면 "127.0.0.1:5000/register"로 입력하면 됩니다.

# \MyWeb\app.py

@app.route("/register")
def register():
    # 내용 생략
    # 회원가입 정보를 데이터베이스에 저장하는 코드 등 구현

더욱 웹 사이트 같이 만들기

▼ app.py가 있는 폴더에 templates 폴더를 만들고, 여기 안에 index.html 이란 파일을 만들어서 아래와 같이 간단한 HTML 파일을 작성해 볼 수 있습니다.

<!-- \MyWeb\templates\index.html -->

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>웹사이트 만들기</h1>
    <p>나의 첫번째 웹사이트</p>
    <input type='text' placeholder="이름"></button>
    <input type='button' value='버튼'></button>
</body>
</html>

▼ 이후 app.py 파일로 돌아와서 몇 가지 코드를 추가해 줄게요. 아래와 같이 오른쪽에 주석을 달은 것과 같이 일부 코드를  추가하고, 변경했습니다. 여기서 일부 코드를 설명드리자면 'render_template' 함수는 플라스크에 포함되어 있는 기본 함수입니다. 별도의 파일로 저장하고 있는 HTML을 렌더링하여 사용자에게 리턴해주는데, 기본적으로 실행하는 app.py와 같은 폴더에 있는 templates 폴더를 검색하여 html 파일을 찾습니다. 이것은 플라스크에 기본적으로 세팅되어 있는 내용이라 규칙에 맞추어 사용하면 됩니다. (만약 templates 폴더명을 바꾸거나 다른 곳에 html 파일을 넣어놓을 경우 호환이 되지 않습니다.)

여기서 render_template 함수는 가장 기본적인 형태로 사용했지만 나중에는 변수도 함께 넣어주어 HTML 파일이 경우에 따라서 다르게 출력되도록 구현할 예정입니다.

from flask import Flask
from flask import render_template # <-- 추가

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html") # <-- 변경

if __name__ == "__main__":
	app.run(host="127.0.0.1", port=5000, debug=True)

위 코드를 실행하고 웹 사이트에 접속해보면 이제 아래와 같이 조금 웹 사이트스러운 결과를 얻을 수 있습니다.

앞으로 CSS를 이용하여 꾸미기도 하고, 자바스크립트를 이용해 더 동적인 웹 사이트를 만들어볼 예정입니다.

향후 계획

이번 포스팅은 여기까지로 마치고, 그 다음에는 CSS를 사용하여 웹사이트를 간단히 디자인 해볼 예정입니다. 사실 CSS를 처음부터 사용하여 웹 사이트를 디자인하려면 굉장히 많은 시간이 필요합니다. 따라서 저는 CSS를 어느정도 모듈화해서 웹 사이트에 필요한 기능들만 쉽게 가져다 쓸 수 있게 해논 Bootstrap 프레임워크를 활용할 계획입니다. 그럼 자세한 내용은 또 다음에 포스팅하도록 하겠습니다. 오늘도 긴 글 읽어주셔서 감사합니다.

반응형
저작자표시

'백엔드 & 프론트엔드 & DevOps' 카테고리의 다른 글

[파이썬 활용 웹 개발] 인트로 - DB 공유/관리 시스템①  (0) 2021.12.11
Window에서 리눅스(Linux)를 실행하는 방법 (feat. 우분투)  (0) 2021.10.14
티스토리(Tistory)의 도메인 주소를 원하는 것으로 변경하기  (0) 2021.09.22
'백엔드 & 프론트엔드 & DevOps' Related Articles more
Comments