[Windows 에서 ios 앱 개발] Expo & Expo go 설치부터 셋팅까지!

리액트네이티브(React Native)로 안드로이드(Android)와 IOS를 한번에 개발하는 목표를 세웠다. 그러나 어쨌든 IOS의 애뮬레이터를 실행 해 보기 위해서는 mac os가 필요하다고 한다. 이런 문제점을 한 방에 해결 해 줄 Expo!

엑스포(Expo)를 설치하면 안드로이드와 IOS를 웹 페이지에서는 물론, 내 휴대폰에서도 Expo go 를 통해 실제 앱으로 돌려볼 수 있다.

 

 Expo 설치하기  - 웹 또는 VSCode

 Visual Studio Code 에서 Expo를 사용하고 싶으면 바로 2번으로 넘어가면 된다!

 

 웹에서 Expo 사용하기 

간단한 컴포넌트만 실행시켜보고싶다면, 웹에서 쉽게 돌려볼 수 있다.

https://reactnative.dev/docs/components-and-apis

Core Components and APIs · React Native

 

리액트 네이티브 공식 문서에서는 Expo를 모듈로 제공해주고 있다.

 

 

 

페이지 왼쪽에서 원하는 컴포넌트를 선택하거나, 아무 컴포넌트를 선택하여 Example을 보면 Expo가 삽입되어있는 것을 볼 수 있다. 여기서 저 빨간 동그라미 부분을 클릭하면, Expo snack 페이지로 이동한다.

 

 

 

그럼 이렇게 웹 개발 툴이 나타난다.

프로젝트를 폴더 별로 관리할 수도 있고, 회원가입을 통해 변경사항을 웹 사이트로 저장해 둘 수도 있다. 우측의 화면이 애뮬레이터로, ios와 안드로이드를 같이 돌려볼 수 있다. 단점은 조금 기다려야 한다는 것.

그럼 내 폰에서 실행해보기 위해 앱을 다운받아보자!

 

 Expo Go 앱 설치 및 사용법 

My Device 또는 Run it on your phone 을 클릭하면 QR 코드가 나온다. 우리의 폰에 Expo go 앱을 다운로드 하고 저 QR을 인식시키면 우리의 프로젝트가 Expo go 에서 실행된다.

 

아이폰은 Expo go 앱에 QR 코드 리더기가 포함되어 있지 않다. 그러므로 아이폰 앱 자체의 "코드 스캐너"를 통해서 QR 코드를 인식시켜주면, Expo go 에서 실행하기 버튼이 나타난다.

 

 

그러면 아래와 같이 앱이 실행된다!

 

 

 

유의할 점은 웹페이지 Expo를 실행하고 있는 기기의 인터넷과 앱 Expo go를 실행하고 있는 기기의 인터넷 (와이파이)가 동일해야 한다는 점이다. 나는 컴퓨터는 이더넷, 아이폰은 와이파이로 접속했다.

 

 

 VScode 에서 Expo 설치하기 

 

** 사전에 VScode 와 Node.js(lts 버전)를 설치해야 합니다!

** yarn도 설치해주세요!

npm install --global yarn

 

1-1) vscode 터미널에서 다음 명령어 입력하기.

npm install -g expo-cli

 

또는 !!

 

1-2) vscode 마켓플레이스에서 Expo Tools 설치하기

 

 

2) 새 프로젝트를 만들어 Expo 삽입해보기 (기존 프로젝트를 Expo로 실행은 다음 단계에서!)

expo init my-project

위의 명령어를 터미널에 입력해주면, 템플릿을 선택하라는 문구가 나온다. blank 또는 blank TypeScript 버전을 선택하고 엔터를 입력해준다. 

 

그러면 my-project 라는 이름의 프로젝트가 생성된 것을 확인할 수 있다.

바로 실행해보자.

npm start

 

그럼 터미널에 QR 코드가 뜨고, 웹페이지도 실행된다. QR 인식은 상단의 Expo Go 앱 설치 및 사용법 을 다시 참고하면 된다.

 

 

처음 로딩 시에는 모듈들을 구성하는 데에 대기시간이 조금 필요하다.

 

 

그러면 위와 같이 첫 번째 화면이 실행된다!

그럼 여기서 Expo의 대단한 점이 뭐냐면.. 

 

 

VSCode에서 App.js 파일을 다음과 같이  수정해주고 Ctrl+S (저장)을 누르면? 바로 앱에 적용이 된다. 

 

 

정말 애뮬레이터다. 그것도 내 폰에서 실행해볼 수 있는 애뮬레이터이다. 너무 간편하고 쉬워서 이걸 왜 이제야 알았나 싶다. 리액트 네이티브 개발에 필수 앱이 아닐까 한다.

 

3) 기존 프로젝트를 Expo로 실행하기

기존 프로젝트를 expo convert로 쉽게 전환하면 좋겠지만, 새 프로젝트를 만들어 주입하는 방법밖에 없다고 한다. 이는 다음 게시글에서 작성해야겠다 ㅜㅜ 지금 하고있는데 쉽지 않다..ㅠ