2024.09.11

axios.patch

 

프로필 닉네임 변경을 위해 axios.patch를 사용한다는 것, patch는 body가 필요하다는 것

은 알겠는데.. 코드 작성법을 모른다.

axios 메소드를 사용할 때, HTTP요청은 기본적으로 세가지 인자를 받는다.

1. URL : 요청을 보낼 엔드포인트

2. 데이터: 서버로 전달할 본문 데이터

3. 옵션/설정: 헤더, 쿼리 파라미터 등 추가 설정

 

 

axios.patch의 두 번째 인자로는 요청 본문(body)에 해당하는 데이터를 보내주고,

세 번째 인자로는 헤더와 같은 추가 설정을 넘겨줘야 한다.

 

export const updateProfile = async (formData) => {
    try {
        const response = await axios.patch(${API_URL}/profile, formData.nickname, {
            headers: {
                Authorization: Bearer ${formData.accessToken}
            }
        });
        return response.data;
    } catch (error) {
        return error.response.data;
    }
};

 

작성한 코드처럼 axios.patch에 본문 데이터를 formData.nickname으로 직접 전달하는 방식은 올바르지 않다.

patch 요청의 본문은 객체 형태여야 하기 때문!

 

1. 서버에 전달할 데이터 형식: 서버는 보통 JSON 형식의 데이터인 여기서는 nickname이라는 키와 그 값으로 구성된 객체를 받아야 한다. formatData.nickname을 그대로 전달하면 문자열만 전달되기 때문에 서버가 제대로 처리를 못 할 수 있다.

 

2. 명확한 필드 지정: {nickname: formData.nickname}과 같은 객체를 전달하면, 서버는 어떤 필드를 업데이트할 것인지 명확히 알 수 있다. 즉, nicname이라는 필드의 값이 변경된다고 서버에 알려주는 것이다.

 

 

 

Zustand

changeNickName: (data) =>
                set(() => ({
                    user: {
                        ...user,
                        nickname: data.nickname
                    }
                }))
        }),

...user을 찾을 수 없다는 에러가 발생했다.

 

changeNickName 함수에서 사용하고 있는 user가 정의되지 않아서 발생한 문제.

함수 내부에서 user 상태를 참조하려면 set 함수 안에서 현재 상태를 받아와야 한다.

 

state는 zustand에서 제공하는 현재 스토어 상태를 나타내는 객체다.

zustand는 상태 관리를 간단하게 하기 위해 set과 get 함수를 사용하며,

set함수는 상태를 업데이트 할 때, get함수는 현재 상태를 가져올 때사용한다.

 

set((state) => {...})는 상태 업데이트 시 state로 현재 상태를 받아 필요한 부분만 변경하고

나머지 부분은 그대로 유지한다.

...state.user는 기존 user 객체의 속성을 복사하고, nickname같은 특정 속성만 덮어씌운다.

            changeNickName: (data) =>
                set((state) => ({
                    user: {
                        ...state.user,
                        nickname: data.nickname
                    }
                }))
        }),