로컬 개발을 모바일에서 확인하기

프로젝트를 진행하면서 화면 구성을 모바일에 맞춰 작업하던 중 문득 생각이 들었다.

"모바일 브라우저의 사이즈에 맞추어 화면을 제작하고 있는데, 크롬의 개발자 도구를 이용한 확인만으로 충분할까?"

위와 같은 의문점이 들어 배포를 거치지 않고 현재 개발 상태의 화면을 호스팅하여 확인할 수 있는 방법이 없는지 찾아보았고 내가 찾은 방법은 locultunnel을 이용하는 방법이었다.

https://github.com/localtunnel/localtunnel

GitHub - localtunnel/localtunnel: expose yourself

사용 방식은 간단했다.

npx localtunnel --port ${작업중인 포트}

와 같이 입력하면 (예를 들어, 3000번 포트에서 작업 서버가 구동중이라면) 3000번 포트를 외부에서 접속할 수 있는 호스팅이 생성되었다.

로컬터널과 같은 임시 호스팅 방식을 이용하면 실제 모바일 화면에서 어떻게 보이고 작동하는 지를 확인하며 작업할 수 있다는 것을 알게 되었다.