Flask로 간단한 로그인 폼 만들어보기

개요

Flask를 이용해서 아주 기본적인 로그인 폼을 구현하는 실습 수업을 들었다.
사용자가 아이디/비밀번호를 입력하면 그 값을 그대로 결과 페이지에 출력해주는 실습용 예제다.
오늘 배운 핵심 개념은 Flask와 Jinja 두 가지다.

Flask란?

Flask는 파이썬으로 웹 서버를 만들 수 있게 해주는 마이크로 웹 프레임워크다.
이름답게 최소한의 기능만 기본으로 제공하고, 필요한 기능은 직접 추가해서 쓰는 구조다.

• URL 주소(라우트)마다 어떤 파이썬 함수를 실행할지 연결해둔다
• 사용자가 보낸 요청(GET, POST 등)을 받아서 처리하고 응답을 돌려둔다
• render_template()을 이용해서 HTML 파일과 파이썬 데이터를 연결해준다

Jinja란?

Jinja2는 Flask 안에서 기본으로 쓰이는 템플릿 엔진이다.
HTML 파일 안에 {{ }} 같은 특수 문법을 넣어두면, 파이썬에서 넘겨준 변수 값을 그 자리에 채워서 완성된 HTML을 만들어준다.

• {{ 변수명 }} : 파이썬에서 넘긴 변수를 HTML에 출력
• 정적인 HTML 파일을 동적으로 바꿔주는 역할
• render_template("result.html", user_id=user_id)처럼 파이썬에서 값을 넘기면, result.html 안의 {{ user_id }} 자리에 그 값이 들어감

전체 코드

app.py

from flask import Flask, render_template, request
app = Flask(__name__)

@app.route('/')
def index():
    return render_template("index.html")

@app.route("/login", methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        user_id = request.form.get('username')
        user_pw = request.form.get('password')
        return render_template("result.html", user_id=user_id, user_pw=user_pw)

    return render_template('login.html')

app.run(

코드 설명

• from flask import Flask, render_template, request
  Flask 사용에 필요한 3가지를 불러옴. Flask는 서버 객체 생성용, render_template은 HTML 파일을 불러와서 렌더링하는 함수, request는 클라이언트가 보낸 요청 정보(폼 데이터 등)를 담고 있는 객체.

• app = Flask(__name__)
  Flask 애플리케이션 객체 생성. __name__은 현재 실행 중인 파일 이름을 넘겨서, Flask가 템플릿·정적 파일 위치 등을 찾을 기준점으로 삼음.

• @app.route('/')
  데코레이터. / 주소(루트 페이지)로 요청이 들어오면 바로 아래 함수를 실행하라는 뜻.

• def index(): return render_template("index.html")
/로 접속하면 templates 폴더 안의 index.html을 렌더링해서 응답으로 돌려줌.

• @app.route("/login", methods=['GET', 'POST'])
/login 주소는 GET, POST 두 방식의 요청을 모두 받도록 설정. 기본값은 GET만 허용이라, POST를 받으려면 명시적으로 적어줘야 함.

• def login():
/login으로 요청이 들어왔을 때 실행되는 함수.

• if request.method == 'POST':
  요청 방식이 POST인지 확인. 로그인 폼에서 "로그인 하기" 버튼을 눌러서 전송된 요청이면 여기로 들어옴.

• user_id = request.form.get('username')
  POST로 전송된 form 데이터 중 name="username" 값을 가져와서 변수에 저장.

• user_pw = request.form.get('password')
  같은 방식으로 name="password" 값을 가져옴.

• return render_template("result.html", user_id=user_id, user_pw=user_pw)
result.html을 렌더링하면서 user_id, user_pw 변수를 같이 넘김. 넘긴 변수는 Jinja2 문법으로 HTML 안에서 사용 가능.

• return render_template('login.html')
  요청 방식이 POST가 아니라 GET이면(즉, 그냥 /login 페이지에 처음 접속한 경우) 로그인 폼 페이지를 보여줌.

• app.run()
  서버 실행.

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인덱스 페이지</title>
</head>
<body>
    <h1>로그인 실습 사이트입니다.</h1>
    <a href="/login">로그인 하기</a>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
</head>
<body>
    <h2>로그인</h2>

    <form action="/login" method="post">
        <p>아이디: <input type="text" name="username" required></p>
        <p>비밀번호: <input type="password" name="password" required></p>
        <button type="submit">로그인 하기</button>
    </form>
    
    <br>
    <a href="/">홈으로 돌아가기</a>
</body>
</html>

result.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>결과 페이지</title>
</head>
<body>
    <h1>전송 완료!</h1>
    <p>입력하신 아이디: <strong>{{ user_id }}</strong></p>
    <p>입력하신 비밀번호: <strong>{{ user_pw }}</strong></p>
    <hr>
    <a href="/login">다시 로그인하기</a> | <a href="/">홈으로</a>
</body>
</html>

핵심 포인트

개념	설명
Flask	파이썬 기반 마이크로 웹 프레임워크
Jinja	Flask 내장 템플릿 엔진, {{ }}로 변수 출력
@app.route()	URL 주소와 함수를 연결하는 데코레이터
request.method	GET/POST 요청 구분
request.form.get()	POST로 전송된 form 데이터 가져오기
render_template()	HTML 템플릿에 변수 전달하며 렌더링