백엔드와 연동(2)

프론트 UI가 어느정도 만들어진 후

백엔드와 연동을 해야하는 마지막 과제가 남아있다.

 

백엔드 연동은 .post일 때와 .get일때 과정이 달라진다. .post에 대해 알아보자.

 

 

.post

 

post는 프론트에서 백엔드로 정보를 전달할 때(서버로 데이터를 보낼 때) 쓰이게 된다.

 

post가 쓰이는 상황을 예시로 들어보자

 

 

먼저 하고자 하는 바는

게시글을 생성하고, 해당 게시글의 데이터를 백으로 전송하는 기능을 구현하자. 성공 시에는 홈 페이지로 이동하도록 만들자.

이다.

 

Swagger의 api는

export const PostWriteApi = async (body: FormData) => {
  const { data } = await defaultInstance.post('/post/create', {
    body,
  });

  return data;
};

PostWriteApi 함수는 ' defaultInstance.post'를 사용하여 '/post/create' 앤드포인트에 'post' 요청을 보내는 비동기 함수이다.

 

이 함수는 'body' 라는 객체를 매개변수로 받아와서 해당 데이터를 서버로 전송한다.

 

  const postWriteCreateQuery = useMutation(PostWriteApi, {
    onSuccess: () => router.push('/home'),
  });
  
  const postOnClick = () => {
    const newwriteBody = {
        title: write?.title, 
        content: write?.content, 
        isPr: true,
        isPrivate: privateMode === 'private' ? true : false,
        categoryId: Number (write? params?. categoryId) ,
        hashtags: write?.tags,
    };
    postwriteCreateQuery.mutate(newwriteBody);
};

useMutation 훅을 사용하여 'PostWriteApi' 함수를 래핑한 'postWriteCreateQuery'를 생성한다.

 

'onSuccess' 옵션을 사용하여  이 함수가 성공적으로 요청되었을 때

'router.push('/home')'를 호출하여 페이지를 이동한다.

 

그 다음

게시글을 생성하는데 필요한 데이터를 준비하고, 게시글 생성 요청을 하는

'postOnClick' 함수를 만든다.

 

'newriteBody' 객체는 게시글의 정보를 담아둔다.

이 객체를 'postWriteCreateQuery.mutate(newwriteBody)'에 담아서

PostWriteApi에 newwriteBody를 body에 넘겨주고, 

성공했을 시 '/home' 페이지로 이동하게 된다.