요즘 웹 개발 트렌드는 pc, 모바일에서 동시에 작동 할 수 있는 반응형 웹페이지를 만드는 것이다.
이때 매번 모바일도 제대로 구현 됐나 하면서 매번 서버 배포 후 테스트 하는 것은 비효율 적이다.
따라서 반응형 웹페이지가 잘 구현 됐는지 확인 할 수 있는 방법을 2가지 소개한다.
목차
1. 내 휴대폰으로 확인하기 (강추)
2. 크롬에서 확인하기
1. 내 휴대폰으로 확인 하기
순서 대로 진행 하면 웹에서 개발 한 것을 모바일에서 즉시 확인 가능하다.
1. pc에서 로컬 호스트 서버를 작동 시킨다.(localhost:3000)
(본인 포트 번호 그대로 사용 하면 됨)
2. pc의 무선 LAN 어댑터 Wi-FI -> IPv4 주소를 확인한다.
(cmd 열기 -> ipconfig 입력해서 알아내면 됨) ex)192.168.0.1
3. 휴대폰에서 안드로이드는 크롬, ios는 사파리를 연다.
4. 크롬(or 사파리) 주소 창에 pc_IPv4_주소:port 입력한다.
ex) 192.168.0.1:3000
2. 크롬에서 확인하기
1. 웹사이트에서 F12 클릭 -> 그림 속 빨간색 click 적혀있는거 클릭
2. 테블릿, 모바일 픽셀 크기에 따라 변하는 웹사이트를 확인 가능하다.
빨간색 선 안에서 클릭 해보면 여러 종류의 모바일 기기를 선택 할 수 있다.
끝
2가지 방법을 소개 했지만 역시 휴대폰으로 확인 하는것이 버그 방지에도 좋고 더 신뢰성있는 개발이 가능한거 같다.
반응형