Topic 1: Flask 웹 프레임워크 기초 🌐

🎯 학습 목표

Flask가 무엇인지, 왜 필요한지 차근차근 이해해봐요!

웹 프레임워크가 무엇인지 이해하기
Flask의 기본 개념과 동작 원리 알아보기
간단한 웹 애플리케이션 만들어보기
라우팅(Routing) 개념 이해하기

🌍 웹 프레임워크란 무엇인가요?

웹 프레임워크는 웹 애플리케이션을 만들 때 필요한 도구들을 모아놓은 도구 상자예요!

웹사이트는 어떻게 만들어질까요?

Unit 10에서 배웠듯이, 웹은 클라이언트와 서버가 대화하는 방식으로 작동해요:


사용자 브라우저 (클라이언트)     인터넷     웹 서버 (우리가 만들 것!)
     🖥️ ←---------------→ 🌐 ←---------------→ 🖥️
   "페이지 주세요!"                      "여기 있어요!"

프레임워크 없이 웹서버를 만든다면?

만약 파이썬으로 웹서버를 처음부터 만든다면 이런 일들을 다 해야 해요:

HTTP 요청 분석: 사용자가 무엇을 원하는지 파악
URL 처리: 어떤 페이지를 보여줄지 결정
HTML 생성: 동적으로 웹페이지 만들기
응답 전송: 브라우저에 결과 보내기
오류 처리: 문제가 생겼을 때 처리

이 모든 걸 직접 만드는 건 너무 복잡하죠!

Flask가 해결해주는 것들

Flask는 이런 복잡한 일들을 쉽게 만들어주는 웹 프레임워크예요:

복잡한 일	Flask로 해결
HTTP 요청 처리	`@app.route('/경로')` 데코레이터
URL 라우팅	함수와 URL을 자동으로 연결
HTML 응답	`return` 문으로 간단히
서버 실행	`app.run()` 한 줄로 끝
개발 도구	자동 새로고침, 오류 디버깅

🔧 Flask 설치하기

이제 Flask를 설치해봐요:


pip install flask

설치가 완료되었는지 확인해보세요:


python -c "import flask; print('Flask 설치 완료!')"

🏗️ 첫 번째 Flask 애플리케이션 만들기

이제 실제로 Flask로 웹 애플리케이션을 만들어봐요!

단계 1: 가장 간단한 웹 애플리케이션

먼저 my_first_app.py 파일을 만들고 가장 기본적인 Flask 앱을 만들어봐요:


# 1. Flask 라이브러리에서 Flask 클래스를 가져옵니다
from flask import Flask
 
# 2. Flask 애플리케이션 객체를 만듭니다
app = Flask(__name__)
 
# 3. 라우트(경로)를 정의합니다
@app.route('/')
def home():
    return '<h1>안녕하세요! 제 첫 Flask 웹사이트입니다!</h1>'
 
# 4. 애플리케이션을 실행합니다
if __name__ == '__main__':
    app.run(debug=True)

코드 한 줄씩 자세히 이해하기

1줄: from flask import Flask

Flask 라이브러리에서 Flask 클래스를 가져와요
이 클래스가 웹 애플리케이션의 핵심이에요

3줄: app = Flask(__name__)

Flask 애플리케이션 객체를 만들어요
__name__은 현재 파이썬 파일의 이름을 의미해요
이 객체가 우리의 웹서버 역할을 해요

5~7줄: 라우트 정의


@app.route('/')
def home():
    return '<h1>안녕하세요! 제 첫 Flask 웹사이트입니다!</h1>'

@app.route('/'): 이것을 데코레이터라고 해요
/는 홈페이지 주소를 의미해요 (localhost:5000/)
home() 함수가 실행되어 HTML을 반환해요

9~10줄: 서버 실행


if __name__ == '__main__':
    app.run(debug=True)

이 파일을 직접 실행했을 때만 서버가 시작돼요
debug=True는 개발할 때 편리한 기능들을 활성화해요

단계 2: 앱 실행해보기

이제 우리가 만든 앱을 실행해봐요:


python my_first_app.py

터미널에 이런 메시지가 나타날 거예요:


 * Running on http://127.0.0.1:5000
 * Debug mode: on

이제 브라우저에서 http://localhost:5000으로 접속해보세요! 웹페이지에 “안녕하세요! 제 첫 Flask 웹사이트입니다!”가 나타날 거예요.

🛣️ 라우팅(Routing) 이해하기

라우팅은 URL 경로와 함수를 연결하는 것이에요.

라우팅이 없다면?

