연습 - 앱 만들기
이 연습에서는 반복적으로 애플리케이션을 만들고, 진행하면서 특정 개념에 집중합니다. 먼저 애플리케이션의 방문 페이지를 만들고 사용자가 사용할 양식을 표시하여 시작합니다.
일반적으로 Flask 애플리케이션의 진입점은 app.py라는 파일입니다. 이 규칙을 따르고 애플리케이션의 핵심을 만듭니다. 이를 위해 다음 단계를 수행합니다.
- 핵심 애플리케이션 만들기
- 애플리케이션의 경로 추가
- 사이트에 대한 HTML 템플릿 만들기
- 애플리케이션 테스트
핵심 애플리케이션 만들기
이전에 사용하던 Visual Studio Code 인스턴스로 돌아가 탐색기 탭에서 새 파일을 클릭하여 app.py라는 새 파일을 만듭니다.
중요
이 연습에서 처음으로 Visual Studio Code를 사용하여 Python 애플리케이션을 만드는 경우 Python 확장 및 Linter pylint 설치에 대한 메시지가 표시됩니다. 설치를 선택하여 각 추가 기능을 설치합니다.
Flask 애플리케이션을 만드는 코드를 추가합니다.
from flask import Flask, redirect, url_for, request, render_template, session app = Flask(__name__)
import 문에는 Flask 애플리케이션의 핵심인 Flask에 대한 참조가 포함되어 있습니다. HTML을 반환하려는 경우 한동안 render_template을 사용합니다.
app은 핵심 애플리케이션이 됩니다. 다음 단계에서 경로를 등록할 때 사용합니다.
경로 추가
애플리케이션은 하나의 경로 /를 사용합니다. 이 경로를 기본 또는 인덱스 경로라고도 하는데, 이 경로는 사용자가 도메인 또는 서버의 이름 외에 다른 항목을 제공하지 않을 경우 사용되기 때문입니다.
app.py의 끝에 다음 코드를 추가합니다.
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
@app.route를 사용하여 만들려는 경로를 표시합니다. 경로는 기본 경로인 /가 됩니다. 이 경로가 GET에 사용됨을 표시합니다. /에 대해 GET 요청을 받으면 Flask는 이 예제의 데코레이터 index 바로 아래에 선언된 함수를 자동으로 호출합니다. index 본문에는 index.html이라는 HTML 템플릿이 사용자에게 반환됨을 표시합니다.
양식에 대한 HTML 템플릿 만들기
Flask의 템플릿 엔진인 Jinja는 HTML을 매우 중점적으로 사용합니다. 따라서 이미 보유하고 있는 기존 HTML 기술과 도구를 모두 사용할 수 있습니다. 부트스트랩을 사용하여 페이지 레이아웃을 지정하고 좀 더 멋지게 만듭니다. 부트스트랩을 사용하면 HTML에서 다양한 CSS 클래스를 사용할 수 있습니다. 부트스트랩에 익숙하지 않은 경우 클래스를 무시하고 HTML을 주로 사용할 수 있으며, 이 점은 정말 중요한 부분입니다.
Important
HTML(HyperText Markup Language)은 웹 페이지를 만드는 데 사용되는 표준 생성 언어입니다. HTML은 웹 페이지를 구성하는 제목, 단락, 목록, 이미지, 링크 및 기타 요소를 만드는 일련의 태그와 특성으로 구성됩니다. 사용자가 웹 페이지를 요청하면 브라우저에서 HTML 코드를 읽고 이를 사용자가 상호 작용할 수 있는 시각적 웹 페이지로 렌더링합니다. HTML에 대한 자세한 내용은 HTML 기본 사항을 참조하세요.
Flask의 템플릿은 templates라는 적합한 폴더에 만들어야 합니다. 폴더와 필요한 파일을 만들고 HTML을 추가해 보겠습니다.
Visual Studio Code의 탐색기 도구에서 새 폴더를 선택하여 templates라는 새 폴더를 만듭니다.
방금 만든 templates 폴더를 선택하고 새 파일을 선택하여 폴더에 파일을 추가합니다.
파일 이름을 index.html로 지정합니다.
다음 HTML을 추가합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <title>Translator</title> </head> <body> <div class="container"> <h1>Translation service</h1> <div>Enter the text you wish to translate, choose the language, and click Translate!</div> <div> <form method="POST"> <div class="form-group"> <textarea name="text" cols="20" rows="10" class="form-control"></textarea> </div> <div class="form-group"> <label for="language">Language:</label> <select name="language" class="form-control"> <option value="en">English</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="ru">Russian</option> <option value="de">German</option> </select> </div> <div> <button type="submit" class="btn btn-success">Translate!</button> </div> </form> </div> </div> </body> </html>
위의 HTML에서 핵심 구성 요소는 사용자가 번역하려는 텍스트에 대한 textarea와 사용자가 대상 언어를 나타내는 데 사용할 드롭다운 목록(select)입니다. 언어를 더 추가하려는 경우 지원되는 언어 목록에서 다른 옵션을 참조할 수 있습니다. value 특성을 언어 코드(예: 폴란드어의 경우 pl)로 설정합니다.
애플리케이션 테스트
초기 사이트를 만들었으면 이제 테스트해야 합니다. Visual Studio Code 내 통합 터미널을 사용하여 좀 더 쉽게 작업을 수행합니다.
Ctrl-` 또는 Cmd-`(Mac)를 선택하여 통합 터미널을 엽니다.
다음 명령을 실행하여 Flask 런타임을 개발로 설정합니다. 즉, 변경 사항이 있을 때마다 서버가 자동으로 다시 로드됩니다.
# Windows set FLASK_ENV=development # Linux/macOS export FLASK_ENV=development애플리케이션을 실행합니다.
flask runhttp://localhost:5000으로 이동하여 브라우저에서 애플리케이션을 엽니다.
양식을 보실 수 있을 것 입니다. 축하합니다!