React Native는 JavaScript를 사용하여 모바일 앱을 빌드하는 프레임워크입니다. 그러나 iOS 시뮬레이터나 안드로이드 에뮬레이터를 설정하고 관리하는 것은 약간 귀찮을 수 있습니다. 이런 문제를 해결하기 위해 Facebook에서 개발한 Expo는 React Native 개발자들에게 쉽고 빠른 개발 환경을 제공합니다. 이번 글에서는 Expo를 이용해 React Native앱을 개발하는 방법에 대해 알아보겠습니다.
Expo를 사용하는 이유
- 시뮬레이터를 설치하지 않고도 작성한 코드의 결과를 앱에서 즉시 확인 가능
Expo를 사용하면 로컬 환경에서 코드를 작성하면서 모바일 앱의 UI를 즉시 확인할 수 있습니다.
- compile 안 해도 됨
Expo를 사용하면 iOS 및 Android 용 JavaScript 번들을 빌드하고 관리할 필요가 없습니다. 개발자가 작성한 코드는 Expo 클라우드에서 빌드되고 자동으로 최신화되므로 앱 개발자는 개발에만 집중할 수 있습니다.
개발환경 세팅
1. node.js 설치
Expo를 사용하기 위해서는 먼저 Node.js가 설치되어 있어야 합니다. Node.js를 설치하는 방법은 운영체제에 따라 다를 수 있으므로 Node.js 웹 사이트에서 설명하는 방법에 따라 설치하세요.
2. npm 설치
Node.js가 설치되면 npm (Node Package Manager)도 함께 설치됩니다. npm은 Node.js의 기본 패키지 관리자로, 필요한 라이브러리를 설치하고 관리할 수 있습니다.
3. expo cli 설치
Expo를 설치하기 위해서는 expo-cli가 필요합니다. npm을 이용해 아래와 같이 설치할 수 있습니다.
npm install -global expo-cli4. Watchman 다운 (Mac 사용자의 경우)
Mac 사용자는 Watchman을 다운로드해야 합니다. Watchman은 파일 시스템 변경 내용을 모니터링하는 데 사용되며, React Native 앱 개발에 필요합니다. Homebrew를 사용하여 아래와 같이 설치하세요.
brew update
brew install watchman5. Apple Store, Google Play Store에서 Expo / Expo Go앱 다운
Expo Go는 앱 개발자가 개발한 앱을 로컬 환경에서 미리보기하거나 테스트할 수 있는 모바일 앱입니다. Expo Go를 사용하면 앱 개발자는 iOS 및 Android 앱을 개발 및 테스트하면서 실제 디바이스에서 빠르게 결과를 확인할 수 있습니다.
6. 새 프로젝트 만들기
Expo CLI를 사용하여 새 프로젝트를 만들 수 있습니다. 프로젝트 이름을 지정하여 다음과 같이 실행합니다.
expo init [앱 이름]이 명령어는 새로운 React Native 프로젝트를 만듭니다. 이후에는 프로젝트 폴더로 이동하여 Expo를 실행할 수 있습니다.
7. 컴퓨터, 휴대폰에서 로그인
expo loginExpo를 사용하기 위해서는 Expo 계정으로 로그인해야 합니다. 개발자는 컴퓨터에서 expo login 명령어를 실행하고 이메일과 비밀번호를 입력하여 로그인할 수 있습니다. 그 후 휴대폰에서도 로그인해야 합니다.
8. npm start
npm startnpm start 명령어를 사용하여 Expo를 시작할 수 있습니다. 이 명령어를 실행하면 로컬 개발 서버가 시작되고, 프로젝트 QR 코드와 함께 개발자 콘솔이 표시됩니다. 이제 개발자는 Expo Go 앱을 실행하고 QR 코드를 스캔하여 프로젝트를 미리보거나 테스트할 수 있습니다.
핸드폰에서 Expo 앱을 열면 개발자가 작업하고 있는 프로젝트가 나타납니다. 앱을 수정하고 저장하면, Expo Go 앱에서 실시간으로 결과를 확인할 수 있습니다.
마무리
결론적으로, Expo를 사용하면 React Native 앱 개발을 더욱 쉽고 효율적으로 할 수 있습니다. 개발자는 시뮬레이터를 설치하거나 앱을 번들링하거나 업로드할 필요 없이, Expo를 사용하여 코드 작성 및 결과 미리보기를 빠르게 수행할 수 있습니다. 또한 Expo에서 제공하는 다양한 라이브러리와 서비스를 사용하여 앱을 더욱 개선할 수 있습니다.
