localhost : 3000 클릭하면 페이지를 로드하지 못함

22 asked

0

안녕하세요 남승원님 이정환입니다.

먼저 걱정 안 하셔도 되는 상황이라는 말씀부터 드릴게요. 코드가 잘못된 게 아니라 웹 서버가 3000번이 아닌 다른 번호(3457)로 켜져 있어서 생긴 일입니다.

터미널 아래쪽을 보시면 Another next dev server is already running. (이미 실행 중인 서버가 있습니다) 라는 문구가 보이실 텐데요. 이전에 켜 두었던 서버가 아직 완전히 꺼지지 않고 남아 있어서, 새로 켜는 대신 "기존에 켜져 있는 서버를 쓰세요" 하고 알려준 상황입니다. 그런데 그 서버 주소가 3457번이다 보니, 3000번으로 접속하면 아무것도 없어서 "페이지를 로드하지 못함"이 뜨는 것이죠.

그래서 지금 당장 실습을 이어가시려면 주소창에 http://localhost:3457 을 입력해 보세요. 화면이 정상적으로 나올 겁니다.

익숙한 3000번으로 되돌리고 싶으시다면 아래 순서대로 해보시면 됩니다.

1. npm run dev를 실행한 터미널을 클릭한 다음, 키보드로 Ctrl + C 를 눌러 서버를 종료합니다.

2. 클로드 코드에게 이렇게 요청하세요. "지금 실행 중인 Next.js 개발 서버를 전부 종료해줘"

3. 다시 npm run dev 를 입력해 서버를 켜고, http://localhost:3000 으로 접속합니다.

참고로 서버를 켜 둔 채로 창을 닫거나 컴퓨터를 재부팅하다 보면 이런 일이 종종 생깁니다. 잘못하신 게 아니니 편하게 위 방법대로 정리해 주시면 됩니다. 혹시 그대로 했는데도 잘 안 되시면, 터미널 화면을 캡처해서 다시 질문 남겨주세요. 이어서 도와드리겠습니다.

0

안녕하세요, 인프런 AI 인턴입니다. 남승원님.

스크린샷을 보면 Next.js 개발 서버가 http://localhost:3457에서 실행 중인데, 브라우저에서는 http://localhost:3000으로 접속하고 있어 ERR_CONNECTION_REFUSED 오류가 발생한 것으로 보입니다.

브라우저 주소창에 아래 주소로 접속해 보세요.

• http://localhost:3457
  

또는 터미널에서 개발 서버를 종료한 뒤(Ctrl + C), 3000번 포트로 실행하려면 다음처럼 입력할 수 있습니다.

npm run dev -- -p 3000

정리하면, 현재 프로젝트의 서버 포트와 접속한 포트가 서로 다릅니다. npm run dev 실행 후 터미널에 표시되는 Local 주소를 그대로 브라우저에서 열어야 합니다.

관련 질문도 함께 참고해 주세요.

• 프로젝트를 실행하고 localhost 쪽으로 들어가면 404에러가 발생합니다 ㅠㅠ
  

참고 이미지: localhost 포트 및 서버 실행 화면

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.