당우 일기장

장고 로그인기능만들기 본문

내일배움캠프

장고 로그인기능만들기

당우 2022. 2. 21. 20:37

1장고 프로젝트만들기

파이참을키고

파일 → 새 프로젝트 들어가신 후,

왼쪽 메뉴에서 django 선택,

오른쪽에서 new environment using virtualenv 체크해주세요!

그러고 create 버튼을 눌러주세요!

 

2. 가상환경 만들기

virtualenv venv # venv 라는 이름의 가상환경을 만듭니다!

source venv/bin/activate # venv 라는 이름의 가상환경을 실행합니다!

pip install django # pycharm 은 django 프로젝트를 만들면 자동으로 django 패키지를 설치해주기에, 따로 설치하는 과정이 없습니다! 

 

3. 실행해보기

Pycharm 에서는 문제없이 프로젝트가 생성되었다면, 오른쪽 상단에 표시됩니다.

여기서 초록색 재생 버튼 을 눌러주세요!

(python manage.py runserver)

하단에 주소가 표시될텐데, 여기서 http://127.0.0.1:8000/ 눌러서 접속해봅시다!

 

4. 프로젝트 시작을 위한 세팅

현재 폴더 구조는 아래와 같을텐데, 이렇게 두면 헷갈립니다.

django_basic 폴더 내부에 django_basic 이라는 똑같은 이름의 폴더가 존재하는데,

내부의 폴더는 프로젝트의 config 파일들을 담고 있습니다.

해당 폴더를 config 라는 이름으로 바꾸어 직관적인 파일 구조를 가질 수 있도록 해주겠습니다!

해당 폴더를 오른쪽 마우스 클릭하신 후, rename 버튼을 누르시고

config 라고 입력하신 뒤, refactor 버튼을 눌러주세요.

그러면 화면 하단에 아래처럼 표시되는데, Do Refactor 버튼을 꼭 눌러주세요!

이후 settings.py 로 가셔서, ROOT_URLCONF 를 config.urls 로 변경해주세요

이후 오른쪽 상단에서 edit configurations 를 누르시고,

여기 environment variables 에 입력된 값 중에서 DJANGO_SETTINGS_MODULE=django_basic.settings 라고 된 것을 config.settings 라고 변경해주세요!

(그냥 애초부터 DJANGO_SETTINGS_MODULE=.settings 라고 되어있는 경우도 있으니 당황하지 마시고 config.settings 로 입력해주세요!)

그러고 실행했을 때 정상적으로 작동하는지 확인해봅시다!

 

 

5.User, Blog 앱 생성 후 settings.py, urls.py 작성

 

이제 앱을 생성해봅시다!

Pycharm 에서 터미널을 열어보시면, 아래처럼 (venv) 가 표시되어있을겁니다!

 

*혹시 표시가 안되시는 윈도우 분들은 preferences (설정) → tools (도구) → terminal (터미널) 내부의 shell path 를 c:\\windows\\system32\\cmd.exe 로 변경해주신 후에, pycharm 에 열린 터미널을 종료하시고, 다시 pycharm 에서 터미널을 실행해보세요. (종료하실 때는 터미널 화면 상에서 - 버튼이 아니라 x 버튼을 누르셔야 합니다.)

터미널에 (venv) 가 표시되었다면, 아래와 같이 입력해주세요. user 라는 이름의 앱과 blog 라는 이름의 앱을 만들어주는 겁니다!

django-admin startapp use

django-admin startapp blog

이제 settings.py 내부의 INSTALLED_APPS 에 해당 앱을 추가해주세요. (추가를 해야만 장고 프로젝트가 해당 앱들이 존재한다는 사실을 인지하게 됩니다!)

그리고 blog 폴더와 user 폴더 안에 각각 urls.py 라는 파일을 생성해주세요.

 

각각의 urls.py 에는 아래처럼 입력을 해주세요!

from django.urls import path from . import views urlpatterns = [ ]

 

이제는 config 폴더 안의 urls.py 를 열어서 아래와 같이 두 줄을 추가해주세요.

 

from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('blog.urls')), # blog 앱이 가진 url 을 프로젝트에서 사용하겠다는 뜻! path('', include('user.urls')) # user 앱이 가진 url 을 프로젝트에서 사용하겠다는 뜻! ]

 

이제 templates 폴더 안에다가 user 라는 이름의 폴더와 blog 라는 이름의 폴더를 각각 만들어주세요.