만약 라우팅이 없다면 사용자가 어떤 주소로 접속해도 항상 같은 페이지만 보일 거예요. 하지만 실제 웹사이트는 여러 페이지가 있죠:

홈페이지: /
소개 페이지: /about
연락처: /contact

Flask에서 라우팅 만들기

여러 페이지를 만들어봐요:


from flask import Flask
 
app = Flask(__name__)
 
# 홈페이지 라우트
@app.route('/')
def home():
    return '''
    <h1>🏠 홈페이지</h1>
    <p>Flask로 만든 첫 번째 웹사이트입니다!</p>
    <a href="/about">소개 페이지로 가기</a>
    '''
 
# 소개 페이지 라우트  
@app.route('/about')
def about():
    return '''
    <h1>👋 소개 페이지</h1>
    <p>저는 Python을 배우고 있는 개발자입니다.</p>
    <a href="/">홈으로 돌아가기</a>
    '''
 
# 연락처 페이지 라우트
@app.route('/contact')
def contact():
    return '''
    <h1>📞 연락처</h1>
    <p>이메일: contact@example.com</p>
    <a href="/">홈으로 돌아가기</a>
    '''
 
if __name__ == '__main__':
    app.run(debug=True)

라우팅 코드 이해하기

@app.route('/')

이 데코레이터는 / 경로(홈페이지)에 접속하면 아래 함수를 실행하라는 의미예요
브라우저에서 http://localhost:5000/로 접속하면 home() 함수가 실행돼요

@app.route('/about')

/about 경로에 접속하면 about() 함수를 실행해요
브라우저에서 http://localhost:5000/about로 접속하면 소개 페이지가 보여요

HTML 링크 만들기


<a href="/about">소개 페이지로 가기</a>

href="/about"는 /about 경로로 이동하는 링크예요
사용자가 클릭하면 해당 페이지로 이동해요

📊 라우팅 동작 원리

사용자 요청	Flask 처리	결과
`localhost:5000/`	`home()` 함수 실행	홈페이지 HTML 반환
`localhost:5000/about`	`about()` 함수 실행	소개 페이지 HTML 반환
`localhost:5000/contact`	`contact()` 함수 실행	연락처 페이지 HTML 반환
`localhost:5000/xyz`	매칭되는 라우트 없음	404 오류

🎯 동적 라우팅

URL에 변수를 포함시킬 수도 있어요:


# 사용자 이름을 받는 동적 라우트
@app.route('/user/<name>')
def user_profile(name):
    return f'<h1>안녕하세요, {name}님!</h1>'
 
# 숫자를 받는 동적 라우트
@app.route('/post/<int:post_id>')
def show_post(post_id):
    return f'<h1>게시글 번호: {post_id}</h1>'

동적 라우팅 이해하기

<name> 부분

URL의 이 부분은 변수가 돼요
사용자가 /user/철수로 접속하면 name에 “철수”가 들어가요
함수에서 name 매개변수로 받을 수 있어요

<int:post_id> 부분

int:는 숫자만 받겠다는 의미예요
/post/123으로 접속하면 post_id에 123이 들어가요
숫자가 아닌 값이 오면 404 오류가 발생해요

🎨 간단한 CSS 스타일 추가하기

HTML만으로는 밋밋하니까 CSS로 예쁘게 꾸며봐요:


@app.route('/')
def home():
    return '''
    <!DOCTYPE html>
    <html>
    <head>
        <title>내 Flask 웹사이트</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                text-align: center;
                background-color: #f0f0f0;
                padding: 50px;
            }
            
            h1 {
                color: #333;
                font-size: 2.5em;
            }
            
            .content {
                background: white;
                padding: 30px;
                border-radius: 10px;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                margin: 20px auto;
                max-width: 600px;
            }
            
            a {
                color: #007bff;
                text-decoration: none;
                font-size: 1.2em;
            }
            
            a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <h1>🎉 Flask 웹사이트에 오신 것을 환영합니다!</h1>
            <p>이 웹사이트는 Python Flask로 만들어졌습니다.</p>
            <p><a href="/about">소개 페이지 보기</a></p>
        </div>
    </body>
    </html>
    '''

CSS 코드 이해하기

HTML 구조


<!DOCTYPE html>  <!-- HTML5 문서임을 선언 -->
<html>           <!-- 전체 HTML 문서의 시작 -->
<head>           <!-- 페이지 정보 (사용자에게 안 보임) -->
<body>           <!-- 실제 내용 (사용자에게 보임) -->

CSS 스타일


body {
    font-family: Arial, sans-serif;  /* 글꼴 설정 */
    text-align: center;              /* 텍스트 가운데 정렬 */
    background-color: #f0f0f0;       /* 배경색 */
}

