댓글 작성 및 좋아요 기능 구현

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

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

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

• 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))
}

ukcasso code

axios를 이용하여 서버와 프론트에서 데이터를 주고 받는데 get이나 put을 이용하면 body로 request를 받아올수 있지만 delete는 못받온다. 하지만 delete를 이용해서 받아오는 방법을 찾아내서 적어본다. front..

https://ukcasso.tistory.com/90

Axios Delete request with body and headers?

Axios Delete request with body and headers? I'm using Axios while programing in ReactJS and I pretend to send a DELETE request to my server. To do so I need the headers: headers: { 'Authorization': ... } and the body is composed of I've been searching in the inter webs and only found that the DELETE method requires a "param" and accepts no "data".

https://www.py4u.net/discuss/283506

• setValue에 새로운 값을 넣어 value에 넣어주는 과정을 진행 중 value를 업데이트하고 바로 console을 찍어봤는데 계속 initialValue가 찍혔다

• 그래서 값을 잘 못받아오는구나라는 생각이 들어 값을 찍어보니 잘 받아오긴했다…

• 한 2시간 넘게 고민하다가 기동1팀에 조언을 구했고, 렌더링 관련 새로운 사실을 알게 됐다…

• 상태 업데이트 시 setValue를 하면 업데이트 되는게 맞긴하다. 그런데 그 바로 아래 줄에 그 데이터를 출력할 경우, 그 value는 이미 처음에 value를 선언하고 initialValue가 할당되어있는 상태이다.

• 즉 아직 리렌더링이 일어나지않은 상태!

• 그래서 그 값을 꺼내서 렌더된 후 바깥쪽에서 console을 찍어보면 제대로 값이 업데이트 된 사실을 확인할 수 있다…

• 즉 setValue를 이용해 값을 따로 할당해준 것이 아니라 그저 업데이트만 해준 것이기 때문에 리렌더링이 일어나기 전에는 그 이전 값을 가지고 있는 것이다…

• 데이터의 흐름이란 어렵다..아직 완벽한 결론을 내리지는 못하겠다. 공부해보고 다시 정리해봐야겠다.