프로필 기능 구현해보기

프로필 기능 구현 코드

#urls.py
path('<int:user_id>/', views.ProfileView.as_view(), name='profile_view'),

#serializers.py
class UserProfileSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ("username", "email", "password")

#views.py
class ProfileView(APIView):
    def get(self, request, user_id):
        user = get_object_or_404(User, id=user_id)
        serializer = UserSerializer(user)
        return Response(serializer.data, status=status.HTTP_200_OK)

    def put(self, request, user_id):
        user = request.user
        serializer = UserProfileSerializer(user, data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=status.HTTP_200_OK)
        else:
            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

def get 함수를 통해 로그인 된 유저 정보를 가져오고
def put 함수를 통해 프로필 정보를 수정하는 코드를 작성했다.

포스트맨을 통해 프로필을 수정할 수 있음을 확인했으며 DB에도 업데이트 된 모습을 확인할 수 있었다.

#api.js 
프론트엔드 프로필 적용 코드

async function ProfileUpdate() {
    const payload = localStorage.getItem("payload");
    const parsed_payload = await JSON.parse(payload)
    console.log(parsed_payload)

    user_id = parsed_payload.user_id


    const profiledata = {
        username : document.getElementById("profileusername").value,
        email : document.getElementById("profileemail").value,
        password : document.getElementById("profilepassword").value
    }

    const response = await fetch(`http://127.0.0.1:8000/users/${user_id}/`, {
        headers: {
            "Authorization" : "Bearer" + localStorage.getItem("access"),
            'content-type': 'application/json',
        },
        method: 'PUT',
        body: JSON.stringify(profiledata)
    })

    console.log(response)

    if (response.status==201){
        window.location.replace('http://127.0.0.1:5500/');
    } else {
        alert(response.status)
    }}

하지만 프론트엔드에서 입력한 정보가 함수로 넘어가지지 않는다.
회원가입 기능을 프론트엔드로 넘길때와 비슷하다고 생각했는데 무슨 문제로 안되는지 결국 해결하지 못했다. 퓨어 장고에서 Rest framework로 넘어가니 templates를 사용하지 않고 프론트엔드와 연동하는것이 상당히 어렵다.