네트워크 응답 데이터를 로드할 수 없음(status 400 / Network status cancelled) 에러 해결

 

 

(개발환경 : React / Javascript / Next.js)

 

게시판을 만들고 리스트의 제목 부분을 클릭했더니 상세페이지로 이동이 되지 않았다.

근데 계속 그런 건 아니고 이동이 되다가 안 되다가 하는? 현상이었다.

어쩔 땐 페이지로 이동이 안되고, 또 어쩔 땐 이동이 잘만 됐다.

허허 희한하네... 될 거면 되고 안 될거면 안 되지 됐다가 안 됐다가 하는 건 뭐람?

 

가끔 그러니 상관 없지 않나?라고 순간 생각했지만...

사용자 입장에서 생각해 봤을 땐 이런식으로 이동이 잘 안 되면 빡칠 수 있는 경우이기 때문에,

그리고 또 이런 상황이 다시 발생 할 수 있으니까

원인을 알아내서 너무너무 해결하고 싶었다!

 

개발자 도구를 열고, 네트워크탭을 살펴보니 이런 부분들이 확인됐다. 

 

 

 

 

대체 뭐가 문제일까... 구글링을 열심히 했다.

검색어를 나열해보자면

 

네트워크 응답 데이터를 로드할 수 없음

No resource with given identifier found

Network status cancelled

등등...

 

 

그러다가 참고가 될만한 글을 발견했다.

 

What does status=canceled for a resource mean in Chrome Developer Tools?

 

 

이 글이었는데, 아래쪽에 달린 답변들을 확인하다가 

 

event.preventDefault(); 를 추가하라는 답변과

버튼이 POST를 두 번 트리거했다는 답변

 

일단 event.preventDefault 는 태그에 있던 기본 이벤트 동작을 방지하는 메서드이고

뭔가를 두 번 트리거 했다? 내가 뭔가 두번 발생하게 했나? 라는 생각이 들게 했다.

 

그리고 내가 작성한 태그를 살펴보니

 

<script>
  const onClickMoveLink = () => {
    router.push 를 사용한 페이지 이동 함수
  }
</script>

<div id="board_id" onClick={onClickMoveLink}>
  <a href="">제목입니다.</a>
</div>

 

 

페이지 이동하게 하는 함수인 onClick을... div 태그에 넣어줬었다.

그리고 그 안에 a 태그를 넣고 제목을 작성해 뒀던 것.

 

 

a 태그는 기본적으로 페이지 이동 event를 가지고 있다.

그런데 그걸 감싼 div에 또 onClick 이벤트를 줬더니

페이지 이동 이벤트가 두 번 발생한 것이다!!

 

 

그래서 a 태그를 삭제했더니 이상이 없게 되었다.

 

<script>
  const onClickMoveLink = () => {
    router.push 를 사용한 페이지 이동 함수
  }
</script>

<div id="board_id" onClick={onClickMoveLink}>
  제목입니다.
</div>

 

 

---

 

 

 

이렇게 또 문제 하나를 해결하는구나.

뿌듯하다!!