Docker에서 React Native 세팅 with Expo

React Native with Expo

React Native를 배우기 위해 니꼴라스 강의와 블로그를 찾아 설치 방법을 찾았는데 전부 다 프로젝트 생성까지는 잘 되는데, 안드로이드에서 실행하려고 하면 화면은 받아오지 못한다. 찾아보니 expo 설치 방법이 바뀌었다. 1년 전만 해도 npm install expo-cli로 설치하고 expo init으로 프로젝트 생성이 가능했던 것 같은데, 지금은 버전이 업데이트되면서 npx create-expo-app로 설치해야 하는 것 같다.

expo docs

• installation

환경

Host OS: Window 11
가상 환경: Docker + Ubuntu 20.04
Node 버전: 16.16

• 도커 컨테이너 생성 시, 따로 포트 설정을 해줄 필요는 없다. 포트를 지정하지 않고 docker run했는데도 expo 실행할 때 자동으로 필요한 포트가 열린다. 19000:19000

yarn 설치

$ npm install --global yarn
$ yarn --version

expo 설치

$ yarn add expo

expo 로그인

$ npx expo login
$ npx expo whoami

프로젝트 생성

$ npx create-expo-app my-app
또는
$ npx create-expo-app --template // 사용할 수 있는 템플릿을 보여준다.

프로젝트 빌드

$ npx expo start
또는
$ npx expo start --tunnel

• expo를 모바일에서 실행시키기 위해서는 컴퓨터와 모바일이 같은 네트워크 상에 존재해야 한다.
• 공용 네트워크에서는 라우터 설정 때문에 안될 수도 있다. 이런 경우엔 --tunnel 옵션을 사용해서 Tunnel Connection으로 연결하면 된다.

웹 브라우저 빌드

• 모바일 환경이 준비가 되어있지 않다면, 웹 브라우저 환경에서도 빌드시켜서 볼 수 있다.

$ npx expo install react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1
$ npx expo start --tunnel

후기

• 리액트 네이티브를 제대로 개발하려면 Expo가 아닌 Android Studio를 설치해야 한다고 한다.
• expo init이 안되는지도 모르고 시도하다가 새벽에 생고생했다.
• 필자는 Expo 설치하긴 했지만, Android Studio로 넘어갈 듯하다.