사용자 관리 : 회원가입과 로그인 실습

앞서 파이썬 파일에만 거의 손대었다면, 이번에는 Templates 안에 HTML 파일도 만들어 볼 예정이다.

개인적으로는 파이썬보다 HTML 등에 약해서 어떻게 할지 고민이었지만 일단 고민보단 go라고, 가보자.

 

다행히 이번에는 html 파일을 코드스니펫에 제공해주셨다. 휴

그래서 파일을 새로 다 생성했더니

이런 형식으로 되었다. 왜 user 폴더를 안에 새로 생성했을까? 생각했는데

일단 추측상으로는 base가 signin과 signup의 부모 class와 같은 역할인가?라는 생각도 들었다.

여기서 나오는 %들은 무엇인가 해서 보았더니,

{% extends 'base.html' %} {#base.html이라는 파일 위에 추가하겠다#}

{% block title %} {# 파이썬으로 전달하는 문구 (%) #}
    로그인
{% endblock %}

이런 뜻이라고 한다. templates 안에서 내용을 전달하는 역할인 것 같은데, 자세히는 아직 이해가진 않는다.

일단 templates는 코드스니펫대로 작성을 완료했으니 파이썬 파일을 봐야겠다.

---

 

앞서 공부한 MVT 형식을 통해서 우리는 이 파일들을 만들어야 하는데, 다음과 같은 과정을 이해하면 편하다.

1. 사용자가 url 요청 → 크롬/사파리 등의 인터넷 브라우저
2. mySpartaSns에 요청이 접수 → settings.py가 있는 가장 처음 작성한 앱의 urls.py
3. 등록된 url을 찾기 → urls.py에 연결 된 앱에 생성 한 urls.py
4. 해당 url에 등록 된 view를 찾기

그럼 이 순서대로 만들어보는 게 맞다.

1. 사용자가 url 요청 ( 이건 사람이 하는 것이므로 패스)

2. 스파르타sns에 요청 접수

urlpatterns = [
    path('admin/', admin.site.urls),
    path('test/', views.base_response, name='first_test'),
    path('first/', views.first_view, name='first_view'),
    path('', include('user.urls')), {#유저의 url과 스파르타sns의 url과 연결됨}
]

3. 등록된 url 찾기

from django.urls import path
from . import views

urlpatterns = [
    path('sign-up/', views.sign_up_view, name='sign-up'),
    path('sign-in/', views.sign_in_view, name='sign-in'),
]

# 포트에서 /sign-up 접근을 하면 views.py 파일에 있는 sign_up_view 함수가
# 이 화면은 'user/signup.html'을 보여줌
# 마찬가지로 /sign-in으로 접근을 하면 같은 동선으로 코드가 실행됨.

4.해당 url에 등록된 view 찾기

from django.shortcuts import render


# Create your views here.
def sign_up_view(request):
    return render(request, 'user/signup.html')


def sign_in_view(request):
    return render(request, 'user/signin.html')

# views.py를 만들었으니 url과 연동 필요
# urls.py로 이동

위 과정을 모두 마치고 터미널을 실행한 뒤 서버를 열어보면

짜잔~

참 쉽.. 완성했다.

---

회원가입 기능 만들기

회원가입 기능을 만들어주는 /sign-up을 손 봐야 할 단계다.

지금 html은 이미 만들었으니, 이제 회원가입 하고 회원가입한 정보를 url로 POST하는 것이 기능 만들기의 수단이다.

예전에 정말 힘들게 공부한 POST와 GET을 여기서도 써먹는다니 힘들게 공부한 보람이 있네

 

# 미리 알아두면 좋을 점

form은 화면 내용을 데이터로 보낼 때 주로 써먹는 tag다.

그래서 다음과 같이 method와, 다음 url로 이동시켜주는 action 등이 들어감!

{% csrf_token %}

보안을 높여주는 기능

 

이 sign-up html을 간략히 보자면 

{% block content %}
    <div class="container">
        <div class="wrap">
            <h2 class="title-center"> 회원가입 </h2>
            <form class="form-area" method="post", action="/sign-up/">
                {%  csrf_token %}
                <div class="form-group mt-2 mb-2">
                    <label for="username">이름</label>
                    <input type="text" class="form-control" id="username" name="username">
                </div>
                <div class="form-group mt-2 mb-2">
                    <label for="password">비밀번호</label>
                    <input type="password" class="form-control" id="password" name="password">
                </div>
                <div class="form-group mt-2 mb-2">
                    <label for="password2">비밀번호 확인</label>
                    <input type="password" class="form-control" id="password2" name="password2">
                </div>
                <div class="form-group mt-2 mb-2">
                    <label for="bio">나를 한마디로</label>
                    <input type="text" class="form-control" id="bio" name="bio">
                </div>
                <hr>
                <div style="float: right">
                    <button type="submit" class="btn btn-primary">회원가입</button>
                    <a href="/sign-in" class="btn btn-secondary">로그인 페이지로</a>
                </div>
            </form>

        </div>
    </div>
{% endblock %}

username, password, password2, bio 4가지 정보를 url로 보낸다는 것을 확인.

def sign_up_view(request):
    if request.method == 'GET':  # GET 메서드로 요청이 들어 올 경우
        return render(request, 'user/signup.html') # 화면 보여주기
    elif request.method == 'POST':  # POST 메서드로 요청이 들어 올 경우
        username = request.POST.get('username', None)
        password = request.POST.get('password', None)
        password2 = request.POST.get('password2', None)
        bio = request.POST.get('bio', None)
        return ""

이것을 서버로 이동시켰는데, 이거 많이 익숙하다.

POST 요청 받은 4개의 파일을 받는 것이다.

요청 받았으면 비밀번호가 같은 경우와 다른 경우로 나누어서 정리해야 하고,

같은 경우에는 저장하게끔 코드를 만들어줘야 한다.

from django.shortcuts import render, redirect
from .models import UserModel

# Create your views here.
def sign_up_view(request):
    if request.method == 'GET':  # GET 메서드로 요청이 들어 올 경우
        return render(request, 'user/signup.html') # 화면 보여주기
    elif request.method == 'POST':  # POST 메서드로 요청이 들어 올 경우
        username = request.POST.get('username', None)
        password = request.POST.get('password', None)
        password2 = request.POST.get('password2', None)
        bio = request.POST.get('bio', None)

        if password != password2:  # 비번이 일치하지 않으면 요청을 무시해야겠지?
            return render(request, 'user/signup.html') # get 요청과 마찬가지로 그냥 화면 보여주기로 끝
        else:
            new_user = UserModel() # 저장목록 등록
            new_user.username = username
            new_user.password = password
            new_user.bio = bio
            new_user.save() # 저장 코드
            #저장 됐으면 로그인 페이지를 보여줘야겠지?
            #redirect 함수를 위에도 적고 아래 반환값에도 적어서 돌아가게끔 하자

        return redirect('/sign-in')

이러면 완성되었고, 서버를 구동시켜서 아래와 같이 입력한다.

여기서 비밀번호가 일치하면?

로그인 페이지가 나왔다! 코드 성공!

---

로그인 기능 만들기

회원가입을 했으니 로그인을 해야겠지?

이번엔 세션이라는 기능을 이용해보기로 했다.

세션 : 사용자 기능을 저장하는 기능

 

웹개발 기초 강의 들을 때 튜터님이 말씀하신 것 : 먼저 서버를 손 댄 다음 클라이언트를 손 대자.

그러니 서버부터 먼저 간단하게.

 

sign_up_view 함수를 손댔으니 이번엔 sign_in_view 함수를 손대면 된다.

from django.http import HttpResponse

우선 맨 상단에 자주 쓴 이 코드를 쓴다. 화면에 글씨를 띄워야 하니깐.

 

def sign_in_view(request):
if request.method == 'POST':
return HttpResponse("로그인 성공!")
elif request.method == 'GET':
return render(request, 'user/signin.html')

그 다음 앞서 회원가입과 마찬가지로 method 별 조건문을 달아주었다.

 

그럼 이제 딱히 클라이언트로 가서 서버로 옮길 것들을 가져와야 하니깐 클라이언트로 이동.

아까 form 문에서 methods와 action 등을 만든다고 했었지? 한 번 더 해보자.

이번엔 signin.html로 이동

<form class="form-area" method="post" action="/sign-in/">
{% csrf_token %}
<div class="form-group mt-2 mb-2">
<label for="username">이름</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group mt-2 mb-2">
<label for="password">비밀번호</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<hr>
<div style="float: right">
<button type="submit" class="btn btn-primary">로그인</button>
<a href="/sign-up" class="btn btn-secondary">회원가입 페이지로</a>
</div>
</form>

이번에 담아갈 내용은 username과 password다.

복습이니깐 사진 하나로 요약완료.

def sign_in_view(request):
if request.method == 'POST':
username = request.POST.get('username', None)
password = request.POST.get('password', None)

me = UserModel.objects.get(username = username)
# 데이터베이스와 연결된 usermodel라는 객체
# (조건: 유저모델 안에 있었던 username(회원등록 유저네임)이 아까 post에서 받아온 username과 같은 경우)
if me.password == password:
request.session['user'] = me.username
#세션 뜻 알고 있지?
return HttpResponse("로그인 성공!")
else:
return redirect('/sign-in')
# 다시 로그인 창 이동, 틀렸으니 다시 도전!

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

끝났으니 마찬가지로 서버 열어서 이렇게 옳게 누르면

끝!!!!!!!!!!!!!!!!!!!!!

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!