[Django] clone instagram #6

정보구니·2021년 12월 6일

django

Django

목록 보기

14/15

로그인이나 회원가입을 위한 유저 모델을 만들어줘야 한다.

장고에는 기본적으로 제공하는 유저 모델(auth _user)이 있다

기본으로 제공되는 auth_user를 사용할 경우 필수 기본 함수인 passwordcheck나 암호화를 사용할 수 있다는 장점이 있다.

하지만, 기본적으로 제공되는 유저 모델에 원하는 field가 없을 경우, 유저 모델을 따로 만들어 줄 수 있다.

새로운 유저 모델을 만들어 줄 때는 기존의 auth_user를 가져가면서 커스텀하여 만들어주는 방법과, auth_user는 무시한 채 새롭게 만들어주는 방법이 있다.

아예 새롭게 만들어 줄 경우에는 기존 유저모델에서 사용할 수 있는 필수 기본 함수도 새롭게 만들어 줘야 하기 때문에
기존 유저모델을 살리면서 커스텀하는 방법을 사용하는 것이 좋다

이때 장고에서 defalt로 사용하는 유저모델은 1개여야 한다.
지금은 이미 기본 유저모델이 DB에 마이그레이션 된 상태이므로, 기본 유저모델에 대한 DB를 지워주고 커스텀 유저모델을 만들어줘야 한다.

따라서 장고를 이용해 서비스를 만들때 먼저 사용자 모델을 어떻게 할 것인지 결정하고 만드는 것이 좋다

커스텀 유저모델 만들기

원래 있던 장고의 기본 유저모델을 지워준 뒤 커스텀 유저 모델을 만들어준다

user/models.py

from django.contrib.auth.base_user import AbstractBaseUser


class User(AbstractBaseUser):
    """
        유저 프로필 사진
        유저 닉네임        -> 화면에 표기되는 이름
        유저 이름          -> 실제 사용자 이름
        유저 이메일 주소   -> 회원가입할 때 사용되는 아이디
        유저 비밀번호      -> 기본값 쓰자
    """

    profile = models.TextField() 
    nickname = models.CharField(max_length=24, unique=Ture)
    name = models.CharField(max_length=24)
    email = models.EmailField(unique=Ture)

    USERNAME_FIELD = 'nickname'

    class Meta:
        db_table = "User"

class Meta: db_table = "User"
db 테이블의 이름을 기존방식인 앱이름_클래스이름(user_User)이 아닌 원하는대로 바꿔주는 역할을 한다.

만들어준 커스텀 유저모델을 settings 파일에 등록시켜준다

instagram/settins.py

...
AUTH_USER_MODEL = 'user.User'  # 커스텀 유저 모델 등록

DB를 만들어주기 위해 마이그레이션을 해준다.

(venv) python manage.py makemigrations
(venv) python manage.py migrate

그럼 User라는 이름의 테이블이 생긴 것을 확인 할 수 있다.

앱마다 `urls` 분리하기

urls도 앱마다 나눠줄 수 있다.

현재는 instagram/urls.py 파일에서 모든 url을 있지만, 앱마다 분리를 시켜보도록 하겠다.

content 폴더에 urls.py 파일을 추가해 주고 다음 코드를 작성해 준 다음
기존 itagram/urls.py파일도 수정해주도록 하겠다.

content/urls.py

from django.urls import path
from .views import UploadFeed 


urlpatterns = [
    path('upload', UploadFeed.as_view())
]

instagram/urls.py

...

urlpatterns = [
    ...
    # path('content/upload', UploadFeed.as_view())
    path('content/', include('content.urls'))
]
...

include를 사용하면 해당 앱의 urls.py를 참조한다.

회원가입, 로그인 페이지 만들기

먼저 뷰를 만들어 준다.

user/view.py

from django.shortcuts import render
from rest_framework.views import APIView


class Join(APIView):
    def get(self, request):
        return render(request, "user/join.html")

class Login(APIView):
    def get(self, request):
        return render(request, "user/login.html")

urls을 연결해준다.

user/urls.py

from django.urls import path
from .views import Join, Login

urlpatterns = [
    path('join', Join.as_view()),
    path('login', Login.as_view())
]

앱 urls를 루트폴더의 urls.py와 연결해준다.

instagram/urls.py

...

