[Javascript] client.js:1 The above error occurred in task removePost Cannot read properties of undefined (reading 'data') RangeError [ERR_HTTP_INVALID_STATUS_CODE]: Invalid status code: 10

 

게시글을 삭제하는데 개발자 도구 브라우저 콘솔에서 위와같은 에러가 떴다. 

 

function* removePost(action) {
  console.log('removePost::', action);
  try {
    const result = yield call(removePostAPI, action.data);
    yield put({
      type: REMOVE_POST_SUCCESS,
      data: result.data,
    });
    yield put({
      type: REMOVE_POST_OF_ME,
      data: action.data,
    });
  } catch (err) {
    console.error(err);
    yield put({
      type: REMOVE_POST_FAILURE,
      data: err.response.data,
    });
  }
}

saga의 해당 제너레이터 함수에서 오류가 발생하는 거였고 백엔드 콘솔을 보니 그쪽에서도 오류가 나고있었다.

 

백엔드에서 나는 오류는 

 

express deprecated res.json(obj, status): Use res.status(status).json(obj) instead routes\post.js:117:21
RangeError [ERR_HTTP_INVALID_STATUS_CODE]: Invalid status code: 10

위와같은 에러내용 이었다. 유효하지않은 상태코드 10 이라는 오류와 함께 위치를 알려주었고, 아래 코드를 보니

router.delete('/:postId', isLoggedIn, async (req, res, next) => {
  // DELETE /post/10
  try {
    await Post.destroy({
      where: {
        id: req.params.postId,
        UserId: req.user.id,
      },
    });
    res.status(200).json({ PostId: parseInt(req.params.postId) }, 10);
  } catch (error) {
    console.error(error);
    next(error);
  }
});

응답해주는 부분이 잘못되어있었다.

 

json에 10을 담고있는데 사실 10이라는 숫자에 대한 나의 의도는 parseInt를 10진수를 지정해주려 했던것이다.

 

(2번째 인자인 radix value를 사용해 일반적인 문자열이 들어오지 않을경우를 대비하고 확실하게 10진을 사용한다는걸 명시해주는 습관을 들이는 중)

router.delete('/:postId', isLoggedIn, async (req, res, next) => {
  // DELETE /post/10
  try {
    await Post.destroy({
      where: {
        id: req.params.postId,
        UserId: req.user.id,
      },
    });
    res.status(200).json({ PostId: parseInt(req.params.postId, 10) });
  } catch (error) {
    console.error(error);
    next(error);
  }
});

아래와 같이 parseInt 두번째 인자의 위치로 10을 옮겨주고 다시 실행

 

 

 

 

백에서도 프론트에서도 성공했다는 결과를 만날 수 있었다.

 

언제나 오타조심 ㅇ_ㅇ