[패스트캠퍼스python] 부트스트랩을 이용한 회원가입페이지만들기, csrf token

파이썬 인강 자기계발 챌린지 31회차 미션
부트스트랩을 이용해 회원가입페이지를 만들어보자

1. 부트스트랩 설정

앱 아래에 만들어놓은 templates폴더안에 register.html 파일을 생성한다.
그 뒤 부트스트랩 홈페이지로 이동한다.

1. head태그안에 부트스트랩 CSS를 복붙한다.
2. head태그안에 부트스트랩 JS를 복붙한다.
3. head태그안에 아래 기본 meta코드를 복붙한다.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

또는

1. 위의 3단계를 생략하고 부트스트랩 Starter template를 복붙해도 된다!

2. Bootstrap’s form styles 적용하기.

부트스트랩 컴포넌즈 폼에서 form태그를 복붙해온뒤 센터정렬이라든지 커스터마이징을 할수있다.
부트스트랩의 기본 폼스타일은 아래 이미지와 같다.
딱 심플 그자체!

기본 폼 스타일에서 커스터마이징을 해보자.
input태그를 추가하여 비밀번호 확인을 만들 수 있다.
input태그를 추가한 후 python manage.py runserver명령어를 입력한 뒤 주소창에 register/를 추가입력해주면 커스터마이징한 웹페이지가 나타난다.

3. html페이지를 view에 연결하기

부트스트랩으로 만든 html페이지를 view에 연결을 해줘야한다.
앱 아래의 views.py파일에서 아래 코드를 입력한다.

view는 항상 request라는 매개변수를 받기때문에 입력을 해주어야한다.

from django.shortcuts import render

def register(request):
    return render(request, 'register.html') #따옴표안에 연결하고싶은 파일의 경로입력

4. url설정

1. 앱 하위에 urls.py파일을 생성한 뒤 아래 코드를 입력해준다
   register는 3번에서 만든 views안의 register함수를 연결해준 것이다.

from django.urls import path
from . import views

urlpatterns = [
    path('register/', views.register),
	#register는 views안의 register함수에 연결하겠다는 의미
]

2. 프로젝트폴더의 동일한 이름으로 자동생성된 파일 하위의 urls.py를 클릭한다.
   urls.py에서 path('앱명/', include('앱명.urls')) 한줄을 추가한다.
   추가한 뒤 전체코드는 아래와 같다.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('앱명/', include('앱명.urls'))
]

3. python3 manage.py runserver 실행.
   잘 연결되었는지 확인을 위해 python3 manage.py runserver를 실행한다.

5. csrf_token

장고를 이용하면 꼭 넣어야하는 코드이고 항상 form태그 안에 위치해야한다.
form의 겨우 데이터를 서버에 전달하는 역할을 하는데 우리 사이트에서 우리 서버로 데이터를 전송하는 것은 문제될것이 없으나 피싱범죄를 목적으로 자신의 웹사이트에서 전송을 하는 경우가 있다.
이를 방지하기 위해, 즉 크로스도메인을 막기위해 암호화된 키를 숨겨놓는다.

참고링크 : CORS 크로스 도메인 이슈와 해결방법

이 코드를 {% csrf_token %}입력을 해놓으면 장고가 알아서 암호화된 키를 생성하고 키검증까지 자동으로 해준다.

<form method="POST" action=".">
	{% csrf_token %}
</form>

여기서 action값을 생략하거나 점(.)을 입력하면 현재페이지 action이 진행된다.
실제 사용예시는 아래와 같다. form태그 밑에 위치하면 된다!