새 리액트 네이티브 프로젝트 만들기 - 안드로이드 ios 에뮬레이터 실행까지

반응형

새 리엑트 네이티브 프로젝트를 만들고, 안드로이드 ios 에서 각각 구동해보도록 할께요.

 

---

1. 리액트 네이티브 프로젝트 생성

이제 첫번재 리엑트 네이티브 프로젝트를 생성해보겠습니다. 

터미널에 다음 명령어를 입력 해보세요.

npx react-native init LearnReactNative

 

현재 작업중인 디렉토리에 LearnReactNative 라는 디렉토리가 만들어지고, 그 안에 리액트 네이티브 프로젝트 관련 파일들이 생성됩니다. 해당 디렉토리를 에디터에서 열고, package.json 파일을 열어봅시다.

npx react-native init LearnReactNative

package.json 파일 열기 

package.json

script 부분이 각 안드로이드 ios 앱을 실행을 위한 스크립트 문이다. 

  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  }

---

2. 안드로이드에서 리액트 네이티브 앱 구동

 안드로이드 스튜디오에서 위에서 생성한 프로젝트 안에 android 디렉토리를 열어줍니다.

LearnReactNative 안에 있는 안드로이드 프로젝트

 

프로젝트를 열고 우측 상단에 있는 디바이스 매니저(Device Manager)를 켭니다. 

안드로이드 스튜디오 디바이스 매니저

Creative device 를 클릭하여 디바이스를 추가합니다. 

안드로이드 스튜디오 디바이스 매니저 > 디바이스 생성

Phone 그룹에 있는 것 중 아무거나 해도 되는데, 저는 목록 중 가장 최근 버전인 Pixel 6 Pro 으로 해보겠습니다. 

안드로이드 가상 디바이스 하드웨어 선택

 

OS 버전은 가장 점유율이 높은 것으로 선택 해볼께요. 

OS별 점유율은 다음을 클릭하여 볼 수 있습니다.

OS 버전 선택 및 안드로이드 버전별 점유율 확인

API level distribution char 에서는 버전별 변경 내용과 점유율을 확인할 수 있습니다. 

Android Platform/API Version Distribution

저는 가장 많은 버전을 커버 할 수 있도록 가장 최근 버전인 Tiramisu로 해볼께요.

 

추가됬으면 Device Manager 에서 해당 Device 에 플레이버튼을 눌러 실행합니다.

디바이스 매니저에서 에뮬레이터 실행하기

 

에뮬레이터가 실행된다. 

실행된 에뮬레이터

 

 - 앱 구동하기

 vscode에서 LearnReactNative프로젝트를 연 상태로 터미널을 실행시킨다. vscode에서 터미널을 실행 안시켜도 되지만... 그래도 해본다 ㅋㅋ 

Terminal > New Terminal 클릭 

vscode 에서 터미널 켜기 Terminal > New Terminal

 

터미널에 yarn android 를 입력한다. 

yarn android

 

Metro 창이 뜬다. 

metro

a 를 눌러 안드로이드 앱을 실행 한다. 

그러면 아까 켜놓은 에뮬레이터에 앱이 실행된다. 

안드로이드 에뮬레이터에 실행된 LearnReactNative

3. iOS에서 리액트 네이티브 앱 실행하기 

iOS 시뮬레이터에서도 앱을 실행 해보자!

Xcode와 CocoaPods 만 있으면 yarn ios 명령어만으로도 실행이 가능합니다.

 

yarn ios

 

아이폰 에뮬레이터에 실행된 LearnReactNative