인프런 커뮤니티 질문&답변

웹 독학러님의 프로필 이미지
웹 독학러

작성한 질문수

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

Ant Design Form을 활용한 회원가입 폼 만들기

DJango에서 나오는 에러를 react에 notification으로 나오게 하고 싶습니다.

작성

·

519

0

안녕하세요! 강사님 강의 잘 보고있습니다.  강의보면서 사소하게 개인 포르젝트를 만들어보는  중입니다.

리액트로 회원가입 폼까지 구현한 뒤 이메일(아이디)가 중복된 다든지 비밀번호와 비밀번호가 일치하지 않는 다는 에러 메시지가

장고 cmd창에서는 확인이 가능합니다. 아래는 중복되는 이메일로 가입하려해서 나온 에러입니다.

django.db.utils.IntegrityError: (1062, "Duplicate entry 'testuser@gmail.com' for key 

'accounts_user.email'")

이런식 으로 에러가 뜹니다. 이런 에러는 서버쪽에서는 확인이 가능하지만 리액트로 가져와서 회원들이 가입할 때 확인할 수 있게 하고 싶은데 어떤식으로 가져와야할지 잘 모르겠어서 질문드립니다. 

아래는 시리얼라이저 회원가입 유효성 검사 부분입니다.

class SignupSerializer(serializers.ModelSerializer):
password = serializers.CharField(write_only=True,required=True)
confirm_password = serializers.CharField(write_only=True,required=True)
email = serializers.EmailField(required=True)
nickname = serializers.CharField(required=True)
def create(self, validated_data):
user = User.objects.create(email=validated_data["email"],
nickname=validated_data["nickname"])
user.set_password(validated_data["password"])
user.save()
return user

def validate(self, data):
if not data.get('password') or not data.get('confirm_password'):
raise serializers.ValidationError("Please enter a password and "
"confirm it.")
if data.get('password') != data.get('confirm_password'):
raise serializers.ValidationError("Those passwords don't match.")
return data

class Meta:
model = User
fields = ["pk", "email", "password","confirm_password","nickname"]

리액트에서는 유효성 검사 커스터 마이징이랑 rules를 활용하여 닉네임 공백사용 금지나

비밀번호 입력시 특수문자와 대문자 길이제한 등을 구현해 놓은 상태입니다.

 

회원가입은 잘 작동하는데 중복이나 password와 confirm_password가 일치하지 않을 때 django에서 뜨는 에러를 어떻게 리액트로 가져올 수 있을까요?

 

답변 1

1

이진석님의 프로필 이미지
이진석
지식공유자

안녕하세요.

아래의 에러는 데이터베이스에서 발생하는 에러입니다. 현재 serializer를 사용하셨으니, serializer에서는 유효성 검사가 성공한 후에, 데이터베이스로의 저장을 시도합니다.

django.db.utils.IntegrityError: (1062, "Duplicate entry 'testuser@gmail.com' for key 'accounts_user.email'")

serializer를 통해서 유효성 검사를 잘 구성하셨다면, email 필드에 대해 유일성 체크가 수행되어야 합니다. 그런데 유일성 체크 Rule이 유효성 검사 시에 수행되지 않아서, email 유일성 체크없이 유효성 검사가 통과되고, 중복된 email 값으로 DB로의 저장이 시도된 상황인 것이죠.

보여주신 SignupSerializer 는 ModelSerializer로서 지정된 User 모델로부터 필드정보를 가져와서 자동으로 serializer field를 기본 구성해줍니다. 이때 User 모델의 email 필드에 unique=True 옵션이 지정되어있다면, email 필드에 대한 유일성 체크를 해주는 유효성 검사 로직도 자동으로 추가됩니다.

그런데, SignupSerializer 에서 email = serializers.EmailField(required=True) 의 코드를 통해 email 시리얼라이저 필드를 재정의하셨습니다. 이렇게 쓰시면 ModelSerializer에서 User모델의 email 필드로부터 정보를 가져와서 자동 추가된 email 시리얼라이저 필드가 무시됩니다. 자동 추가된 email 필드에는 유일성 체크 로직도 추가되었는 데 말이죠. // 직접 정의하신 email 시리얼라이저 필드에는 유효성 검사 로직이 없죠. 단순히 required=True 옵션 지정을 통해 필수여부만 체킹하고 있습니다.

ModelSerializer나 ModelForm을 사용하실 때에는, 직접 Serializer Field나 Form Field를 정의하지마시고, 가급적 ModelSerializer / ModelForm이 자동생성해주는 필드를 사용해주세요.

User 모델의 email 필드에 blank=True 옵션이 지정되어있다면, ModelSerializer의 email 필드는 required=False 옵션이 자동 지정되는 데요. required=True 옵션을 지정하실려면, SignupSerializer의 Meta 클래스에 extra_kwargs = { "email": { "required": True } } 를 지정해보세요.

관련 DRF 공식문서 : https://www.django-rest-framework.org/api-guide/serializers/#additional-keyword-arguments

---

그리고, DRF로의 API 요청에서 유효성 검사에 실패하면, 에러 메세지 응답을 받습니다. 그 에러메세지 응답을 리액트 단에서 표현하시면 됩니다. // 브라우저 개발자도구의 Network 탭에서 요청/응답 내역을 항상 확인하시는 습관을 중요합니다.

화이팅입니다. :-)

웹 독학러님의 프로필 이미지
웹 독학러
질문자

감사합니다! 덕분에 빠르게 해결할 수 있었습니다!

ModelSerializer / ModelForm 에서 생성한 필드가 추가적으로 유효성 검사를 해준다고 착각하고 있었네요 ㅠ

공식문서는 사용법만 읽었는데 더 꼼꼼히 읽고 사용해야겠네요. 감사합니다!!

이진석님의 프로필 이미지
이진석
지식공유자

잘 해결하셨습니다. 화이팅입니다~! :-)

웹 독학러님의 프로필 이미지
웹 독학러

작성한 질문수

질문하기