$ npx react-native init LearnReactNative
npx는 Node.js와 함께 설치되는 도구입니다.
Node.js 환경에서 구동되는 CLI 도구들을 간단하게 사용할 수 있게 해줍니다.
생성한 프로젝트를 열어 package.json을 보면 아래와 같은 코드가 있습니다.
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
}
스크립트가 설정되면 다음과 같은 명령어를 실행할 수 있습니다.
$ yarn <스크립트 이름>
android
: 안드로이드 환경에서 앱 구동ios
: ios 환경에서 앱 구동start
: Metro를 구동Metro: 프로젝트에 사용된 자바스크립트 파일들을 모두 읽어 하나의 파일로 합쳐주고, 리액트 네이티브 앱에서 실행할 준비를 해줍니다.
안드로이드 스튜디오를 켜고 Open
을 눌러 프로젝트를 열어줍니다. 생성된 리액트 네이티브 폴더를 보면 android
폴더가 있는데, 그 폴더를 선택해 열어줍니다.
안드로이드 스튜디오에서 AVD를 설치합니다.
설치한 후에 비주얼 코드로 돌아와서 다음 코드를 입력합니다.
터미널은 ctrl + `
키를 입력해서 열 수 있습니다.
$ yarn android
저 같은 경우는 다음과 같은 에러가 났습니다.
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
터미널을 살펴보니 안드로이드 Gradle 버전을 업그레이드 해야 한다는 설명이 있었습니다.
* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin 'com.android.internal.application'.
> Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.
Gradle JDK를 1.8에서 11로 바꿔준 뒤 안드로이드 스튜디오와 비주얼 코드를 재실행해줍니다.
그 후에 $ yarn android
를 실행하면 다음과 같이 애뮬레이터가 실행됩니다.
$ yarn ios
위 명령어를 사용하여 구동할 수 있지만 Apple Silicon이 탑재되어 있다면
$ cd ops
$ pod install
위 두 개의 명령어를 실행해줘야 합니다.
$ pod install
을 실행했을 때 에러가 나서 아래 블로그를 참고하여 해결했습니다.
위와 같이 ios 환경에서도 잘 실행되는 것을 볼 수 있습니다.
프로젝트 개발 환경 세팅이 완료되었습니다.