[패스트캠퍼스python] 상속, Django form기능

[패스트캠퍼스python] 상속, Django form기능

파이썬 인강 자기계발 챌린지 34회차 미션

1. 상속

지금까지 회원가입페이지와 로그인페이지를 만들어보았다.
html코드를 보면 알겠지만 두 페이지가 body태그빼고 똑같다.
이럴땐 하나의 템플릿을 만들고 상속을 이용해야한다.

왜냐고?
개발자라면 중복되는 코드는 어떻게든 줄이고싶은 마음이 단전에서부터 부글부글 끓어올라야하기 때문이다!ㅋㅋㅋ




1. base.html만들기

중복되는 html코드를 새로운 html파일에 작성한다.
그리고 중복되는 부분은 아래코드처럼 처리한다.
블럭을 만들고 그 안을 중복되지않은 코드들로 채워넣는 것이다.

1
2
{% block 원하는이름작성 %}
{% endblock %}




2. {% extends “이름.html” %}로 상속받기

base.html을 상속받아서 사용할 수 있는 코드는 아래와 같다.
extends로 먼저 상속받은 뒤 block안에 중복되지않는 html코드들을 입력하면 된다.

1
2
3
4
5
{% extends "base.html" %}

{% block 원하는이름작성 %}
# 중복되지 않는 HTML코드입력
{% endblock %}

위의 이미지에서 2번(오른쪽부분)은 중복되는 코드들을 정리해놓은 HTML태그이고 block를 contents라는 이름으로 지정했다.
1번(화면왼쪽)부분은 contents라는 block사이에 중복되지않은 html코드를 작성했다.
runserver를 이용하면 정상적으로 실행됨을 알 수 있다.

이렇듯 상속을 이용하면 전체코드를 수정해야할 일이 생길때 일일이 모든 페이지를 수정하지않아도 된다.
그냥 base.html페이지만 수정하면 상속받은 모든 코드가 자동으로 수정되기때문이다! 개이득!!!




2. Django form기능

이때까지 html태그로 form태그를 만들어 사용하였다. 하지만 Django에서 자체적으로 제공하는 form기능을 이용하면 훨씬 가독성있는 코드를 짤 수 있다.

1. forms.py 파일생성하기

fcuser폴더 하위에 forms.py를 생성한 뒤 django에서 forms기능을 import해줘야한다.

아래 코드는 로그인폼을 만드는 코드로 username과 password를 만든다.

1
2
3
4
5
from django import forms

class LoginForm(forms.Form):
username = forms.CharField(max_length=32)
password = forms.CharField()




2. view.py 코드 수정

django에서 form기능을 import한 뒤 기존 코드는 싹 지우고 아래 코드를 작성하면 끝.
단 3줄에 완성할수있다! 신기!

1
2
3
4
# 로그인페이지만들기(django의 form기능이용)
def login(request):
form = LoginForm() #클래스변수를 만들고 템플릿에 전달
return render(request, 'login.html', {'form':form})




3. login.html에 {{ form }} 기능 추가

기존 form태그안에 로그인과 비밀번호 input태그를 삭제한 후 아래 코드를 입력하면 끝!
그 많던 html코드가 python 한줄로 완성된다!

1
{{ form }}

위의 코드들을 기존의 html코드들과 비교해보자.

위의 이미지는 왼쪽은 login.html이고 오른쪽은 views.py이다.
빨간선을 기준으로 1번부분(위쪽)은 html의 form태그를 이용해서 작성한 코드이다.
2번부분(아래)은 django의 form기능을 이용해서 작성한 코드이다.
한 눈에 봐도 수많은 코드들이 단 몇줄로 깔끔하게 정리되고 심지어 가독성도 있어보임을 알 수 있다.

그렇다면 출력값도 같을까?

따로 여백을 주지않은채로 진행했기때문에 inline형태로 출력되었지만 특별한 기능이 들어가있다.
바로 입력을 하지않으면 알림창이 떠서 모든값을 입력해야지 로그인버튼을 누르고 home페이지로 넘어갈 수 있다.
이를 유효성체크라고 하는데 따로 코드를 작성하지않아도 자동으로 들어가있어 엄청 유용한 기능이다.

Comments