Computer >> 컴퓨터 >  >> 프로그래밍 >> Python

Django request.session으로 만드는 간단한 카운터 앱 – 세션으로 데이터 유지하기

이 글에서는 버튼을 클릭할 때마다 숫자가 1씩 증가하고, 탭을 닫았다가 다시 열어도 세션 덕분에 값이 그대로 유지되는 아주 간단한 카운터 앱을 만드는 방법을 알아봅니다.

이 예제를 따라 하다 보면 Django 세션(Session)의 기본 개념과 함께, 뷰와 템플릿 사이에서 세션으로 데이터를 저장하고 전달하는 방법까지 자연스럽게 익힐 수 있습니다.

1. urls.py – 홈 URL에 뷰 연결하기

먼저 앱의 urls.py에 다음 코드를 추가해 홈 주소에 뷰를 연결합니다.

from django.urls import path
from . import views

urlpatterns = [
    path('', views.counterView, name='counter'),
]

여기서는 프로젝트의 홈 주소('')로 접속했을 때 counterView가 실행되도록 설정했습니다.

2. views.py – 세션으로 카운트 값 다루기

이제 views.py에 POST 요청을 처리하는 뷰를 작성합니다. 프런트엔드에서 어떤 버튼을 눌렀는지에 따라 세션의 count 변수 값을 증가시키거나 0으로 초기화합니다.

from django.shortcuts import render

def counterView(request):
    # Count 버튼을 눌렀을 때
    if request.method == 'POST' and 'count' in request.POST:
        try:
            request.session['count'] += 1
        except KeyError:
            request.session['count'] = 0
    # Reset 버튼을 눌렀을 때
    elif request.method == 'POST' and 'reset' in request.POST:
        request.session['count'] = 0
    return render(request, 'counter.html')

Count 버튼을 누르면 세션의 count 값이 1씩 늘어나고, Reset 버튼을 누르면 0으로 초기화됩니다. 세션에 아직 값이 저장되어 있지 않은 첫 요청을 대비해 try-except 문으로 초기값을 0으로 설정했으며, 어떤 요청이든 반드시 counter.html을 렌더링하도록 마지막에 return 문을 배치했습니다.

3. counter.html – 카운터 화면 만들기

앱 디렉터리 안에 templates 폴더를 생성하고, 그 안에 counter.html 파일을 만든 뒤 다음 코드를 작성합니다.

<!DOCTYPE html>
<html lang='ko'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Counter</title>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x' crossorigin='anonymous'>
</head>
<body>
    <style>
        body {
            background-color: palevioletred;
        }
        .counter form .count {
            border: none;
            outline: none;
            background-color: black;
            color: white;
        }
        .counter form .reset {
            border: none;
            outline: none;
            background-color: rgb(50, 181, 204);
        }
    </style>
    <div class='container counter text-center' style='margin-top: 150px;'>
        <h1 class='display-1 text-white'>
            {% if request.session.count %}
                {{ request.session.count }}
            {% else %}
                0
            {% endif %}
        </h1>
        <br><br>
        <form method='post'>
            {% csrf_token %}
            <button name='count' class='count px-5 py-3 text-white shadow-lg'>Count</button>
        </form>
        <br><br>
        <form method='post'>
            {% csrf_token %}
            <button name='reset' class='reset px-5 py-3 text-white shadow-lg'>Reset</button>
        </form>
    </div>
</body>
</html>

이 템플릿은 홈 URL에서 렌더링되는 프런트엔드 화면입니다. Bootstrap 5로 스타일을 입혔으며, {% if request.session.count %} 조건문으로 세션에 저장된 카운트 값을 화면에 출력하고, 값이 없으면 기본값인 0이 표시됩니다. 두 form에는 CSRF 공격을 방지하는 {% csrf_token %}이 포함되어 있고, 버튼의 name 속성(count, reset)을 통해 어떤 동작을 요청했는지 뷰에서 구분합니다.

실행 결과

개발 서버를 실행한 뒤 홈 페이지에 접속하면 다음과 같은 화면이 나타납니다.

Django request.session으로 만드는 간단한 카운터 앱 – 세션으로 데이터 유지하기

Count 버튼을 클릭하면 숫자가 1씩 증가하고, Reset 버튼을 클릭하면 카운터가 0으로 초기화됩니다. 값이 세션에 저장되기 때문에 페이지를 새로고침하거나 탭을 닫았다가 다시 열어도 마지막 숫자가 그대로 유지되는 것을 확인할 수 있습니다.

마무리

Django의 세션은 사용자별 데이터를 서버 쪽에 저장하고, 클라이언트에는 세션 ID만 쿠키로 전달하는 방식으로 동작합니다. 이번 예제처럼 간단한 상태 유지부터 로그인 정보 관리까지 다양한 기능의 기초가 되는 개념이니, 코드를 변형해 보며 직접 익혀보시기 바랍니다.