트러블 슈팅 - VSCode SSH 원격 접속 시 Next.js 개발 서버 무한 로딩 현상 해결 방법

문제 현상

VSCode SSH 원격 접속 환경에서 Next.js 개발 서버를 실행하면 localhost:33000에서 무한 로딩이 발생하는 현상이 있었음.
특이한 점은 외부 도메인(예: dombtido.iptime.org:33000)으로의 접속은 정상적으로 이루어졌다는 점.

발생 상황

다음과 같은 특이한 현상들이 관찰됨.

• localhost:33000으로 접속 시 무한 로딩 발생
• VSCode를 재시작하면 일시적으로 문제가 해결됨
• 개발 서버 종료 후에도 포트가 즉시 해제되지 않음

증상

1. lsof -i :33000 명령어로 확인 시 포트 사용이 없음
2. 그럼에도 localhost:33000 접속 시 브라우저가 응답을 계속 대기
3. VSCode 재시작 시에만 문제 해결

예상 원인

1. 네트워크 스택 상태 불일치

• MacBook Sleep Mode 진입 시 비정상적 프로세스 종료
• TCP/IP 스택의 백로그 큐에 남은 연결 요청
• 시스템의 네트워크 스택이 해당 포트 요청을 계속 처리하려 시도

2. DNS Resolution 문제

• localhost 도메인 리졸빙 과정에서 지연 발생
• DNS 캐시 상태 불일치

해결 방법

1. 네트워크 스택 초기화

# DNS 캐시 초기화
sudo killall -HUP mDNSResponder
sudo killall mDNSResponderHelper
sudo dscacheutil -flushcache
 
# 소켓 상태 확인
sudo netstat -anp tcp | grep 33000

2. VSCode 완전 재시작

• VSCode 종료
• 원격 SSH 연결 재설정
• 개발 서버 재시작

예방 방법

1. 개발 서버 실행 시 명시적 호스트 바인딩 설정

{
  "scripts": {
    "dev": "next dev --hostname 0.0.0.0 --port 33000"
  }
}

2. MacBook Sleep Mode 전환 전 개발 서버 수동 종료

결론

이러한 현상은 MacBook의 Sleep Mode 전환 시 발생하는 네트워크 스택과 프로세스 상태 불일치로 인한 것으로 추정됨.
시스템 레벨의 네트워크 서비스 초기화나 VSCode 재시작을 통해 해결할 수 있음.