body는 전체 페이지를 의미해요
#f0f0f0는 연한 회색을 나타내는 색상 코드예요

💡 실습 문제

이제 직접 해봐요!

문제 1: 새로운 페이지 추가하기

/hobby 경로에 취미를 소개하는 페이지를 만들어보세요:


@app.route('/hobby')
def hobby():
    return '''
    <h1>🎯 제 취미는...</h1>
    <ul>
        <li>프로그래밍</li>
        <li>독서</li>
        <li>음악 감상</li>
    </ul>
    <a href="/">홈으로 돌아가기</a>
    '''

문제 2: 동적 라우트 만들기

사용자 이름을 받아서 인사하는 페이지를 만들어보세요:


@app.route('/hello/<name>')
def hello(name):
    return f'''
    <h1>안녕하세요, {name}님! 👋</h1>
    <p>Flask 웹사이트에 오신 것을 환영합니다!</p>
    <a href="/">홈으로 돌아가기</a>
    '''

이제 브라우저에서 http://localhost:5000/hello/철수로 접속해보세요!

🔧 디버그 모드의 장점

app.run(debug=True)로 실행했을 때의 장점들:

기능	설명
자동 새로고침	코드를 수정하면 서버가 자동으로 재시작
오류 정보	오류가 발생하면 자세한 정보를 브라우저에 표시
개발 편의성	코드 변경사항이 바로 반영

⚠️ 주의: 실제 서비스에서는 debug=False로 설정해야 보안상 안전해요!

💡 퀴즈: Flask 기초 이해도 체크

Q1. Flask 애플리케이션 객체를 만드는 코드는?

app = Flask()
app = Flask(__name__)
app = Flask('app')

💡 정답 확인

정답: 2번 app = Flask(__name__)

__name__은 현재 파이썬 모듈의 이름을 나타내는 특별한 변수예요. Flask가 템플릿이나 정적 파일을 찾을 때 기준점으로 사용해요.


app = Flask(__name__)

Q2. 홈페이지(/) 라우트를 만드는 올바른 방법은?

@app.home()
@app.route('/')
@app.page('/')

💡 정답 확인

정답: 2번 @app.route('/')

라우트는 @app.route() 데코레이터로 만들어요!


@app.route('/')
def home():
    return '<h1>홈페이지</h1>'

Q3. 동적 라우트에서 숫자만 받으려면?

<name>
<int:id>
<number:id>

💡 정답 확인

정답: 2번 <int:id>

<int:변수명> 형식으로 정수만 받을 수 있어요!


@app.route('/post/<int:post_id>')
def show_post(post_id):
    return f'게시글 번호: {post_id}'

🌟 요약

이번 토픽에서 배운 내용들:

🎯 핵심 개념

웹 프레임워크: 웹 애플리케이션을 쉽게 만들어주는 도구 모음
Flask: Python의 간단하고 강력한 웹 프레임워크
라우팅: URL 경로와 함수를 연결하는 방법
동적 라우팅: URL에 변수를 포함시키는 방법

📝 중요한 코드 패턴


from flask import Flask         # Flask 가져오기
app = Flask(__name__)          # 애플리케이션 객체 생성
@app.route('/')               # 라우트 정의
def home():                   # 함수 정의
    return '<h1>Hello</h1>'   # HTML 반환
app.run(debug=True)           # 서버 실행

🛠️ 실무에서 사용하는 방법

개발할 때: debug=True로 자동 새로고침 활용
배포할 때: debug=False로 보안 강화
포트 변경: port 매개변수로 다른 포트 사용

✅ Flask 기초 마스터 체크리스트

Flask 설치를 완료했나요?웹 프레임워크가 무엇인지 이해했나요?첫 번째 Flask 애플리케이션을 만들고 실행했나요?라우팅 개념을 이해했나요?여러 개의 라우트를 만들어봤나요?동적 라우팅을 시도해봤나요?CSS로 웹페이지를 스타일링해봤나요?디버그 모드의 장점을 이해했나요?

🚀 다음 단계

Flask의 기본을 이해했네요! 정말 훌륭해요! 🎉

다음 Topic에서는:

템플릿(Templates): HTML을 더 효율적으로 관리하는 방법
폼(Forms): 사용자가 데이터를 입력할 수 있는 방법
데이터 흐름: 사용자 입력이 어떻게 처리되는지 이해하기
실습: 간단한 방명록이나 계산기 만들어보기

Flask의 기초를 탄탄히 다졌으니, 이제 더 역동적인 웹 애플리케이션을 만들어봐요!