세션 처리 프로그램을 구현하는 과정은 크게 세 부분으로 나눌 수 있어. 모든 단계를 거치면서, MongoDB를 데이터베이스로, Django를 백엔드로, Vue.js를 프론트엔드로 사용하는 방법을 알려줄게.

1단계: MongoDB 설정

MongoDB를 세션 저장소로 사용하기 위해 먼저 MongoDB를 설치하고 설정해야 해. MongoDB는 공식 웹사이트에서 설치 가이드를 제공하니 참고해서 설치해줘. 설치 후, MongoDB를 실행시키고, django 프로젝트에서 사용할 데이터베이스를 생성하자.

2단계: Django 프로젝트 설정

Django 설치 및 프로젝트 생성

1. 가상 환경 설정:

   python -m venv myvenv
   source myvenv/bin/activate  # Linux/macOS
   myvenv\Scripts\activate  # Windows

2. Django 및 필요한 패키지 설치:

   pip install django djongo djangorestframework

3. 프로젝트 생성:

   django-admin startproject myproject
   cd myproject

4. 앱 생성:

   python manage.py startapp myapp

MongoDB를 위한 Django 설정

myproject/settings.py 파일에서 데이터베이스 설정을 MongoDB로 변경해줘.

DATABASES = {
    'default': {
        'ENGINE': 'djongo',
        'NAME': 'your_database_name',  # MongoDB 데이터베이스 이름
        # MongoDB가 로컬에서 실행 중이라면 HOST와 PORT는 기본값을 사용할 수 있어.
        # 'HOST': 'localhost',  
        # 'PORT': 27017,
    }
}

Django 세션 설정

Django는 기본적으로 데이터베이스를 세션 저장소로 사용하므로, 위에서 MongoDB를 Django의 데이터베이스로 설정했기 때문에 별도의 세션 설정은 필요 없어. Django에서 세션을 사용하려면, INSTALLED_APPS에 'django.contrib.sessions'이 포함되어 있는지 확인해줘. 기본적으로 포함되어 있어야 해.

3단계: Django에서 세션 사용하기

Django 뷰에서 세션을 설정하고 액세스하는 방법을 예시로 보여줄게.

myapp/views.py 파일을 생성하거나 수정하여 다음과 같이 작성해.

from django.shortcuts import render
from django.http import HttpResponse

def set_session(request):
    request.session['my_key'] = 'Hello, session!'
    return HttpResponse("Session set!")

def get_session(request):
    session_value = request.session.get('my_key', 'Not set')
    return HttpResponse(f"Session value: {session_value}")

myproject/urls.py에 URL 매핑을 추가해줘.

from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('set_session/', views.set_session),
    path('get_session/', views.get_session),
]

4단계: Vue.js 프론트엔드 설정

Vue.js 프로젝트를 생성하고, Django 백엔드와 통신하여 세션을 처리하는 방법을 구현할 거야. Vue CLI를 사용해 Vue 프로젝트를 생성하고, Axios를 사용하여 백엔드 API와 통신해보자.

1. Vue CLI 설치 (이미 설치되어 있다면 생략):

   npm install -g @vue/cli

2. Vue 프로젝트 생성:

   vue create myvueapp
   cd myvueapp

3. Axios 설치:

   npm install axios

4. src/components/HelloWorld.vue 파일을 수정하거나 새 컴포넌트를 만들어

서 Django 백엔드와 통신하는 코드를 추가해줘.

이제 기본적인 설정은 끝났어. 다음 단계에서는 Vue.js를 사용하여 실제로 세션을 설정하고 가져오는 방법을 구현하자.

먼저, Django 백엔드에서 세션을 처리하는 기본적인 설정과 뷰를 구현할 거야. 이를 위해 views.py 파일을 수정하고, 적절한 URL 경로를 설정해줄게. 그 후, Vue.js 프론트엔드에서 이러한 API를 호출하는 방법을 구현할 거야.

Django 백엔드 구현

1. views.py에 세션 설정 및 조회 기능 추가

myapp/views.py 파일을 열어서 세션을 설정하고 조회하는 두 개의 뷰를 추가해줘. 이미 만들었던 코드를 기반으로 해서, 이번에는 파일별로 분리하지만, Django 프로젝트의 특성상 뷰 함수들은 주로 같은 파일에 위치하는 것이 일반적이기 때문에, 여기서는 views.py 파일에 모두 포함시키겠어.

# myapp/views.py

from django.http import HttpResponse

# 세션 설정 뷰
def set_session(request):
    request.session['my_key'] = 'Hello, session!'
    return HttpResponse("Session set!")

# 세션 조회 뷰
def get_session(request):
    session_value = request.session.get('my_key', 'Not set')
    return HttpResponse(f"Session value: {session_value}")

2. urls.py에 URL 경로 설정 추가

myproject/urls.py 파일을 열어서 앞서 생성한 뷰 함수에 대한 URL 경로를 설정해줘.

# myproject/urls.py

from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('set_session/', views.set_session),
    path('get_session/', views.get_session),
]

Vue.js 프론트엔드에서 세션 처리

Vue.js 프로젝트에서 Axios를 사용해 Django 백엔드의 세션 설정 및 조회 API를 호출하는 예를 만들어보겠어.

1. HelloWorld.vue 수정 또는 새 컴포넌트 생성

src/components/SessionComponent.vue라는 새로운 파일을 만들고, 다음과 같이 Axios를 사용하여 백엔드 API를 호출하는 코드를 추가해.

<template>
  <div>
    <h1>Session Test</h1>
    <button @click="setSession">Set Session</button>
    <button @click="getSession">Get Session</button>
    <p>Session Value: {{ sessionValue }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'SessionComponent',
  data() {
    return {
      sessionValue: '',
    };
  },
  methods: {
    setSession() {
      axios.get('http://localhost:8000/set_session/')
        .then(response => {
          alert('Session set!');
        })
        .catch(error => {
          console.error('There was an error setting the session:', error);
        });
    },
    getSession() {
      axios.get('http://localhost:8000/get_session/')
        .then(response => {
          this.sessionValue = response.data;
        })
        .catch(error => {
          console.error('There was an error getting the session value:', error);
        });
    }
  }
}
</script>

이 컴포넌트는 세션을 설정하고 가져오는 버튼을 제공하며, 세션 값은 페이지에 동적으로 표시될 거야.

2. 프로젝트 실행

모든 설정이 완료되었으면, Django 백엔드와 Vue.js 프론트엔드를 실행해줘.

• Django 서버 실행:

  python manage.py runserver

• Vue.js 앱 실행:

  npm run serve

이제 Vue.js 앱에서 세션을 설정하고 조회하는 버튼을 클릭하여 Django 백엔드와의 세션 처리를 테스트할 수 있어.