웹사이트를 개발하면서 반응형 디자인을 만들려면 모바일기기 화면에 크기에 맞게 확인해 볼 필요가 있다. 이 경우 보통 개발자 도구에서 기기 툴바 전환이나, 직접 브라우저의 크기를 줄여 볼 것이다. 이 방법도 좋지만 추가적인 설정이나, 배포 없이 자신의 스마트폰에서 즉각적으로 확인하고 사용할 수 있는 방법이 있다.
보통 npm start로 localhost에서 즉각적으로 확인 할 것이다. 바로 이것을 활용하는 것이다.
맥북 기준으로 시시템 설정->Wi-Fi->연결된 네트워크의 세부사항...에 들어가 보면 IP주소를 알 수 있다.
저 IP주소와 포트번호를 스마트폰 인터넷 주소창에 입력하면 실시간으로 모바일에서 확인이 가능하다.
예시 123.456.789.000:3000
주의할 점은 스마트폰이 host pc와 같은 네트워크상에 연결되어 있어야 한다.
윈도우기준으로는 cmd창에서 ipconfig 치고 IPv4에 적힌 주소를 사용하면 된다.
FE Developer