[React Native] 윈도우 WSL2에서 expo 아이폰 빌드 (Tunnel URL not found 해결)

React logo

 

 

Contents

 

 

---

 

1. Node.js 설치

해당 링크에서 Noje.js 설치 (https://nodejs.org/ko/download/)

다운로드 | Node.js

 

2. expo cli 설치

npm install -g expo-cli

 

3. 프로젝트 생성

expo init {project_name}

blank에서 엔터 -> Hello World 테스트 용이기 때문에 zero부터 시작하는 blank 선택.

 

4. expo 시작

1) expo에서 회원가입 하기 : https://expo.io/

Expo

 

5. 아이폰과 윈도우 WSL의 expo 연결하기

1) 아이폰에서 expo go 어플 다운로드 및 로그인 -> expo login -> 아이폰 컴퓨터와 USB 연결 -> expo start --tunnel

expo login
expo start --tunnel
# Tunnel URL not found에러 나는 경우
npm install @expo/ngrok@^4.1.0

* Tunnel URL not found에러 나는 경우

npm install @expo/ngrok@^4.1.0

 

a. 후에 다시 expo start --tunnel

 

b. App.js의 Text 태그 부분에 텍스트 작성

 

c. expo 화면에 다음같이 나옴

 

d. 아이폰에서 expo go 실행하면 아래와 같은 화면이 나옴

 

 

e. react-weather on user-PC를 선택하면 아래와 같이 Hello World! 가 출력

이제부터 USB가 연결된 상태에서, VScode에서 수정하는 것이 아이폰 화면에서 바로바로 적용됩니다.

(만약 적용되지 않으면, 스마트폰을 흔들어서 Reload를 터치해주면 적용됩니다.)

 

 

Reference
1) React logo : https://hackernoon.com/build-your-own-react-48edb8ed350d