장고에 사용자 정보를 관리하는 유저 모델이 존재한다. db.sqlite3에 auth_user에서 확인 가능하다. 이 auth_user을 상속 받아 커스텀된 유저 모델을 만들 수 있다. 다만, 주의할 점은 원래 장고 프로젝트를 시작하면서 가장 먼저 유저 모델을 어떻게 사용할지 결정해야 한다는 점이다. 장고에서 디폴트로 사용하는 유저모델은 무조건 한 개여야 하기 때문에 프로젝트 진행 중에 DB를 만들고, 유저 모델을 만드려고 할 때엔 진행 중에 만든 DB는 필수로 삭제해야만 한다. 이러한 번거로움 때문에 초기에 유저 모델을 기획하는 것이 중요하다.
📌 01. 커스텀 유저 모델 만들기
장고에서 제공하는 기본적인 사용자 모델을 사용하기 위해서는 AbstractBaseUser라는 클래스를 상속받으면 된다. user 앱의 models.py에 아래처럼 소소를 작성한다. 우리가 사용자 모델을 만들기 위해 필요한 데이터는 5가지 정도이고 주석처리 해두었다.
USERNAME_FIELD = 'id'는 사용자의 이름값을 'id'필드로 사용한다는 뜻이고, 이 이름값이 되어야 할 필드는 반드시 unique한 값을 가져야 하기 때문에 위에서 unique하다고 작성해 주었다. Meta 클래스에서 db_table = "User"라 함으로써 우리가 사용할 테이블 이름을 User라고 지어주었다.
여기서 주의할 점은 마이그레이트하기 전에 settings.py에서 우리가 만든 User모델이 장고 기본 유저 모델이라는 것을 명시해줘야 한다.
그 다음 기존에 있던 DB를 제거해야되는데, db.sqlite3을 삭제해줌으로써 DB를 제거할 수 있다. 그 후, 터미널에 마이그레이션 명령어를 통해 우리가 만든 유저 모델을 DB에 올릴 수 있다.
📌 02. 로그인/회원가입 화면 만들기
이제 아래와 같은 로그인/회원가입 화면을 만들어보겠다.
우선 무작정 <div>를 생성하여 가운데 정렬 해주었다.
이제 여기서부터 하나하나 디테일을 만들어가면 된다. 바디의 배경색을 #FAFAFA(밝은 회색)으로 입히고 적절한 크기의 로그인 상자를 만들었다. 인스타그램 로고 이미지 주소를 입력하고 가운데 정렬까지 완료한다.
아래와 같이 바뀌었다.
이제 이메일 주소를 입력할 창을 만들어야 한다. 부트스트랩의 플로팅 라벨을 활용하여 입력창을 만들 수 있다. 소스를 아래와 같이 수정하여 이메일 주소 입력창을 만들었다.
html을 작성해서 아래와 같이 회원가입 페이지를 만들었다. 이제 로그인 화면도 만들어주면 된다. 로그인 페이지 login.html을 join.html을 참고하여 작성한 후 views.py에 소스를 작성하고 urls.py에도 소스를 작성해야 한다.
작성이 완료되면 회원가입 페이지와 로그인 페이지 조회가 가능해진다.
📌 03. 회원가입 API 만들기
이제 로그인/회원가입 페이지를 만들었으니 ajax를 통해서 실제 회원가입하는 api를 만들면 된다. 이전에 views.py에 UploadFeed 클래스를 만든 것을 기억해서 만들어보자.
회원가입 페이지에서 올린 회원가입 관련 데이터를 장고 서버에 받아주는 소스를 user앱의 views.py에 작성한다.
ajax를 만들기 전, 우선 값을 받기 위해 제이쿼리를 만들어야 한다. join.html 의 입력창의 id를 지정해주고, 가입하기 버튼(id="join_button) 클릭 시, 입력창에 입력한 값들을 긁어오도록 소스를 작성한다. 우선 로그를 찍어서 값이 제대로 넘어오는지 확인해보자.
jQuery로 값이 정확히 넘어오는 것을 확인했다. 이제 다시 돌아와서 ajax 통신을 만들어보자. 이전에 피드 업로드할 때는 ajax를 만들 때 폼 데이터를 이용하여 파일을 올렸지만, 이번에는 파일을 올릴 필요가 없기 때문에, json 형태의 데이터를 받도록 작성하면 된다.
아래와 같이 ajax를 만든다. 이제 웹페이지의 입력창에 값들을 넣고 버튼 클릭 시 ajax 통신이 정상적으로 이루어지는지 확인해보자.
로그를 찍어보면 에러가 뜨는 것을 알 수 있다. 이것은 사실 ajax 통신이 실패한 것이 아니다. 응답 데이터를 json 데이터를 받는다고 했는데 아무 데이터도 주지 않아서 그렇다고 한다.. (무슨 뜻인지 잘 모르겠음..) 실제로 DB에는 입력한 값이 정상적으로 들어간다.
이제 DB에 입력한 값이 정상적으로 들어가는 것을 확인했으니 회원가입을 하면 가입이 완료되었다는 창을 띄우고 자동으로 로그인 화면으로 넘어가도록 ajax 부분을 수정해주면 된다.
📌 04. 로그인 API 만들기
이제 로그인 API도 만들면 된다. 회원가입 API를 만드는 것과 비슷하나, 조금 다른 점은 이메일과 패스워드만 받아서 패스워드가 DB에 저장 되어있는 패스워드와 같으면 로그인할 수 있도록 만들어야 한다.
먼저 views.py에서 아래와 같이 소스를 작성해주었다. 입력한 이메일이 DB에 존재하는 사용자인지 체크하기 위해 user이라는 변수에 User 테이블의 객체에 filter 함수를 준다. 이 때, filter 함수는 리스트 형식의 쿼리셋을 리턴하기 때문에 first()를 통해 리스트에 저장된 인자를 꺼내주어야 한다.
만약 user가 없다면 DB에 해당 이메일을 가진 사용자가 없는 것이므로, 404 에러 코드를 주고, 데이터에 에러 메시지를 준다. 만약 user의 패스워드가 입력한 패스워드와 일치한다면 성공 코드를 준다.
views.py 작성이 끝났다면 ajax도 만들어주어야 한다. 로그인 버튼에 id를 지정해주고, 마찬가지로 이메일, 패스워드 입력창의 id도 지정해줘서 값을 가져올 수 있도록 작성한다.
📌 04. 세션 정보
- 세션(Session) : 일정 시간 동안 같은 사용자(브라우저)로부터 들어오는 일련의 요구를 하나의 상태로 보고, 그 상태를 유지시키는 기술이다. 웹서버에 웹 컨테이너의 상태를 유지하기 위한 정보를 저장한다.
- 쿠키(Cookie) : HTTP의 일종으로 사용자가 어떠한 웹사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다. HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다.
로그인 기능까지 완성이 되었다면, 로그인 한 사용자가 누구인지를 서버 단에 저장해 놓고, 로그아웃 될 때까지 사용자 정보를 유지할 수 있어야 되는데 이렇게 사용자 정보를 서버 단에 저장해둔다는 것을 세션에 정보를 넣는다고 표현한다.
로그인을 성공했을 때, request(클라이언트에서 서버에 연결 요청이 온 것) 안의 세션에 정보를 넣으면 된다. 그럼 무슨 정보를 넣으면 될까? 바로 이메일을 넣으면 된다. 이렇게 이메일을 세션 정보에 넣는 이유는, 이 이메일을 가지고 User.objects에 가서 해당 사용자의 정보를 가져올 수 있다.(email=email, nickname=nickname, name=name,,)
현재까지는 main 페이지에 있는 로그인 사용자 정보가 모두 하드코딩으로 작성되었지만, 이제 세션 정보를 이용하여 세션에 있는 사용자 정보를 불러와서 화면에 표시해줄 수 있다. 즉, 예를 들어 바로 아래의 화면에 표시한 박스 부분을 세션 정보를 이용하여 바꿔줄 수 있는 것이다.
user 앱의 views.py에서 로그인 했을 때 이메일 주소를 세션 정보에 담는 소스를 작성해주었다면, main페이지에서 로그인 했을 때 세션 정보에 담은 이메일 주소를 불러올 수 있어야 한다. 그러기 위해서는 main페이지 동작을 위해 작성된 content/views.py로 와서 아래와 같이 소스를 작성해주어야 한다.
email 변수에 세션 정보에 담긴 이메일을 넣고, (만약 세션 정보에 이메일이 없을 경우 로그인 화면을 다시 보여준다.) User 테이블의 데이터 중 세션 정보의 이메일과 일치하는 것을 user 변수에 넣는다. (만약 일치하는 email이 없을 경우 로그인 화면을 다시 보여준다.)
세션 정보에서 가져온 이메일에 해당하는 나머지 사용자 정보를 정상적으로 불러올 수 있는지 체크하기 위해 main.html에 {{ user.~ }} 를 작성한다.
마찬가지로, 프로필 박스에 세션 정보에서 가져온 이메일에 해당하는 사용자 정보를 가져올 수 있는지 체크하기 위해 아래와 같이 작성한다.
새로고침 해보면 세션 정보에 저장된 데이터를 잘 불러오는 것을 알 수 있다.
https://cholol.tistory.com/548
이 게시물의 모든 저작권은 마이쮸(mychew__)님께 있으며, 저는 오직 학습과 기록을 목적으로 포스팅한 것임을 알려드립니다.
좋은 강의 컨텐츠를 제공해주신 마이쮸님께 감사의 말씀 드립니다. (_ _)
'ToyPJ > Python-Django' 카테고리의 다른 글
| [ToyPJ/Python] django 로 인스타그램 만들기 - 10 댓글, 좋아요, 북마크 모델 만들기 (0) | 2023.04.05 |
|---|---|
| [ToyPJ/Python] django 로 인스타그램 만들기 - 09 로그아웃, 프로필 페이지, 프로필 사진 변경 만들기 (0) | 2023.04.02 |
| [ToyPJ/Python] django 로 인스타그램 만들기 - 07 피드 생성하여 Django 서버로 업로드하기 (0) | 2023.03.30 |
| [ToyPJ/Python] django 로 인스타그램 만들기 - 06 피드 생성 화면 만들기 (0) | 2023.03.30 |
| [ToyPJ] IMG 서버 대용 (0) | 2023.03.30 |
