:ledger: [vue.js] 사이트에 연결할 수 없음 에러

error-image

vue.js 환경에서 사이트에 연결할 수 없음 에러가 노출되었을 때 해결한 방법입니다.

:one: 개요

로컬에서 작업중에 갑자기 “사이트에 연결할 수 없음” 에러가 노출되었다. vue.js에서 코드가 잘못되면 해당 ui가 노출되지 않는데, 갑자기 사이트가 연결할 수 없음으로 노출되어 당황해서 원인을 찾기위해 아래와 같이 확인해보았다.

  1. 에러 노출 몇분 전 dev에서 pull을 받고 나의 브랜치에서 merge 했을 때 혹시나 .env 파일이 변경된건가 확인해봤지만 변경되지 않았다.
  2. 페이지가 나왔다 안나왔다 하다가 결국 안나오게 되었는데, 당시에 콘솔을 확인해봐도 문제되었던 것은 없었다.
  3. 백엔드 개발자분께 확인 요청드렸는데, 별다른 수정은 안했다고 해서 다시 나의 코드를 확인해보았다.

:two: 원인

깃 히스토리를 확인하고 변경된 사항에서 문제가 될만한 변경 내역은 못찾았다.. 그렇게 같이 협업하는 개발자분께도 도움을 요청드리고 확인해보았지만, 정말 어처구니 없게도 개발 서버가 끊긴거였다. (ㅎㅎ;) 이렇게 갑자기 끊어질 수 있는지는 몰랐어서 사방팔방 들쑤시고 다녔던 것..! 이렇게 갑자기 개발서버가 끊어질 수 있는 이유는 아래와 같다고 한다.

  1. 인터넷 연결 문제일 수 있다.
  2. 서버와의 네트워크 경로에 장애가 발생한걸 수 있다.
  3. 터미널에서 서버 프로세스를 강제 종료하거나 에러로 인해 종료된걸 수 있다.

등등 있는데 아무래도 유력한건 3번이었던 것 같다.

:three: 해결방법

다시 개발 서버를 켰다. (어이없)

:fire: 마무리

갑작스럽게 문제가 생겨 아무리 검색해도 안나오는데, 내가 뭔갈 잘못했다고 생각하다 보니 간단하게 생각할 걸 너무 어렵게 생각한 문제였다. 이후로 같은 상황이 발생해도 당황하지 않도록 해야겠다.