개발일지?/내배캠

캠프 15주 3일차 TIL : serializer custom, serializers.%Field(source="모델명.필드명")

규파팡 2023. 6. 21. 20:32

필요한 데이터를 뽑기 위해서 사용 중인 serializer를 수정해 줬다. 커스텀은 항상 재밌고 눈에 보이는 결과가 있어서 작업할 때 재밌다. 오늘 커스텀한 부분은 마이페이지에서 로그인한 유저가 작성한 게시글 댓글 북마크 부분이었다 커스텀 한 이유는 필요한 필드값들을 갖고 오기 위해서였다.

처음에는 이렇게 작성일(created_at), 수정일(updated_at), 활성상태(db_status), 게시글(article), 북마크 id값(id) 작성자(user) 정도만 출력이 됐다. 그래서 postman에서 데이터를 보면 아래와 같이 나오고 프론트 부분에서도 확인하면

이렇게만 보였다... 이것도 해당영역을 클릭하면 북마크 한 게시물로 이동한다. 근데 내가 뭐가 좋아서 북마크 했는지 알 수가 없다.

 

그래서 필요한 게 뭔지 확인하고 북마크니깐 제목이 있으면 좋겠다 싶었고 그래서 추가해 준 게 

class BookMarkSerializer(serializers.ModelSerializer):
    article_title = serializers.CharField(source="article.title")

    class Meta:
        model = BookMark
        fields = "__all__"

article_title이었다 이 부분은 bookmark모델에 ForeignKey로 연결된 article필드를 가져올 때사용해 주는 걸로 source에 작성한 대로 article.title필드를 가져온다.라는 의미로 사용됐다.

그러면 위에 이미지와 다르게 article_title부분이 추가돼서 북마크 페이지에서 더 자세히 데이터를 보여줄 수 있다.

각 게시글의 제목은 가져왔는데 내 용도 보이고 싶었다. 커스텀은 이 맛?

그래서 간단하게 article.content를 가져왔다

article_content = serializers.CharField(source="article.content")

이렇게 가져오고 앞에 serializer에다가 추가만 해주면 된다.

class BookMarkSerializer(serializers.ModelSerializer):
    article_title = serializers.CharField(source="article.title")
    article_content = serializers.CharField(source="article.content")

    class Meta:
        model = BookMark
        fields = "__all__"

이렇게 하면 title, content를 가져와서 제목과 내용을 출력해 줄 수 있다.

그리고 위에 말한 거처럼 해당북마크를 클릭하면 게시글로 이동해야 하기 떄문에 추가로 article_id값을 받아 와야 한다.

그럼 위에서 한 거처럼 id를 추가해 주면 된다. 이때 북마크 id값이랑 헷갈릴 수 있으니 네이밍을 주의해서 해주자

나는 여기서 article_id라고 해줬다. 

이렇게 하면 이제 해당영역클릭 시 게시글로 이동이 가능해진다 물론 프론트에서 따로 작업도 해줘 야한다. url을 맞춰야 하고 for문도 돌려줘야 하고 이 부분은 js관련해서 작성할 때 추가로 설명하겠다.

그리고 이외에도 추가적으로 몇몇 필드를 더추가했다.

내용이 많아져서 1개의 데이터 만가 져 왔다.

내가 추가한 건 대표이미지(main_image)랑 작성자(article_user) 2가지 필드를 더 가져왔다.  

최종적으로 대표이미지 제목 내용 작성자 + 클릭 시 해당게시글로이 동하기 위한 게시글 id까지 각필드명은 처음 말할 때 영문명과 함께 표기했다. 영어랑 친해지기 위해 최대한영문으로 작성하려고 하는데 2번 쓰는 건 보기도불편? 하고 어쩌면 더 편할지도....? 나만의 공간이니깐 보기 쉽게 작성한 것에 의의를 이와 유사하게 comment부분도작업했다 댓글 부분이다. 유사하다 못해 똑같아서 뭐라 더 할 게 없긴 하다 그리고 추가로 전체 코드를 공유하겠다.

class BookMarkSerializer(serializers.ModelSerializer):
    article_id = serializers.IntegerField(source="article.id")
    article_user = serializers.CharField(source="user.username")
    article_title = serializers.CharField(source="article.title")
    article_content = serializers.CharField(source="article.content")
    article_main_image = serializers.ImageField(source="article.main_image")

    class Meta:
        model = BookMark
        fields = "__all__"

아 그리고 이미지 같은 경우는 CharField를 사용하면 경로가 안 뜨고 파일명만 뜬다. 그래서 ImageField로 변경해 주었더니 위 postman처럼 경로명이 떠줬다 그래서 간편하게 프론트에서 url연결 작업을 했다.

오늘의 규파팡이 느낀 점!

진짜 간단한 부분인데 하고 나서 나름 뿌듯했던....?

TIL 대표이미지