기록의 힘

프론트 UI가 어느정도 만들어진 후 백엔드와 연동을 해야하는 마지막 과제가 남아있다. 백엔드 연동은 .post일 때와 .get일때 과정이 달라진다. .post에 대해 알아보자. .post post는 프론트에서 백엔드로 정보를 전달할 때(서버로 데이터를 보낼 때) 쓰이게 된다. post가 쓰이는 상황을 예시로 들어보자 먼저 하고자 하는 바는 게시글을 생성하고, 해당 게시글의 데이터를 백으로 전송하는 기능을 구현하자. 성공 시에는 홈 페이지로 이동하도록 만들자. 이다. Swagger의 api는 export const PostWriteApi = async (body: FormData) => { const { data } = await defaultInstance.post('/post/create', { bod..

프론트 UI가 어느정도 만들어진 후 백엔드와 연동을 해야하는 마지막 과제가 남아있다. 백엔드 연동은 .post일 때와 .get일때 과정이 달라진다. 먼저 .get부터 알아보자. .get get을 써야할 때는 프론트앤드에서 필요한 데이터를 백엔드에서 가져올 때 사용된다. get이 쓰이는 상황을 예시로 들어보자 먼저 하고자 하는 바는 React 컴포넌트에서 게시글을 조회하고 상태를 다룰 수 있도록 get을 이용해 게시글 정보를 불러오자 이고, 해당 게시글의 api 명세는 export interface IPostContent { author?: { nickname?: string; profileImage?: string; userId?: number; }; blogUrl?: string; content?: s..

스웨거를 통해 백엔드와 통신을 해보자!! 스웨거는 우리가 코드로 구현하기 전에 미리 정보를 주고 받을 수 있는 사이트이다. 무슨 resport가 나오는지, user 정보가 잘 전달되는지 확인할 수 있다. Swagger 사용 swagger를 사용하는 예시를 들어보자. 회원가입시 데이터를 주고받을 때 오른쪽 위에 try it out을 눌러 예시 데이터에 원하는 값을 넣을 수 있다. 이렇게 원하는 값을 바꿔 넣으면 201 코드가 뜨면 오류 없이 값을 줬다는 의미이다. 위의 정보들은 response.data에 넘어오게 되는데 예를들어, username을 알고 싶다면 객체를 타고 들어가 response.data.username 으로 찾으면 되는 것이다. 또 다른 예시로 로그인을 요청할 때를 예시로 들어보면 로그인..