프로젝트 혼자서도 잘해요리 : 유저기능

• 혼자서도 잘해요리는 추천서비스 모델을 활용한 Django 기초 웹 개발 프로젝트다.

• 그 중 유저 기능은 브라우저에서 회원가입/로그인/로그아웃 기능을 사용하여 웹에서 유저만 사용할 수 있는 다양한 기능을 구현하기 위해 개발했다.

🚩UserModel - user/models.py

• 유저기능을 활용하기 위해서는 사용자 정보가 담긴 데이터베이스가 필요하다
• 데이터베이스를 만들기 위해서는 Django 에서는 모델을 생성해야 한다!
• Django 내장 기능인 AbstractUser 를 사용해서 제공하는 사용자 모델을 생성한다!

from django.contrib.auth.models import AbstractUser

# Create your models here.

class UserModel(AbstractUser):
    class Meta:
        db_table = "user"

🔥 settings.py

• 프로젝트의 settings.py 에서 AbstractUser 모델을 사용할 것이라고 작성해줘야 한다

AUTH_USER_MODEL = 'user.UserModel'

---

🚩회원가입 기능

• 회원가입 기능은 사용자에게 아이디, 비밀번호, 닉네임을 받아 데이터베이스에 저장하는 기능을 수행한다.
• 회원가입 API에는 비밀번호 일치 조회, 유저정보 중복조회 등의 기능 또한 포함되어 있다.

📌URL - user/urls.py

• urls.py 에 프론트엔드와 백엔드를 연결한 URL주소와 실행함수를 명시한다.
• signup/ 이라는 주소가 연결되면, sign_up_view 라는 함수를 실행한다.

from django.urls import path
from . import views

urlpatterns = [
    # path('', views.home, name='home'),
    path('signup/', views.sign_up_view, name='signup'),
]

👨‍💻API - user/views.py

• views.py에 실행할 API 함수를 작성한다.
• 페이지를 보여주기 위한 render, 리다이렉션을 위한 redirect를 임포트한다.
• 회원가입은 UserModel을 바탕으로 데이터베이스에 저장되므로 UserModel을 임포트한다.
• 기존 데이터베이스에 회원이 존재하는지에 대한 기능인 get_user_model을 임포트한다.

Request

• 회원가입을 위해서 다음과 같은 정보를 request.POST로 받아온다.
• 유저 비밀번호2는 API에서 비밀번호를 제대로 작성하였는지에 대한 일치여부를 조회하기 위해 받는다.
• 유저 아이디
• 유저 비밀번호
• 유저 비밀번호2
• 유저 닉네임

Progress

• 받아온 정보로 비밀번호 일치조회, 아이디 중복조회를 실행한 뒤 분기를 모두 통과했을 때, 데이터베이스에 저장하고 로그인 페이지로 리다이렉션을 실행한다.
• 데이터베이스에 저장할때는 AbstractUser 모델을 사용하기 때문에 비밀번호는 암호화된다.

Response

from django.shortcuts import render, redirect
from .models import UserModel
from django.contrib.auth import get_user_model

# Create your views here.

def sign_up_view(request):
    if request.method == 'GET':
        user = request.user.is_authenticated
        if user:
            return redirect ('/')
        else:
            return render(request, 'signup.html')
    elif request.method == 'POST':
        username = request.POST.get('username', '')
        email = request.POST.get('email', '')
        password = request.POST.get('password', '')
        password2 = request.POST.get('password2' '')

        if password != password2:
            return render(request, 'signup.html', {'error': '비밀번호가 맞지 않습니다'})
        else:
            if username == '' or password == '' or email == '':
                return render(request, 'signup.html', {'error': '데이터를 전부 입력해주세요'})

            exist_user = get_user_model().objects.filter(username=username)
            if exist_user:
                return render(request, 'signup.html', {'error':'존재하는 사용자입니다'})

            exist_user = get_user_model().objects.filter(email=email)
            if exist_user:
                return render(request, 'signup.html',{'error':'존재하는 이메일입니다'})
            else:
                UserModel.objects.create_user(
                    username=username, password=password, email=email)
                return redirect('/signin')
        # return redirect('signin/', {'msg':'회원가입 성공'})

🧩Frontend - signup.html

<main class="wrap main-col signup-main">
      <h1 class="signup-title">회원가입</h1>
      <form class="form-area" method="post" action="/signup/">
            {% csrf_token %}
            <div class="signup-div">
              <label for="email">아이디(이메일)</label>
              <input class="form-control" id="email" type="email" name="email" placeholder="아이디"/>
              <!-- <button type="button" class="id_check">중복확인</button> -->
              <label for="password">비밀번호</label>
              <input class="form-control"
                id="password"
                type="password"
                name="password"
                placeholder="비밀번호"
              />
              <label for="password2">비밀번호 확인</label>
              <input class="form-control"
                id="password2"
                type="password"
                name="password2"
                placeholder="비밀번호 확인"
              />
              <label for="username">닉네임</label>
              <input class="form-control"
                id="username"
                type="text"
                name="username"
                placeholder="닉네임을 입력하세요"
              />
            </div>
            {% if error %}
                <div class="alert alert-danger" role="alert">
                    {{ error }}
                </div>
            {% endif %}
        <button type="submit">회원가입</button>
        <a href="/signin" class="login-link"
          >회원이신가요? 로그인 페이지로 이동</a
        >
      </form>
    </main>

---

🚩로그인 기능

📌URL - user/urls.py

from django.urls import path
from . import views

urlpatterns = [
    # path('', views.home, name='home'),
    path('signin/', views.sign_in_view, name='signin'),
]

👨‍💻API - user/views.py

def sign_in_view(request):
    if request.method == 'POST':

        username = request.POST.get('username', '')
        password = request.POST.get('password', '')

        me = auth.authenticate(request, username=username, password=password)

        if me is not None:
            auth.login(request, me)
            return redirect('/')
        else:
            return render(request, 'signin.html',{'error':'유저 이름 혹은 패스워드를 입력해주세요'})

    elif request.method == 'GET':
        user = request.user.is_authenticated
        if user:
            return redirect('/')
        else:
            return render(request, 'signin.html')

🧩Frontend - signin.html

<form class="login-form" action="/signin/" method="post">
          {% csrf_token %}
            <div class="login-id">
              <img src="/static/img/login_id.png" class="login-icon id-icon" />
              <input class="form-control" type="text" id="username" name="username" placeholder="아이디" />
            </div>
            <div class="login-password">
              <img
                src="/static/img/login_password.png"
                class="login-icon password-icon"
              />
              <input
                class="form-control"
                type="password"
                id="password"
                name="password"
                placeholder="비밀번호"
              />
            </div>
          {% if error %}
                <div class="alert alert-danger" role="alert">
                    {{ error }}
                </div>
          {% endif %}
        <button type="submit">로그인</button>
        <a href="/signup"
          ><button type="button">회원가입</button></a
        >
      </form>

---

🚩로그아웃 기능

📌URL - user/urls.py

from django.urls import path
from . import views

urlpatterns = [
    # path('', views.home, name='home'),
    path('logout/', views.logout, name='logout'),
]

👨‍💻API - user/views.py

@login_required
def logout(request):
    auth.logout(request)
    return redirect('/')

🧩Frontend - list.html

{% if user.is_authenticated %}
    <a class="nav-link" href="/logout"> 로그아웃 </a>
{% endif %}