django - error alert 작동안됨 현상 - 해결

이번 포스팅은 회원가입 폼에 관한 내용이다.

"폼"이라는 글씨에서 느껴야 하는 부분이지만 폼은 크게 forms.py와 같이 form을 쓰기 위한 파일이 하나의 주축이고

또 하나의 주축은 사용하고자 하는 영역의 폼. 나의 경우는 회원가입 폼을 html로 구현할때 <form>으로 구현하는 태그가 중요한 부분이였다.

왜냐하면 회원가입을 할때 작성되지 않았거나, 양식에 맞지 않는경우에 에러메세지를 알럿으로 띄우는 기능을 삽입했음에도

유저이름, 이메일영역에 대한 에러메세지는 잘만뜨는데 비밀번호에 관해서는 공백으로쓰든 비밀번호와 비밀번호 확인이 서로 일치하지 않아도 회원가입이 되는 현상이 있었다.

나는 이것을 꼭 해결하고 싶었다.

---

#1 전제조건

우선 내가 살펴봐야겠다고 생각한 부분들을 말해보겠다.

# common/views.py

def signup(request):
    """

    signup
    """
    if request.method == 'POST':
        form = UserForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            raw_password = form.cleaned_data.get('password1')
            user = authenticate(username=username, password=raw_password)
            login(request, user)
            return redirect('index')

    else:
        form = UserForm()
    return render(request, 'common/signup.html', {'form': form})

views를 확인하고 싶었던 이유는 signup이라고 회원가입 양식을 만들어 놓았기 때문이다.

그리고 회원가입의 form에 대한 검증과정도 구현해놓았기 때문에 체크사항중 하나였다.

 

# common/urls.py

# 회원가입을 위한 매핑
    # 하지만 회원가입이란 근본적으로 어떤 양식을 필요로 한다.
    # "어떤 양식"이 필요하다면 forms를 거쳐서 views로 가는 것이 수월하다.
    path('signup/', views.signup, name="signup"),

urls.py는 매핑은 잘되어있는지, views와 연결은 잘되어있는지 확인하기 위해서 필요했었다.

 

# templates/form_errors.html

{% if form.errors %}
    {% for field in form %}
        {% for error in field.errors %} {% comment %} 필드 오류를 출력한다. {% endcomment %}
            <div class="alert alert-danger">
                <strong>{{ field.label }}</strong>
                {{ error }}
            </div>
        {% endfor %}
    {% endfor %}
    {% for error in form.non_field_errors %} {% comment %} 넌 필드 오류를 출력한다. {% endcomment %}
        <div class="alert alert-danger">
            <strong>{{ error }}</strong>
        </div>
    {% endfor %}
{% endif %}

여기서부터가 본격적인데 폼에 대해서 에러를 출력해주는 알럿을 띄워주는 기본 기능이였다.

 

# templates/common/signup.html

{% extends 'base.html' %}
{% block content %}
<div class="container my-3">
    <div class="row my-3">
        <div class="col-4">
            <h4>signup</h4>
        </div>
        <div class="col-8 text-right">
            <span>or <a href="{% url 'common:login' %}">Login</a></span>
        </div>
    </div>
    <form method="post" class="post-form">
        {% csrf_token %}
        {% include "form_errors.html" %}
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" class="form-control" name="username" id="username" value="{{ form.username.value|default_if_none:'' }}">
        </div>
        <div class="form-group">
            <label for="password1">Password</label>
            <input type="password" class="form-control" name="password1" id="password1" value="{{ form.password1.value|default_if_none:'' }}">
        </div>
        <div class="form-group">
            <label for="password2">Check Password</label>
            <input type="password" class="form-control" name="password2" id="password2" value="{{ form.password2.value|default_if_none:'' }}">
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="text" class="form-control" name="email" id="email" value="{{ form.email.value|default_if_none:'' }}">
        </div>
        <button type="submit" class="btn btn-primary">Create</button>
    </form>
</div>
{% endblock %}

여기서는 내가 먹여준 태그의 각 값에 오타가 있는지, 특히나 value는 제대로 적혔는지를 확인했다.

기존의 코드는 id뒤의 value 부분이 79bites가 얼추 넘을 것같아서 들여쓰기로 밑으로 내렸었는데

오로지 해결을 위한 마음으로 일단은 쭉 이어붙였다. 들여쓰기 없이

(Two scoops of Django라는 책을 봤을때 장고를 올바르게 쓰는 방법에 대해서 기입이 되어있었다. 그 중 한가지가 79바이트를 넘지 않는것이 가독성을 이유로 중요하다고 했었는데, 아무튼 지금 이 경우에는 무시했다.)

 

책의 코드와 대조를 해보고 또해봤으며 깃허브에 저자님이 올려주신 것과도 끊임없이 대조해봤다.

 

그래도 해결이 안되서 정상적으로 활용이되는 email div를 복붙해서 password1,2에 활용을 했다.

그래도 안되더라.

 

사실상 이건 구글링해서 될게 아니란걸 알고있다.

왜냐하면 엮여있는게 너무 많기 때문이다.

 

연결되어있는것을 하나하나 짚어가는 수 밖엔 없었다.

그러다가 문득 폼이라는 글씨가 멤돌았다.

---

#2 해결의 실마리

 

아.. 내가 왜 그생각을 못했지?

폼이라함은 일단 내가 #1에서 확인해본 것들도 일단은 맞다. 하지만 가장 기초적으로 확인했어야하는것이 forms.py였는데 그걸 확인하지 못했다.

 

from django import forms
from django.contrib.auth.forms import UserChangeForm
from django.contrib.auth.models import User

# code line


class UserForm(UserChangeForm):
    email = forms.EmailField(label='Email')

    class Meta:
        model = User
        fields = ('username', 'email')

이게 기존의 코드였다.

책의 설명을 읽는데 UserCreationForm? Creation?

Creation을 상속받아? 근데 왜 내가 쓴 코드는 Creation이 아닌것같지? 회원가입으로 회원을 생성하는것이기에 Creation은 당연지사인데?

 

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User

# code line


class UserForm(UserCreationForm):
    email = forms.EmailField(label='Email')

    class Meta:
        model = User
        fields = ('username', 'email')

결국 이렇게 상속받는 클래스를 UserCreationForm으로 변경하면서 이제는 유저네임, 비밀번호, 비밀번호 확인, 이메일필드에 대해서

모두 에러메세지가 뜨며

이것으로 이 사건은 해결되었다.

 

사건의 원인은 나에게 있다. 조급한 마음에 급하게 타자를 치다보니 User라는 단어와 비슷한 길이가 있겠거니 하고 넘겨짚었기 때문에 이런 일이 발생했다. 결과적으로 이 문제를 해결하기 위해 약 3시간을 쏟아야했다.