[Flask] HTML 파일 주기

Flask 서버를 만들 때, 항상

• static 폴더 (이미지, CSS 파일을 넣어둡니다.)
• templates 폴더 (html 파일을 넣어둡니다.) -주로 쓰는 것
• app.py 파일

이렇게 세 개를 만들어두고 시작해야한다.

 

templates, static 폴더 만드는 방법

 

만들 예정인 프로젝트 파일 오른쪽 마우스 클릭

 

 

Directory 혹은 한글이면 경로를 클릭

 

 

templates 파일 작성

 

 

같은 방식으로 static 작성 파일 두개를 만들어준다.

 

sdfsdfsd

 

app.py 파일에 들어가서

 

from flask import Flask

app = Flask(__name__)


@app.route('/')
def home():
    return '<button>나는 버튼이다</button>'


if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

 

'<button>나는 버튼이다</button>'

 

를 넣어주고 실행해본다.

 

 

실행 화면에 해당 화면이 출력된다.

 

그 다음 http://localhost:5000/ 해당 주소로 가 본다.

 

 

해당 사이트에 '나는 버튼이다' 버튼이 추가되었다.

 

어? 그러면

 

'<button>나는 버튼이다</button>'

 

이 부분에 html 코딩 하면 되는거 아닌가?

 

우선 정답 부터 말하자면 "아니다."

 

이유를 지금부터 설명해주겠다.

 

 

우선 templates 파일에 HTML 파일을 하나 새로 만들어 주자

 

이름은 index.html

 

여기에 생성된 HTML 파일 바디에

 

<h1>나의 첫 웹페이지!</h1>
<button>버튼을 만들자</button>

 

이 녀석들을 넣어보자

 

그 다음 다시 app.py 파일로 돌아와서

 

, render_template

 

render_template('index.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)

 

그 다음 실행!

 

아까 켜놨던 localhost:5000 사이트 가서 새로고침 해보자

 

 

어? 내가 만든 HTML 파일을 가져와서 읽어준다.

 

그럼 원래 우리가 보던 창이랑 뭐가 다르냐?

 

파이참에서 우리가 html 파일을 만들고 

 

 

해당 아이콘을 클릭하여 보던 창은 내 컴퓨터에 저장되어 있는 파일을 연 것 뿐이고. (ex. .jpg,.ppt 파일처럼)

 

localhost:5000 사이트를 통해 본것은 서버에서 주는 것을 우리가 보고있는것이다 (ex.네이버)

 

아 차이가 뭔지는 알겠다