220126 TIL

TIL DAY 165

오늘 배운 일

✔️ Django 웹 개발

1. Form에서 유효성 검증하기

이번에는 폼에서 할 수 있는 유효성 검증에 대해 알아보겠다.

모델에서 썼던 필드 옵션과 Validator 들을 폼 필드에서도 그대로 쓸 수 있는데...

지금은 ModelForm 만을 사용해서 아무런 폼 필드가 없지만 모델을 쓰지 않는 일반 폼의 경우 각각의 폼 필드를 forms.py 에 작성하고 그 때 우리가 배운 필드 옵션과 Validator 들을 적어줄 수 있다.

현재 경우에 모델이 연관되지 않는 데이터를 입력받아야 할 때는 추가적으로 폼 필드를 만들 수 있다.

그러면 한 번 해보겠다!

forms.py 로 가서 다음과 같이 코드를 추가해준다.

그러면 이제 터미널을 켜서 서버를 실행해준다.

http://127.0.0.1:8000/posts/new/

이렇게 posts/new 로 가면 memo 필드가 생겼다.

memo 필드같은 경우에는 예시로 들으거라서 지워준다.

이렇게 필드를 정의할 때 유효성 검사를 작성하는 것외에 다른 방법으로 유효성을 검사할 수 있다.

바로 clean_필드네임을 사용하느 것이다.

그러면 한 번 사용해보겠다.

아까처럼 forms.py 파일에 다음과 같이 코드를 추가해준다.

우선 meta 클래스 아래쪽에 함수를 선언하고 clean_ 하고 유효성 검사를 할 필드명을 적어준다. (예 : title)

다음에 클래스 안쪽에 있는 함수이니까 self 를 인자로 넣어주고 유효성 검즘을 할 데이터를 가져와야한다.

title 이라는 변수에다가 self.cleaned_data 한 다음에 그리고 안에다가 title 를 넣어준다.

모든 Form 클래스는 기본적으로 이 cleaned_data 라는 걸 가지고 있는데 이 cleaned_data 안에는 폼 필드를 정의할 때 넣어준 유효성 검증을 통과한 데이터가 들어있다.

만약 폼 필드를 사용하지 않았다면, 유저가 입력한 데이터가 그대로 넘어오게 된다!

우린 모델 필드에 유효성 검증을 넣어줬기 때문에 여기서 cleaned_data['title'] 에는 유효성 검증이 이루어지지 않은 상태라는 것이다.

그 말은 즉 유저가 입력한 그대로의 값인 것이다.

이 상태에서 title 에다가 유효성 검증을 추가하면 되는데 한 번 따라서 작성해보자!

if 문을 사용해서 제목에 별표가 들어가면 안되는 유효성을 추가해보도록 하겠다.

그럼 이제 ValidationError 를 내주면 되는데 그럴려면 위에다가 import 해준다.

다음으로 raise 를 사용해서 메시지를 출력해준다.

자 이렇게 clean_필드가 Validator 와 다른 점은...

clean_필드는 하나의 필드에 대해서만 검증이 가능하며 유효성 검증 에러를 내는 것과는 관계없이 항상 이런 식으로 return title 해서 cleaned_data 에서 가져온 데이터를 리턴해주어야 한다.

그에 반해서 Validator 는 한 번 정의하면 모델과 폼에서 모두 사용이 가능하고 여러 필드에서 사용이 가능하다.

그러면 이제 코드를 저장하고 다시 서버를 실행해서 확인을 해준다.

http://127.0.0.1:8000/posts/new/

로 가서 제목에 * 를 입력하고 내용에 아무거나 작성하고 전송을 누르면...

별표 는 포함될 수 없습니다 라고 오류 메시지가 잘 출력이된다.

출처 : 코드잇

보면 유효성 검증을 추가할 수 있는 단계가 여러군데있다.

지금 배운 단계만 생각해보면 폼 유효성 검증을 하고 나서 모델 유효성 검증을 한다.

그리고 폼에 폼 필드가 정의되어 있다면 각각의 필드에 정의에 사용된 유효성 검증을 먼저 하고 그 다음에 clean_필드네임을 통해서 유효성 검증을 하게 되는 것이다.

본인이 처리하는 데이터를 어디서 어떤 유효성 검증을 해서 사용하면 좋을지 생각해보고 각 단계별로 유효성 검증을 하면 된다!

2. 내 마음대로 Form 다루기

그러면 이 때까지 작성했던 폼을 보자!

모든 기능이 동작을 하는데 심미적으로 못생겼다.

이번에는 이러한 폼을 입맛에 맞게 사용하는 방법에 대해 알아보겠다.

그러면 post_form.html 로 가서 템플릿을 수정하면 되는데 지금은 django 에서 제공하는 형태로 p 태그를 사용해서 알아서 작성하도록 되어있다.

post_form.html

그런데 우리는 posts/new 의 폼에서 제목은 위로 올리고 글자를 좀 크게 한 다음에 입력하는 위젯은 그 밑으로 내려보겠다.

내용도 마찬가지로 좀 이쁘게 꾸며보도록 하겠다.

이럴 때는 django 에서 위의 post_form.html 처럼 한 번에 적어주는게 아니라 개별 컴포넌트로서 접근이 필요하다.

그러면 따라서 해보자!

post_form.html

h3 태그로 제목과 내용을 적어주고 p 태그로 폼으로 전달된 각각의 필드 이름을 사용해서 가져와준다.

그러면 서버를 다시 실행해서 확인해주면...

http://127.0.0.1:8000/posts/new/

이런 식으로 이쁘게 잘 나타났다.

그런데 밑에처럼 글자를 입력하고 전송을 누르면 유효성 검증에 대한 내용이 아무것도 출력되지 않는다.

전송 버튼을 누른 후...

이건 바로 에러 메시지에 대한 처리를 안 해줬기 때문이다.

django 가 제공하는 폼 렌더 형식 앞에서 설명했었던, as_p 나 as_ul 등을 사용하면 django 가 제공하는 형식을 사용하는 것이므로...

에러 메시지에 대한 표시도 함께 나오지만 지금처럼 따로 커스텀해서 사용하게 된다면 에러 메시지를 표시하도록 만들어줘야 한다.

그러면 새롭게 만들어주자!

post_form.html 로 가서 에러 메시지를 추가해 보도록 하겠다.

에러 메시지를 한 개가 아니라 여러 개일 수 있기 때문에 for 루프를 이용해서 다뤄주면 된다.

그러면 다음과 같이 코드를 작성해준다.

post_form.html

에러가 여러 개일 수 있기 때문에 위에 코드처럼 에러에 접근을 해준 다음에 for 문을 사용해서 출력을 해주면 된다.

내용도 마찬가지로 작성해준다.

에러 메시지는 폼의 필드네임.errors 로 접근할 수 있다.

그러면 코드를 저장해주고 서버를 다시 실행시켜서 확인해본다.

이렇게 중복되는 제목과 @ 와 # 을 넣고 전송 버튼을 누르면...

이런 식으로 에러 메시지가 아래쪽으로 잘 출력되는 것을 알 수 있다.

끝으로 :

• 오늘은 첫 째로 폼에서 폼 필드와 clean_필드네임 메소드를 사용해서 유효성 검증하는 방법에 대해 알아보았다.
• 그리고 두 번째로 폼을 각각의 컴포넌트로 분리해서 사용하는 방법도 마찬가지로 알아보았다.
• 다음에는 폼에다가 CSS 를 입힌다니까 다시 공부할 겸 CSS 를 다시 찾아봐야겠다.