본문 바로가기
PROGRAMMING CODE/Web

[React] 리액트 프로젝트 핸드폰에서 실행하는 방법(Mac)

by daye_ 2022. 9. 22.

리액트 프로젝트를 다른 기기에서 실행시키려면

1. 네트워크 주소 확인

2. 같은 네트워크(와이파이, 핫스팟 등)에 연결

3. 프로젝트의 포트 확인 후 주소 형식 만들기

다음과 같은 순서로 진행해야한다.

 

 

 

 

1. 네트워크 주소 확인

mac환경은시스템 환경 설정의 네트워크에 들어가서

연결됨 아래의 172.20.10.2 부분을 확인해준다.

*윈도우는 cmd로 확인*

 

 

 

2. 같은 네트워크에 연결

연결 할 기기(아이패드, 핸드폰 등)가 나의 컴퓨터와 같은 와이파이, 핫스팟 등에 연결되어 있는지 확인해준다.

 

 

 

3. 프로젝트의 포트 확인 후 주소 형식 만들기

리액트 프로젝트를 npm start 해서 주소창 부분을 확인한다.

3000포트로 실행되어 있다. (다른 포트여도 상관 없음)

요 숫자를 확인 해 준다. 

 

형식은  " http://네트워크 주소:포트번호 " 로 구성되며

방금 확인했던 네트워크와 포트를 조합하면 http://172.20.10.2:3000 가 된다.

이 주소로 다른기기에서 접속하면 나의 프로젝트를 확인할 수 있다.