Portfolio

댓글 추가를 위한 API 요청 시 Authorization 잘 이뤄지지않는 문제가 있었음

Token은 받아와서 JSON.parse 를 해주지않아서 생기는 문제였고, utils의 API 로직 수정을 통해 해결함

댓글 추가는 되나 화면에 렌더링 시 새로고침을 해야만 적용되는 문제가 있었음

useEffect로 댓글의 리스트를 감시하여 변경 될 때마다 API를 받아오게했었는데 useState도 함께 사용하다보니 무한히 API를 받아오는 이슈 발생

댓글 리스트를 받아오는 API의 경우 useEffect의 두번째 인자로 []를 넣어주어 처음 렌더링 된 후 한번만 받아오게했고, 이후 추가되는 댓글의 경우 useState를 이용해 관리해주니 변경 부분만 렌더링 가능

get이나 put을 이용하면 body로 request를 받아올수 있지만 delete는 못받아옴!!

post 요청으로 댓글을 생성할 때와 delete 요청으로 댓글을 삭제할 때, 토큰을 이용한 인증 과정을 거쳐야한다

댓글 생성을 잘 해결했고 삭제도 똑같은 로직으로 작성했는데 계속 토큰이 안넘어가서 에러가 셍겼다...

이유를 몰라서 찾아보던 중 알게된 사실 Delete 메소드는 헤더와 데이터를 보낼 때, 아래와 같은 방식으로 보내주어야한다...즉 Delete 메소드는 params(매개변수)가 필요하고 data를 그대로 보내는 방식을 허용하지않는다

api utils Auth 수정을 통해 해결!!


// axios.delete(URL, {params: {foo: 'bar'}})
axios.delete(URL, {
  headers: {
    Authorization: authorizationToken
  },
  data: {
    source: source
  }
});


// post 요청은 아래와 같은 방식 가능 
axios.post(URL, 
 { comment: newComment, postId: Id },
 {
  headers: {
    Authorization: authorizationToken
  })


// utils Api.js 수정
export const Authorization = async (url, method, data) => {
  const { tokenId } = JSON.parse(sessionStorage.getItem('authUser'))
  return await axios({
    url,
    method,
    headers: { Authorization: Bearer ${tokenId} },
    data: data,
  })
    .then((res) => res.data)
    .catch((e) => console.error(e))
}