[Flask] 템플릿을 이용해보자 - render_template

안녕하세요 Dibrary입니다.

Pycharm 설치를 하셨다면, 이번에 Flask를 이용해서 화면을 띄워볼 수 있습니다.

먼저 Pycharm을 실행해서 각자 알맞는 프로젝트로 가주세요. (생성하셔도 됩니다)

 

간단한 코드를 작성해 보았습니다.

근데 이게 왠걸? 빨간 줄이 나오죠?

아래에 Terminal로 들어가서 pip install flask를 입력 해 줍니다.

설치가 완료되고 파일을 닫았다가, 다시 열면 빨간 줄이 없어집니다.

그리고, templates라는 폴더를 만들어야 합니다.
해당 폴더 안에는 render_template로 지정한 hello.html파일이 있어야 하구요.

html파일 내용은 아래와 같이 써주었습니다.

이제 파일에서 마우스 오른쪽으로 run을 시켜봅니다.

아래에 이런 글자가 나온다면 성공입니다.

이제 아무 웹 브라우저를 열어서 127.0.0.1:5000/hello를 입력하셔도 되고,

127.0.0.1/hello/Anonymous 이렇게 입력하셔도 됩니다.

그냥 글자만 return한 경우랑 뭐가 다르냐 싶죠?

디자인이 들어가면 얘기가 달라집니다.

html 코드 수정

우선 html코드만 조금 수정 해 보았습니다.

어우 글자 크기가 달라졌죠? h1을 적용해서 그렇습니다.

참고로, 변경이 되면, Flask 실행을 중지하고 다시 실행하셔야 합니다. 중지는 위에 정지 버튼을 누르면 됩니다.

실행중지 버튼

이렇게 수정하면

이렇게 적용이 된다는 것이죠. 

CSS까지 적용하면 다채로운 색상의 화면이 나올 겁니다.

 

코드 분석을 해보겠습니다.

여기서 중요한 포인트는, 어떤 방법으로 html에 글자를 보냈느냐 입니다.

1. @app.route('/hello/<name>')

이 코드는 url에 적힌 name부분의 글자를 name으로 받는겁니다.

실질적으로, def hello (name = None): 이 함수 전달인자의 name으로 들어가는 것이죠.

None은 name이 없는 경우에 None을 사용하라는 default 의미 입니다.

 

2. return render_template('hello.html', name=name)

이 코드는 hello.html 파일로 렌더링 하는데, name이라는 변수를 html파일의 name변수에 매칭한다는 것입니다.

 

html파일에서 

3. {{ name }}

이 코드 부분으로 사용자가 입력한 글자가 들어오는 것을 확인 할 수 있습니다.

즉, 변수는 render_template에서 설정하고, {{ }}로 감싸서 사용하면 어디든 쓸 수 있다는 것입니다.

 

여기서 {{ }}를 써야 하는 이유는, Flask가 jinja template을 사용하고 있기 때문입니다.

Flask는 뭔가 일본틱한 느낌이 나는 jinja(신사) 템플릿엔진을 사용합니다.

 

자유롭게 Flask로 만든 웹 화면을 구현하려면 jinja 템플릿에서 변수나 표현식의 결과를 나타내는 방법을 공부해야 합니다.

 

우선 이번시간에는 간단히 화면을 띄우는 데 까지 해보았습니다~