Expo 프로젝트 생성하기(윈도우)Expo Project init(Windows)
📅
🚀
들어가기 전에🔗
개발 환경은 Windows, Android Studio, Visual Studio Code를 사용했습니다.
✅
expo 란?🔗
expo↗
리엑트 네이티브로 앱 개발을 할 때, expo를 사용하면 더 쉽게 개발할 수 있습니다. 안드로이드 & IOS 앱을 개발 할 때 건드려야 하는 많은 설정들을 expo가 대신 해주게 됩니다. 또한, expo는 무료로 사용할 수 있으며, expo를 사용하면 앱을 빌드하고 배포하는 과정도 쉬워집니다. expo go 앱을 설치하면, 개발 중인 앱을 실시간으로 실제 기기에서 바로 확인할 수 있습니다.
✅
expo vs react-native cli🔗
expo를 사용하면, 앱을 빌드하고 배포하는 과정이 쉬워집니다. 하지만, expo를 사용하면 일부 라이브러리가 사용 불가하고 네이티브 기능을 추가할 수 없습니다. 만약, expo로 할 수 없는 기능을 추가하고 싶다면, 네이티브 기능을 추가할 수 있는 react-native cli를 사용해야 합니다.
프로젝트에서 사용할 기능이 expo에 호환되는지 확인하고, 호환되지 않는다면 react-native cli를 사용하는 것이 좋습니다.
🚀
Node, NPM 설치🔗
Node.js는 자바스크립트 런타임 환경으로, React Native 개발을 위해 필수적으로 설치해야 합니다. Node.js 공식 홈페이지에서 LTS 버전을 다운로드 받아 설치합니다.
Node.js 공식 홈페이지↗
설치가 완료되면 터미널에서 node -v, npm -v 명령어를 입력하여 버전을 확인합니다.
node -v
npm -v🚀
Expo 설치 및 프로젝트 생성🔗
✅
Expo 계정, 프로젝트 생성🔗
Expo를 사용하려면, expo 계정이 필요합니다. expo 공식 홈페이지에서 회원가입을 한 후, expo 계정으로 로그인합니다.
expo 공식 홈페이지↗
expo 계정으로 로그인하면, expo 프로젝트를 생성할 수 있습니다. Create a new project 버튼을 클릭 후 프로젝트 이름을 입력하면, expo 프로젝트가 생성됩니다.
'Test' 프로젝트 생성
✅
Expo CLI 설치 및 로컬 프로젝트 생성🔗
터미널에서 expo-cli를 전역으로 설치합니다. (선택)
만일 expo-cli를 설치하지 않아도 npx expo 명령어로 expo 프로젝트를 생성, 실행할 수 있습니다.
npm install --global eas-cliexpo-cli가 설치되면, expo init 명령어로 프로젝트를 생성합니다.
npx create-expo-app@latest my-new-project프로젝트를 실행하기 전 expo에 로그인을 해야 합니다.
npx expo login # expo 계정 입력프로젝트 생성이 완료되면, 프로젝트 폴더로 이동하여 expo 프로젝트와 연결합니다. 프로젝트 id는 expo 프로젝트 상세페이지에서 확인할 수 있습니다.
cd my-new-project
eas init --id {expo 프로젝트 id}expo 프로젝트와 연결이 완료되면, expo 프로젝트를 실행합니다.
npm start
실행 후 a를 누르면, 안드로이드 스튜디오 에뮬레이터에서 앱을 확인할 수 있습니다. 또는 w를 누르면, 웹 브라우저에서 앱을 확인할 수 있습니다. 또는 i를 누르면, xCode IOS 시뮬레이터에서 앱을 확인할 수 있습니다.(MAC OS만 가능)
✅
2.3 Expo Go 앱 설치 및 연결🔗
자신의 스마트폰에 Expo Go 앱을 설치합니다.
Expo Go 앱 다운로드(Android)↗
Expo Go 앱 다운로드(IOS)↗
Expo Go 앱을 설치하고, QR코드를 스캔하면, 개발 중인 앱을 실시간으로 실제 기기에서 바로 확인할 수 있습니다. 혹은 로그인 후 Expo Go 앱을 실행하고, 개발 중인 앱을 확인할 수 있는 링크를 입력하여 확인할 수 있습니다.
🚀
문제 발생 및 해결🔗
✅
expo 명령어 실행 시, 오류 발생🔗
expo : 이 시스템에서 스크립트를 실행할 수 없으므로 C:~\expo.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies (https://go.microsoft.com/fwlink/?LinkID=135170)를↗ 참조하십시오. 위치 줄:1 문자:1 + expo init + ~~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess
expo init 명령어를 실행하면, 오류가 발생한다.
이 오류는 PowerShell의 실행 정책 때문에 발생한다.
PowerShell의 실행 정책을 변경하면, 이 오류를 해결할 수 있다.
PowerShell을 관리자 권한으로 실행하고, 아래 명령어를 입력한다.
Set-ExecutionPolicy -ExecutionPolicy Unrestricted
추가적으로 'Y' 입력
아래 명령어로 실행 정책을 확인할 수 있다.
Get-ExecutionPolicy -List
LocalMachine 항목이 Unrestricted인지 확인
🚀
결론🔗
expo와 react-native cli 중 어떤 것을 사용할 지 본인 프로젝트에 맞게 선택해야 합니다. expo는 앱 개발을 쉽게 할 수 있지만, 일부 라이브러리가 사용 불가하고 네이티브 기능을 추가할 수 없습니다. 만약, expo로 할 수 없는 기능을 추가하고 싶다면, react-native cli를 사용하거나 expo eject를 사용해야 합니다.
✅
더 생각해 보기🔗
➡️
expo eject🔗
expo eject 명령어를 사용하면, expo 프로젝트를 react-native cli 프로젝트로 변환할 수 있다고 알려져 있습니다. 하지만 현재 expo eject는 deprecated 되었으며, prebuild↗로 대체되었습니다. 다음은 공식 문서의 내용입니다.
is expo eject deprecated?↗
➡️
expo prebuild🔗
간단히 요약하자면, app config 파일을 이용하여 네이티브 소스 코드가 포함된 expo 프로젝트를 생성할 수 있습니다.
expo prebuildandroid/와 ios/ 폴더가 생성되며, 네이티브 코드가 포함된 expo 프로젝트를 생성할 수 있습니다.
이후, 다음 명령어로 prebuild된 앱을 실행 할 수 있습니다.npx expo run:android
npx expo run:ios✅