Expo 프로젝트 생성하기(Mac Os)

Create an Expo project(Mac Os)

expo↗ 리엑트 네이티브로 앱 개발을 할 때, expo를 사용하면 더 쉽게 개발할 수 있습니다. 안드로이드 & IOS 앱을 개발 할 때 건드려야 하는 많은 설정들을 expo가 대신 해주게 됩니다. 또한, expo는 무료로 사용할 수 있으며, expo를 사용하면 앱을 빌드하고 배포하는 과정도 쉬워집니다. expo go 앱을 설치하면, 개발 중인 앱을 실시간으로 실제 기기에서 바로 확인할 수 있습니다.

expo를 사용하면, 앱을 빌드하고 배포하는 과정이 쉬워집니다. 하지만, expo를 사용하면 일부 라이브러리가 사용 불가하고 네이티브 기능을 추가할 수 없습니다. 만약, expo로 할 수 없는 기능을 추가하고 싶다면, 네이티브 기능을 추가할 수 있는 react-native cli를 사용해야 합니다.

Node.js는 자바스크립트 런타임 환경으로, React Native 개발을 위해 필수적으로 설치해야 합니다. Node.js 공식 홈페이지에서 LTS 버전을 다운로드 받아 설치합니다. Mac에서는 Homebrew와 nvm을 사용하여 쉽게 Node.js를 설치할 수 있습니다. 다음 글을 참고하여 Node.js를 설치합니다. MacOS에서 Node.js 설치하기(homebrew, nvm, npm) 설치가 완료되면 터미널에서 node -v, npm -v 명령어를 입력하여 버전을 확인합니다.

node -v
npm -v

Expo를 사용하려면, expo 계정이 필요합니다. expo 공식 홈페이지에서 회원가입을 한 후, expo 계정으로 로그인합니다. expo 공식 홈페이지↗ expo 계정으로 로그인하면, expo 프로젝트를 생성할 수 있습니다. Create a new project 버튼을 클릭 후 프로젝트 이름을 입력하면, expo 프로젝트가 생성됩니다.

터미널에서 expo-cli를 전역으로 설치합니다. (선택) 만일 expo-cli를 설치하지 않아도 npx expo 명령어로 expo 프로젝트를 생성, 실행할 수 있습니다.

npm install --global expo-cli

expo-cli가 설치되면, expo init 명령어로 프로젝트를 생성합니다.

npx create-expo-app@latest

y를 입력해 추가 패키지를 설치하고 프로젝트 이름을 설정하며 프로젝트를 생성합니다.

프로젝트를 실행하기 전 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만 가능)

자신의 스마트폰에 Expo Go 앱을 설치합니다. Expo Go 앱 다운로드(Android)↗ Expo Go 앱 다운로드(IOS)↗ Expo Go 앱을 설치하고, QR코드를 스캔하면, 개발 중인 앱을 실시간으로 실제 기기에서 바로 확인할 수 있습니다. 혹은 로그인 후 Expo Go 앱을 실행하고, 개발 중인 앱을 확인할 수 있는 링크를 입력하여 확인할 수 있습니다.

expo와 react-native cli 중 어떤 것을 사용할 지 본인 프로젝트에 맞게 선택해야 합니다. expo는 앱 개발을 쉽게 할 수 있지만, 일부 라이브러리가 사용 불가하고 네이티브 기능을 추가할 수 없습니다. 만약, expo로 할 수 없는 기능을 추가하고 싶다면, react-native cli를 사용하거나 expo eject를 사용해야 합니다.

expo eject 명령어를 사용하면, expo 프로젝트를 react-native cli 프로젝트로 변환할 수 있다고 알려져 있습니다. 하지만 현재 expo eject는 deprecated 되었으며, prebuild↗로 대체되었습니다. 다음은 공식 문서의 내용입니다. is expo eject deprecated?↗

간단히 요약하자면, app config 파일을 이용하여 네이티브 소스 코드가 포함된 expo 프로젝트를 생성할 수 있습니다.

expo prebuild

android/와 ios/ 폴더가 생성되며, 네이티브 코드가 포함된 expo 프로젝트를 생성할 수 있습니다. 이후, 다음 명령어로 prebuild된 앱을 실행 할 수 있습니다.

npx expo run:android
npx expo run:ios