리액트 프로젝트를 다른 기기에서 실행시키려면
1. 네트워크 주소 확인
2. 같은 네트워크(와이파이, 핫스팟 등)에 연결
3. 프로젝트의 포트 확인 후 주소 형식 만들기
다음과 같은 순서로 진행해야한다.
1. 네트워크 주소 확인
mac환경은시스템 환경 설정의 네트워크에 들어가서
연결됨 아래의 172.20.10.2 부분을 확인해준다.
*윈도우는 cmd로 확인*
2. 같은 네트워크에 연결
연결 할 기기(아이패드, 핸드폰 등)가 나의 컴퓨터와 같은 와이파이, 핫스팟 등에 연결되어 있는지 확인해준다.
3. 프로젝트의 포트 확인 후 주소 형식 만들기
리액트 프로젝트를 npm start 해서 주소창 부분을 확인한다.
3000포트로 실행되어 있다. (다른 포트여도 상관 없음)
요 숫자를 확인 해 준다.
형식은 " http://네트워크 주소:포트번호 " 로 구성되며
방금 확인했던 네트워크와 포트를 조합하면 http://172.20.10.2:3000 가 된다.
이 주소로 다른기기에서 접속하면 나의 프로젝트를 확인할 수 있다.
'PROGRAMMING CODE > Web' 카테고리의 다른 글
[React] 함수형 컴포넌트에서 데이터 전달 (props) (0) | 2022.11.14 |
---|---|
[React] 이미지를 배열로 저장하고 불러오기(Map) (1) | 2022.09.22 |
[React] 폰트 적용하기 (0) | 2022.08.28 |
[REACT] 화면 비율에 맞춰 요소 조절하기 (0) | 2022.08.28 |
[REACT] SWAL 사용해서 알림창 구현하기 (0) | 2022.06.05 |