⚠️ Error 상황
(바닐라JS로 웹 커뮤니티 프로젝트 진행중. DB연결 없이 JSON 더미데이터를 연결하여 진행중)
게시글 수정 후 다시 '게시글 상세 페이지'로 이동하니 fetch()에서 에러가 나서 화면이 제대로 뜨지 않음. 하지만 내가 직접 새로고침하면 정상적으로 동작함.
🚨 에러 메세지
ERR_CONNECTION_RESET
ERR_CONNECTION_REFUSED
에러 해결 과정
화면에러는 나지만 백엔드쪽에서 게시글 데이터는 정상적으로 수정된걸 보니 백엔드는 정상적으로 동작하고 있다고 판단했다. 그래서 처음엔 프론트쪽 문제인줄 알고 DOM관련 문제인가 했는데 프론트쪽 fetch()해오는 코드에 로그를 남겨봤는데 fetch()이후의 로그가 출력되지 않는걸 확인했다. 즉, await fetch()에서 오류가 났다는 뜻이다. 어? 근데 백엔드쪽은 제대로 동작하는걸 확인했는데..?
async function fetchPost() {
console.log("fetchPost 진입!");
try {
const response = await fetch(`http://localhost:3000/posts/${postId}`, {
method: "GET",
});
console.log(response); // 로그가 출력되지 않았음.
다시 백엔드쪽으로 넘어가 로그를 출력해보며 테스트를 하는데 내가 남긴 로그들 사이에 [nodemon] restarting due to changes... 이 노드몬 로그가 유독 신경쓰였다.
아 설마..? nodemon으로 서버를 실행하지 않고 node app.js로 실행시키니 에러없이 잘 동작한다. 🫨
에러 원인
nodemon은 프로젝트의 파일 변경을 감지하고 자동으로 서버를 재시작시키는 도구이다.
내가 '게시글 수정 버튼'을 누르니 서버 프로젝트에 위치해 있던 게시글 json파일이 변경되었고, nodemon은 이를 감지하고 자동으로 서버를 껐다가 재시작시킨것이다.
그런데 이 서버를 잠시 끈 동안 클라이언트로부터 요청이 오게되면 정상적으로 응답을 보내지 못하게 된다.
어쩔땐 잘 작동하고 어쩔땐 에러가 떴던 것이 이 이유였다. 운이 좋으면 서버를 껐다가 켜진 후 요청을 보내게 되는것이고 운이 나쁘면 서버가 꺼진 사이 요청을 보내 응답을 받지 못하는 것이다.
어쩐지, 클라이언트에서 setTimeout()으로 요청을 보낼때는 잘 동작하더라. 이 에러때문에 일주일동안 고생했는데... 내 코드가 틀린게 아니라 이렇게 단순한 이유였다니. 너무 허무하다.🫠🫨
