React Native 세팅 - expo
react native
native는 안드로이드나 ios 같은 운영체제를 말함. native에서 이벤트를 감지해서 발생한 이벤트에 대한 정보를 javascript 코드에 보냄. 그럼 javascript가 ui를 변경하는 코드를 native에 보냄. 이 메시지대로 native가 ui를 업데이트함. native와 javascript가 이렇게 메시지를 주고 받음. 메시지를 주고받는 사이에 bridge가 있음.
이러한 전체 인프라를 컴파일하기 위해 java와 xcode가 필요함. 그래서 리액트 네이티브를 초기 세팅하는 게 복잡함. 이때 인프라를 만들고 싶지 않으면 expo를 씀. 자바스크립트 코드만 빼고 준비되어있는 상태.
expo
역할
react native를 이용하면 안드로이드를 위한 자바, ios를 위한 xcode가 따로 필요함. 이것들이 시뮬레이터. 실제로 앱 만들어 배포하려면 자바스크립트와 리액트 네이티브만 있다고 되는 게 아니고, 자바와 xcode도 설치해야 함.
이런 시뮬레이터들 없이 바로 앱으로 내 코드가 어떻게 작동하고 있는지 보여주는 게 expo. 연습용으로 사용할 만함.
설치
ios 앱은 "expo go", 안드로이드 앱은 "expo"
맥os
- npm install --global expo-cli
- brew update
- brew install watchman
오류
☁ ~ npm install --global expo-cli
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/expo-cli
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/expo-cli'
npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/expo-cli'] {
npm ERR! errno: -13,
npm ERR! code: 'EACCES',
npm ERR! syscall: 'mkdir',
npm ERR! path: '/usr/local/lib/node_modules/expo-cli'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jeonseulgi/.npm/_logs/2022-03-27T13_29_42_613Z-debug.log
☁ ~
expo를 설치하려고 했는데 error가 엄청나게 나오고 끝남.
허가가 안돼서 디렉토리를 만드려는데 실패했다고 함.
☁ ~ sudo npm install --global expo-cli
Password:
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated subscriptions-transport-ws@0.9.8: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated graphql-tools@3.0.0: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
added 1556 packages, and audited 1557 packages in 2m
115 packages are looking for funding
run `npm fund` for details
24 vulnerabilities (11 moderate, 13 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
sudo를 붙여서 다시 명령어를 실행했더니 워닝은 떴지만 설치에 성공함.
실행
- expo init "프로젝트명" : 리액트 할 때 썼던 CRA 같은 프로젝트가 세팅됨.
- expo login : expo 앱에서 로그인한 것과 같은 계정으로 로그인.
- npm start : 폰으로 연 앱에서도 확인 가능.
'TIL' 카테고리의 다른 글
[TIL-153] React Native 시작하기 - (0) | 2022.03.29 |
---|---|
[TIL-152] React Native 초기 세팅 - CRNA, React Native CLI, 안드로이드 스튜디오 SDK, adb (0) | 2022.03.28 |
[TIL-151] 위코드 63일차 : AWS 배포 (0) | 2022.03.27 |
[TIL-150] 위코드 60일차 (0) | 2022.03.24 |
[TIL-149] 위코드 59일차: (0) | 2022.03.23 |