[React.js] delete fetch 시 'Undexpected end of JSON input' 에러

Todo App을 Delete를 구현하다 fetch 후 Delete는 제대로 되었지만, 자꾸 fetch의 try-catch 문에서 error가 잡히면서 위 "Unexpected end of JSON input"에러가 발생했다.

구글링을 통해 알게 된 새로운 사실로는 (스오플 링크) "204 OK"로 오더라도 body값에 아무것도 담겨있지 않은 상태로 왔는데 response.json()을 하니 생긴 에러라고 한다. 해당 에러 메세지가 발생 하지 않도록 아래 처럼 204일 때 분기처리를 해주었다. 해당 코드가 현업에서의 Best Practice인지 아직은 모르지만, 현 상태에선 문제 해결을 위해 만들어 낸 최선의 코드일 것 같다.

 

export const request = async (uri, options = {}) => {
  try {
    const response = await fetch(uri, options);
    // 204일 때, 그냥 return
    if (response.status === 204) {
      return;
    }
    // 원래는 그냥 무조건 ok이면 json()했었다.
    if (response.ok) {
      const json = await response.json();
      return json;
    }
    throw new Error('API통신 실패 => response.ok :', response.ok);
  } catch (e) {
    console.error('API통신 실패 :', e.message);
  }
};

---

원티드 프리온보딩 프론트엔드 과정의 사전 과제로 간단한 ToDo App을 API를 붙여서 만들어 보는 중인데, 간단한 앱이지만 나름 대로 아는것을 복습하고, 깔끔하게 만들어 보기 위해 노력하는 과정에서 배우는게 정말 많다. 

특히나 부트캠프에서 팀프로젝트를 진행할 당시에는 빠른 구현이 중요해서 GET, POST, PUT, DELETE를 스스로 다 구현해볼 기회가 없었다. 이번 기회를 통해 간단하게나마 CRUD를 전부 한사이클 돌려 본것이 정말 재밌었고, 난이도는 낮은 과제였지만 그럼에도 불구하고 성장에 도움이 되는 기회였다는 생각을 한다.