urlpatterns = [
    ...
    path('user/', include('user.urls')),
]
...

회원가입, 로그인 html을 만들어 준다.

templates/join.html

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

        <title>회원가입</title>
    </head>
    
    <body style="background: rgb(245,245,245)">
        <div style="text-align: center; width: 400px; height: 500px; border: solid 1px gray; margin: 100px auto 20px auto; background: white;">
            <div style="width: 360px; height: 500px; margin: 50px auto 50px auto;">
                <div><img style="width: 160px; margin-bottom:20px;" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"></div>
                <div style="color: gray; font-weight: bolder; margin-bottom: 60px;"> 친구들의 사진과 동영상을 보려면 가입하세요 </div>

                <div class="form-floating mb-3">
                    <input style="width: 300px; height: 24px; margin: auto;" type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                    <label style="font-size: 13px; padding: 4px 10px; margin-left: 30px; margin-top: 2px;" for="floatingInput">휴대폰 번호 또는 이메일 주소</label>
                </div>

                <div class="form-floating mb-3">
                    <input style="width: 300px; height: 24px; margin: auto;" type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
                    <label style="font-size: 13px; padding: 4px 10px; margin-left: 30px; margin-top: 2px;" for="floatingInput">이름</label>
                </div>

                <div class="form-floating mb-3">
                    <input style="width: 300px; height: 24px; margin: auto;" type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
                    <label style="font-size: 13px; padding: 4px 10px; margin-left: 30px; margin-top: 2px;" for="floatingInput">닉네임</label>
                </div>

                <div class="form-floating mb-3">
                    <input style="width: 300px; height: 24px; margin: auto;" type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
                    <label style="font-size: 13px; padding: 4px 10px; margin-left: 30px; margin-top: 2px;" for="floatingInput">비밀 번호</label>
                </div>
                <button style="width: 300px; height: 32px; margin: auto; font-size: 14px; font-weight: bolder; margin-top: 8px;" type="button" class="btn btn-primary">가입</button>
            </div>
        </div>

        <div style="text-align: center; width: 400px; height: 80px; border: solid 1px gray; margin: 20px auto 100px auto; background: white;">
            <div style="margin: 28px auto 28px auto;"> 계정이 있으신가요? <a href="login">로그인</a></div>
        </div>
        
        <!-- Optional JavaScript; choose one of the two! -->

        <!-- Option 1: Bootstrap Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

        <!-- Option 2: Separate Popper and Bootstrap JS -->
        <!--
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
        -->
    </body>
</html>

templates/login.html

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

        <title>로그인</title>
    </head>

    <body style="background: rgb(245,245,245)">
        <div style="text-align: center; width: 400px; height: 500px; border: solid 1px gray; margin: 100px auto 20px auto; background: white;">
            <div style="width: 360px; height: 500px; margin: 50px auto 50px auto;">
                <div><img style="width: 160px; margin-bottom:20px;" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"></div>
                <div style="color: gray; font-weight: bolder; margin-bottom: 60px;"> 친구들의 사진과 동영상을 보려면 가입하세요 </div>
                
                <div class="form-floating mb-3">
                    <input style="width: 300px; height: 24px; margin: auto;" type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                    <label style="font-size: 13px; padding: 4px 10px; margin-left: 30px; margin-top: 2px;" for="floatingInput">휴대폰 번호 또는 이메일 주소</label>
                </div>

                <div class="form-floating mb-3">
                    <input style="width: 300px; height: 24px; margin: auto;" type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
                    <label style="font-size: 13px; padding: 4px 10px; margin-left: 30px; margin-top: 2px;" for="floatingInput">비밀 번호</label>
                </div>
                <button style="width: 300px; height: 32px; margin: auto; font-size: 14px; font-weight: bolder; margin-top: 8px;" type="button" class="btn btn-primary">로그인</button>
            </div>
        </div>

        <div style="text-align: center; width: 400px; height: 80px; border: solid 1px gray; margin: 20px auto 100px auto; background: white;">
            <div style="margin: 28px auto 28px auto;">계정이 없으신가요? <a href="join">가입하기</a></div>
        </div>
        
        <!-- Optional JavaScript; choose one of the two! -->

        <!-- Option 1: Bootstrap Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

        <!-- Option 2: Separate Popper and Bootstrap JS -->
        <!--
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
        -->
    </body>
</html>