얼렁뚱땅
[React Native] Expo 프로젝트 만들기 본문
React Native 프로젝트 생성 방법은 2가지가 있다.
- Expo 이용
- RN CLI 이용
Expo
- 리액트 네이티브를 편하게 사용할 수 있도록 미리 여러가지 설정이 되어 있는 툴
장점
- 사용하기 쉬우며 쉽게 배포 및 관리 가능
- 나는 처음 사용해보는 것이기 때문에 Expo를 선택했다.
- 핸드폰이 있으면 Xcode나 안드로이드 스튜디오 없이도 테스트를 진행하며 개발 가능
- 윈도우 환경이라서 Xcode가 없지만 iphone으로 테스트 가능했다.
단점
- Expo에서 제공하는 API만 사용 가능
- 필요한 기능이 제공되지 않을 경우 네이티브 모듈을 추가로 만들어서 사용하는 것이 불가능
Expo 프로젝트 생성
1. npm을 이용해서 expo-cli 설치
npm install --global expo-cli
2. Expo 프로젝트 생성
expo init [프로젝트명]
blank 선택
3. 프로젝트 실행
cd [프로젝트명]
npm start
웹브라우저에 Expo 개발자 도구 페이지가 열린다.
4. 실제 핸드폰에서 실행
사전에 핸드폰에서 Expo 앱을 다운 받아야 한다!
- 안드로이드 : Expo 앱 내에서 qr 스캔
- 아이폰 : 기본 카메라 어플에서 qr 스캔
- 기기를 흔들면 Expo 프로젝트 메뉴가 열린다.
5. 에뮬레이터에서 실행
나는 윈도우이기 때문에 iOS는 시뮬레이터로 실행 불가능.
(에뮬레이터를 작동시킨 상태에서 아래를 실행시켜야 오류가 발생하지 않는다!)
- 터미널에서 a를 입력하거나
- expo 개발자 도구에서 run on andriod device/emulator 선택
- Control + M 을 누르면 프로젝트 메뉴가 열린다.
로그 확인하기
export default function App() {
console.log("hello");
return (
...
);
}
[정리]
시작 : npm start
종료 : ctrl + c
React Native CLI
장점
- 필요한 기능이 있을 경우 모듈을 직접 만들어 사용할 수 있다.
단점
- 배포가 불편하고 초보자에게 어려움
Github 연결하기
1. 먼저 github에 repository 생성
2. terminal에서 git 주소 추가하기
git remote add origin [주소]
"not a git repository" 에러: git init 해주고 다시 시도 → 경로 설정 다시
3. git pull 받기
git pull origin main
4. git add & commit
*** Please tell me who you are 문구가 나온다면,
email과 이름을 모두 입력한 뒤 다시 commit 하기!
'React Native' 카테고리의 다른 글
[React Native] 스타일링 적용 방법(1) (0) | 2021.08.21 |
---|---|
[React Native] Stack Navigation 사용하기 (0) | 2021.08.18 |
[React Native] Drawer Navigation (tab navigation과 동시에 사용하기) (0) | 2021.08.13 |
[React Native] Tab Navigation 사용하기 (0) | 2021.08.12 |
[React Native] 윈도우에서 React Native 개발 환경 준비 (0) | 2021.08.09 |