이번 글에서는 Expo App 생성 방법에 대해 알아보도록 하겠습니다. Expo 설치가 필요하신 분들은 먼저 아래 글을 참고하시길 바랍니다.
새로운 Expo App 생성 방법
새 Expo 앱을 만들기 전에는 아래 사항들을 먼저 확인해야 합니다.
- Expo CLI가 개발 시스템에서 작동 중인지?
- Expo Go 앱이 Android 또는 iOS 물리적 장치 또는 에뮬레이터/시뮬레이터에 설치되어 있는지?
만약 이 부분이 제대로 되어 있지 않다면 앞선 Expo 설치 방법 글을 참고해서 Expo CLI, Expo Go 앱 설치를 먼저 진행하시길 바랍니다.
신규 프로젝트 생성
새 프로젝트를 초기화하려면 create-expo-app을 사용합니다.
npx create-expo-app my-app && cd my-app cd my-app
create-expo-app 명령과 함께 –template 옵션을 사용할 수도 있습니다. npx create-expo-app –template을 실행하여 사용 가능한 템플릿 목록을 확인합니다.
개발 서버 시작
다음 명령을 실행하여 개발 서버를 시작하세요.
npx expo start
npx expo start(또는 yarn expo start)를 실행하면 Expo CLI가 Metro Bundler를 시작합니다. 이 번들러는 Babel을 사용하여 앱의 JavaScript 코드를 컴파일하고 Expo 앱에 제공하는 HTTP 서버입니다. 자세한 내용은 Expo Development Server 작동 방식을 참조하시면 됩니다.
휴대폰/태블릿에서 Expo 앱 열기
앱을 열려면 Android 기기에서 Expo Go 앱의 “홈” 탭에 있는 “QR 코드 스캔”을 누르고 단말기에 표시되는 QR 코드를 스캔하면 됩니다. iPhone 또는 iPad에서 기본 Apple “카메라” 앱을 열고 터미널에 표시되는 QR 코드를 스캔합니다. 여러 장치에서 동시에 프로젝트를 열 수도 있습니다. 휴대전화가 편리하다면 동시에 두 휴대전화에서 사용해 보세요.
만약 핸드폰에서 Expo App 실행이 잘 안되면 어떻게 하면 될까요? 먼저 컴퓨터와 장치에서 동일한 Wi-Fi 네트워크에 있는지 확인합니다. 여전히 작동하지 않으면 라우터 구성 때문일 수 있습니다. 이는 공용 네트워크에서 일반적인 현상입니다. 개발 서버를 시작할 때 “터널” 연결 유형을 선택한 다음 QR 코드를 다시 스캔하여 이 문제를 해결할 수 있습니다.
npx expo start --tunnel
“터널” 연결 유형을 사용하면 “LAN” 또는 “로컬”에서보다 앱을 다시 로드하는 속도가 상당히 느려지므로 가능하면 터널을 피하는 것이 가장 좋습니다. 네트워크의 다른 장치에서 컴퓨터에 액세스하기 위해 “터널”이 필요한 경우 개발 속도를 높이기 위해 시뮬레이터/에뮬레이터를 설치하는 것이 좋습니다.
첫 번째 변경 테스트 (Hello World)
코드 편집기에서 App.js 파일을 열고 텍스트를 “Hello, world!”로 변경해보세요. 장치에서 업데이트되는 것을 볼 수 있습니다. 이제 컴퓨터에서 Expo 도구 체인을 실행하고 프로젝트의 소스 코드를 편집할 수 있으며 변경 사항을 장치에서 실시간으로 확인할 수 있습니다.