얼렁뚱땅

[React Native] Expo 프로젝트 만들기 본문

React Native

[React Native] Expo 프로젝트 만들기

당당익명 2021. 8. 9. 17:38

React Native 프로젝트 생성 방법은 2가지가 있다.

 

  1. Expo 이용
  2. 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 하기!