⚙️ 실습 환경
1. jupyter notebook 사용 (가상환경 설정 안했음!)
2. flask 설치
3. 웹 페이지로 쓸 html 페이지와 jquery 파일 준비하기
# 참고.. 본인은 가상환경에 트라우마가 있기도 하고, 어차피 개인적인 연습 용도로만 사용하는 PC이므로,
별도의 가상환경은 세팅하지 않고, 그냥 jupyter notebook에 바로 flask 설치를 진행시켰다..
📁 디렉토리 세팅
아무래도 웹 페이지를 사용하게 되면, 정적인 주소를 사용하지 않으면 로딩이 안되는 바람에!
아래와 같이 디렉토리를 세팅했다.
📁 project 폴더
|---- 실습파일.ipynb
|---- templates 폴더
| |---- 사용할 html 파일들이 속함
|
|---- static 폴더
|---- jquery 파일이나 웹 페이지에 사용할 이미지 등이 속함
📄 실습파일.ipynb
from flask import Flask, render_template
import os
app = Flask(__name__, static_folder="static", static_url_path="/static")
template_dir = os.path.abspath("templates")
app.template_folder = template_dir
@app.route('/')
def main():
return render_template("main.html")
@app.route('/melong')
def melong():
return render_template("melong.html")
if __name__ == "__main__":
app.run()비교적 간단하게 구성되어 있다.
static 관련 코드는 정적 주소를 사용할 친구들을 위해 사용했고,
template 관련 코드는 웹 페이지들을 위해서 사용했다.
@app.route('/') 와 같이, 데코레이터와 같이 온 엔드 포인트 주소를 입력하면,
바로 아래 코드에서 정의한 함수들이 작동하는 방식으로 보면 될 것 같다.
저 코드 그대로 실행하게 되면 기본 주소가 http://127.0.0.1:5000일텐데,
그 뒤에 / 나 /melong을 붙이면 각각 main() 함수와 melong() 함수가 실행되며,
이에 따라 서로 다른 템플릿 페이지를 출력하게 되는 것이다.
이번 포스팅에서 다룰 내용은 기본 주소로 들어가면 메인 페이지가 출력되고,
메인 페이지에 있는 버튼을 누르면 /melong 으로 이동하도록 하는 것이다.
📄 main.html
<!DOCTYPE html>
<html>
<head>
<title>테스트페이지</title>
<script src="{{ url_for('static', filename='jquery-3.6.1.min.js') }}"></script>
<style>
.title {
margin-left: 40px;
margin-bottom: 50px;
width: 850px;
background-color: white;
text-align: center;
border-radius: 10px;
}
body {
background-image: url("{{ url_for('static', filename='bonobono.png') }}");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 1400px;
margin: 0;
padding: 0;
}
h1 {
padding: 40px;
}
.btncontainer {
margin-left: 40px;
margin-bottom: 50px;
}
button {
padding: 20px;
padding-left: 20px;
font-weight: bold;
font-size: large;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="title">
<h1> Flask 테스트 페이지~ </h1>
</div>
<div class="btncontainer">
<button class="melongBtn">메롱 띄우기</button>
<script>
$(document).ready(function() {
$(".melongBtn").click(function() {
window.location.href = "/melong";
});
});
</script>
</body>
</html>css는 볼 것 없지만, 하나 주목할 점은 background-image 부분이다.
정적 주소를 이용해 요소들을 가져다 쓰려면 저런 방식으로 사용하면 된다.
그 다음, 누르면 /melong으로 이동하게 해주는 '메롱 띄우기' 버튼을 만들었다.
script 코드를 사용했기 때문에 jquery 파일을 꼭 불러와야 한다.
📄 melong.html
<!DOCTYPE html>
<html>
<head>
<title>Update</title>
<script src="{{ url_for('static', filename='jquery-3.6.1.min.js') }}"></script>
</head>
<body>
<script>
$(document).ready(function() {
alert("메롱");
window.history.back();
});
</script>
</body>
</html>메인 페이지에서 버튼을 누르면 이동하게 되는 페이지이다.
사실 아무 내용 없이, 페이지가 로드되면 '메롱'이라고 알림 창을 띄우고,
확인 버튼을 누르면 이전 페이지로 돌아가게 된다.
🛠️ 작동 과정
파일을 실행시키면 아래에 로컬 주소가 나오는데, 누르거나 입력해서 이동하면 된다.
기본 주소는 엔드포인트가 / 이기 때문에, main() 함수가 작동하여 메인페이지로 이동한다.
아까 만들어둔 누르고 싶게 생긴 메롱 띄우기 버튼이 있다.
버튼을 누르면, /melong으로 이동하여 해당 메시지를 띄워주는 melong.html을 출력한다.
확인 버튼을 누르면 다시 메인페이지로 돌아간다.
📌 마무리
이전에는 자바스크립트로 백엔드 작업을 해서 Node.js를 주로 이용했었는데,
앞으로 파이썬을 많이 쓰게 될 예정이라, 간단히 Flask 먼저 맛을 봤다.
사실 프로젝트 아닌 프로젝트 느낌으로 노션 업데이트용 웹 애플리케이션을 만들어보고 있는데,
로컬로는 Flask를 이용해서 작업이 거의 다 끝난 것 같으니 배포도 한번 도전해 볼 생각이다 😅
