Background
Gatsby 를 개발할때 gatsby develop -H 0.0.0.0 -p 8000 명령어를 통해 로컬호스트의 8000포트에 웹애플리케이션을 열어두고 아이폰에서 USB로 연결된 상태에서 localhost:8000으로 접속하여 테스트하였었다. 그런데 Next.js를 개발하면서 동일하게 호스트네임을 정해서 사용해도 접속이 안되는 것이다.
정말 난감했다 빨리 모바일테스트를 실기기에서 하고싶은데 다들 개발자도구에 inspector 관해서만 알려주고 ㅠㅠ 결국 스택오버플로우를 뒤지기 시작했다.
결국 찾지못하고 근본적으로 로컬네트워크로 USB에 연결되었을때 맥에 접속할 수 있는 방법을 찾기 시작했다.
해결방법
아주아주 간단했다 😅
- 아이폰과 맥을 USB로 연결
- 시스템 환경설정
- 공유
- 인터넷 공유
- 연결된 iPhone USB공유를 true!
위에 sanghyeon.local이 맥의 접속 주소가된다.
아이폰에서 sanghyeon.local:{port} next.js 서버가 오픈된 포트로 열면 이제 당당하게 보여진다. 사파리에 개발자 도구를 통해서 어떤 부분이 에러를 일으키는지 확인하면서 개발할 수 있었다. 이렇게 확인하는 것은 대부분 스타일이 깨지기때문에 실제 이슈를 일으켰던 상황을 묘사해서 해결할 수 있다!