Expo로 RN 프로젝트 시작하기 (settings)

사전 설치

[ brew, VSCode, Xcode, Apple Command Line Tools, AndroidStudio, Node.js ] 를 미리 설치해 두면 좋다!)

 

https://brew.sh/

Homebrew

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

https://developer.apple.com/kr/xcode/

Xcode - Apple Developer

https://developer.apple.com/download/all/?q=command

로그인 - Apple

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

---

세팅 시작

 

1. Node.js LTS version Install

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

[기본 터미널 환경, iTerms 기준]

2. sudo npm install -g expo-cli

https://expo.dev/

Expo

 

3. expo -V 명령어로 설치 확인

 

4. ERR! 404 에러 발생 시

npm config set registry http://registry.npmjs.org 명령어 시도

---

프로젝트 생성

 

5. expo init -> npx create-expo-app으로 명령어가 변경됨.

npx create-expo-app MyFirstApp --template

상황에 맞는 템플릿 선택하기 

 

프로젝트 생성 후 VSCode에서 Open Folder를 통해 생성된 기본 파일들을 확인해 보자.

---

6. 스토어에서 Expo Go 다운로드(AOS, iOS)

(RN 앱을 실기기에서 빌드해서 확인할 수 있는 앱이다.)

 

7. 서버 실행 전 sudo npm install -  필요한 패키지 설치

 

8. npm start -  노드 서버 가동

 

9. Emitted 'error' event on NodeWatcher instance at:  at FSWatcher._checkedEmitError 에러 발생 시 

brew install watchman 시도 (소스코드의 변경 사항을 실시간으로 확인해 주는 프로그램)

https://facebook.github.io/watchman/

Watchman - A file watching service | Watchman

 

brew install watchman 명령어에서 아래와 같은 에러 발생 시 

python@3.12: the bottle needs the Apple Command Line Tools to be installed.
 You can install them, if desired, with: xcode-select --install

 

brew install --build-from-source python@3.12 시도

이것도 안 되면 

(xcode-select --install 명령어는 커맨드라인 툴 설치 하는 명령어)

이것도 안되면 사이트 접속해서 Command line tools 설치하기

https://developer.apple.com/download/all/?q=command

로그인 - Apple

여기서 본인의 xcode 버전에 맞는 Command line tools를 다운로드.

 

Command line tools 설치가 완료 됐다면

brew install watchman 명령어를 통해 watchman을 설치 (꽤 오래 걸린다.)

다시 npm start를 통해 노드 서버를 가동해 주자. 

---

10. Expo Go 연결

VSCode의 터미널에서 진행했다면,

QR코드가 생성될 것이고 카메라를 통해 스캔해 주면 Expo Go 앱으로 리디렉션 된다.

(*맥북과 아이폰이 같은 네트워크에 연결되어 있어야 한다.)

 

11. AOS, iOS  에뮬레이터, 시뮬레이터 사용법

안드로이드 -> 안드로이드 스튜디오 설치 후 More Actions -> Virtual Device Manager

(* 에뮬레이터 추가 시 꼭 플레이스토어 아이콘이 있는 기기를 선택해야 한다.)

 

 

iOS의 경우 Xcode - Settings - Locations - CLT 버전을 체크.

Finder - 응용 프로그램 - Xcode 우클릭 - 패키지 내용 보기 - Contents - Developer- Applications - Simulator.app 실행

---

휴