앞으로 html 관련 파일들은 모두 해당 폴더에 들어가게 될겁니다!

이러면 기본적인 세팅은 완료되었습니다!

 

 

3. 드디어 로그인 회원가입을 구현 해봅시다!

회원가입 구현하기

user/views.py

views.py 의 최상단에서 아래와 같이 패키지를 임포트합니다.

from django.shortcuts import render, redirect from django.contrib import auth from django.contrib.auth.models import User from django.contrib.auth.decorators import login_required

이후 아래에 signup 함수를 작성합니다

def signup(request): if request.method == 'POST': found_user = User.objects.filter(username=request.POST['username']) if len(found_user) > 0: return render(request, 'user/signup.html', {'error': 'username이 이미 존재합니다.'}) else: new_user = User.objects.create_user( username = request.POST['username'], password = request.POST['password'] ) auth.login(request, new_user) return redirect('index') else: return render(request, 'user/signup.html')

 

user/urls.py

from django.urls import path from . import views urlpatterns = [ path('signup', views.signup, name='signup'), ]

 

templates/user/signup.html

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>회원가입</h1> {% if error %} <h3>{{ error }}</h3> {% endif %} <form method="POST"> {% csrf_token %} <input name="username"> <input type="password" name="password"/> <button type="submit">가입하기</button> </form> </body> </html>

 

로그인 구현하기

user/views.py

signup 함수 아래에 signin 함수를 작성합니다.

def signin(request): if request.method == 'POST': found_user = auth.authenticate(request, username = request.POST['username'], password = request.POST['password'] ) if found_user is not None: auth.login(request, found_user) return redirect('index') else: return render(request, 'user/signin.html', {'error': '유저가 존재하지 않습니다.'}) else: return render(request, 'user/signin.html')

 

from django.urls import path from . import views urlpatterns = [ path('signup', views.signup, name='signup'), path('signin', views.signin, name='signin'), # signin 추가!

 

 

templates/user/signin.html

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>로그인</h1> {% if error %} <h3>{{ error }}</h3> {% endif %} <form method="POST"> {% csrf_token %} <input name="username"> <input type="password" name="password"/> <button type="submit">로그인</button> </form> </body> </html>

 

로그아웃 구현하기

 

user/views.py

signin 함수 아래에 signout 함수를 작성합니다.

 

@login_required(login_url='signin') def signout(request): auth.logout(request) return redirect('index')

 

user/urls.py

 

from django.urls import path from . import views urlpatterns = [ path('signin', views.signin, name='signin'), path('signup', views.signup, name='signup'), path('signout', views.signout, name='signout'), # signout 추가! ]

 

실행해서 실제로 되는지 확인 해보기

blog/views.py

from django.shortcuts import render # Create your views here. def index(request): return render(request, 'blog/index.html')

 

blog/urls.py

 

from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), ]

 

templates/blog/index.html

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> {% if user.is_authenticated %} <a href="{% url 'signout' %}">로그아웃</a> {% else %} <a href="{% url 'signin' %}">로그인</a> <a href="{% url 'signup' %}">회원가입</a> {% endif %} </div> </body> </html>

 

 

 

makemigrations 를 통해서 db 생성 준비 작업을 진행해주고,

python [manage.py](<http://manage.py>) makemigrations

(아직은 우리가 직접 만든 모델이 있는 것은 아니기에 no changes detected 라고 뜨는 것이 정상입니다.)

migrate 를 통해서 db 를 생성해줍시다!

python manage.py migrate

OK 라고 쭉 표시되면 정상입니다!

이제 서버를 실행해봅시다!

회원가입하면 자동 로그인되도록 설정되어있으므로, 회원가입하신 후에는 화면이 로그아웃만 뜨는 화면으로 바뀔겁니다!

 

여기서 로그아웃을 눌러보시면 다시 로그인/회원가입 버튼만 표시되는 것을 확인할 수 있습니다! (정상적으로 로그아웃이 되었습니다)

'내일배움캠프' 카테고리의 다른 글

django project [22.03.07 til]  (0) 2022.03.07
kpt 유화처리 프로젝트 회고  (0) 2022.03.03
스파르타코딩클럽/장고넷플릭스코딩클론/honflix/kpt /회고록  (0) 2022.02.09
스파르타 s.a  (0) 2022.01.27
html / css 를 이용한 카카오톡 클론코딩  (0) 2021.12.23
'내일배움캠프' Related Articles more