이번 글에서는 이전에 다뤘던
Flask 프레임워크로 내 컴퓨터를 서버로 만들어 보았던 것에서
좀 더 심화된 내용을 다루려고 한다.
그렇기 때문에 이전 글을 참고해 Flask 프레임워크
기본 틀을 활용해 내 컴퓨터를 서버로 만드는 과정까지 완료해줘야 한다.
웹 / 내 컴퓨터를 서버로 만들고 접속하기/ 웹서버 Flask 프레임워크로 구동하기/ 파이썬으로 웹 서버 만들기
prac 프로젝트에
폴더 2개를 생성할 것이다.
'static 폴더'와 'templates' 폴더를 생성해줄 것이다.
폴더 이름은 용도에 따라 알아보기 쉽게 마음대로 이름을 정해도 좋다.
프로젝트에 오른쪽 마우스를 눌러
[New] -> [Directory]를 눌러 새폴더를 생성해준다.
만들고자 하는 폴더의 이름을 입력하고 엔터를 누른다.
static 폴더에는 CSS나 이미지 파일들을 담아둘 때 사용할 것이다.
그리고 templates 폴더에는 HTML 파일들을 담아둘 때 사용할 것이다.
2개의 폴더를 생성해주면 아래와 같이 보여져야 한다.
templates 폴더에 index.html 파일을 생성한다.
app.py에 작성했던 Flask 기본 틀을 수정해줄 것이다.
<Flask 프레임워크 기본 틀>
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'HwanE 전용 서버입니다'
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
import 부분에 쉼표( , )를 찍고 render_template 을 추가해준다.
여기서 잠깐 집고 넘어가자.
render_template 은 무엇을 하는 것일까?
웹을 만들 때 클라이언트, 즉 사용자에게 보여지는 부분과
사용자에게 보여지지 않고 뒤에서, 백엔드에서 처리하는 부분을 나누기 위해서
'template' 템플릿이라는 기능을 Flask에서 제공한다.
render_template을 사용하지 않으면 애플리케이션 코드에 HTML 코드를 함께
적어야 하는데, 그것은 가독성이 떨어진다.
render_template을 사용하면 Flask에서 보여지는 부분과 처리하는 부분을 나눌 수 있다.
템플릿에 사용되는 파일들은 'templates'라는 이름의 디렉터리에 저장되는데
여기엔 .html 파일들이 저장된다.
css파일들은 'static'이라는 이름의 디렉터리(폴더)에 저장된다.
그렇기 때문에 우리는 templates라는 폴더를 생성하고
그 안에 html 코드가 적힌 파일들을 넣어야 한다.
그래야 app.py 파일에서 html 코드 파일을 가져와 렌더링할 수 있게 되는 것이다.
그리고 return 값에 render_template('index.html') 을 작성해주고
브라우저에 가서 확인해보자.
브라우저에서 확인해보면 이전과
바뀌었다는 것을 알 수 있다.
바뀐 내용은 내가 위에서 생성했던
index.html 파일에 작성한 코드로 바뀌었다.
render_template 라는
Flask 프레임워크에서 미리 만들어둔 함수를 이용하게 되면
render_template( ' ' ) 안에 있는 html 파일을 찾아다가 해당 서버로 접속한
클라이언트한테 보여준다.
조금 더 설명을 하자면
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
여기서, 클라이언트가 주소창에 ' http://localhost:5000/ '라는
우리가 만든 서버의 주소를 입력해서 들어오면
def home( ) 이라는 함수를 실행시킨다.
그 함수는 바로 return으로 결과 값을 반환하는데,
그 리턴 값이 render_template('index.html')인데,
render_template는 index.html 에서 코드를 가져와서 return을 해준다.
브라우저는 리턴된 html을 받아와 코드에 맞게 그려준다.
그렇다면 아래의 2개 사진의 차이점은 무엇일까?
1.
2.
우선 1번은 우리가 만든 서버이고, 2번은 html 파일이다.
정답이 나왔다. 1번은 서버이기 때문에 서버 컴퓨터에 가지고 있던 index.html 파일을
서버로부터 받아와서 브라우저가 그린 것이고,
2번은 그냥 index.html 파일이 내 컴퓨터에 있는데, 그 html 파일을
마우스로 더블 클릭해 연 것이다.
둘은 엄연히 다르다.
댓글