FrontEnd/ReactNative

React Native 설치하고 실행해보기!

Grace 2022. 10. 26. 17:13

React-Native 설치

본격적으로 React-Native 프로젝트를 시작해봅시다.
React-Native 설치 링크

모바일 개발이 처음인 경우, Expo를 사용하는 것이 좋습니다.

Expo는 React Native를 기반으로 구축되었으며 Android Studio나 Xcode를 설치하지 않고도 프로젝트를 실행할 수 있어 편하지만 제공되어진 API만 사용이 가능하며 Object-C, Swift, Java, Kotlin으로 작성된 Native Module은 추가할 수 없습니다. 또한, 모든 Expo SDK 솔루션으로 빌드되어 빌드하는 데 시간이 오래걸립니다.

이와는 다르게 React Native는 설정하는 데는 오래걸리지만 모든 라이브러리를 사용할 수 있고 자유도가 높아 여러가지 기능을 사용하여 앱을 개발할 수 있습니다.

간단한 앱 실행 목적이라면 Expo, 본격적으로 앱 개발을 하신다면 React-Native가 적절하겠죠?

Expo CLI

# npm
npm install -g expo-cli

# yarn
yarn global add expo-cli

설치를 하실 때는 꼭 -g 를 붙여 전역 환경에서 설치해주세요.

설치가 완료됐다면, 시작할 프로젝트를 생성할 디렉토리의 위치에

새로운 React-Native 프로젝트를 만들어줍니다.

expo init freeboard_mobile

Mac :: React Native CLI - Android

Node, Watchman, React Native CLI, JDK 및 Android Studio가 필요합니다.

1) Node & Watchman

Homebrew를 사용하여 Node 및 Watchman을 설치합니다.

이미 node가 설치되어있는 경우 node version이 14 이상인지 확인해주세요.

brew install node
brew install watchman

watchman은 파일 시스템의 변경 사항을 관찰하기 위한 Facebook 도구 입니다.

2) JDK(Java Development Kit)

Homebrew를 사용하여 Azul Zulu 라는 OpenJDK 배포판을 설치합니다.

brew tap homebrew/cask-versions
brew install --cask zulu11

Zulu OpenJDK 배포판은 Intel 및 M1 Mac 용 JDK를 제공합니다.
시스템이 이미 JDK가 설치되어 있는 경우 JDK 11 이상인지 확인해주세요

3) Android development environment

3-1) 안드로이드 스튜디오 설치

 

Android Developer 페이지에 접속해,

Android Studio 의 설치파일을 다운로드 합니다.

다운로드 버튼을 클릭했다면, 하나의 모달창이 오픈이 되는데

스크롤을 최하단에 있는 다운로드 버튼을 클릭하면

설치 파일을 다운로드 할 수 있습니다.

M1 Mac 사용 시 Mac with Apple chip, Intel Mac 사용 시 Mac with Intel chip을 선택해주세요.

Installation Wizard 가 실행되면

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

가 모두 선택되어 있는지 확인하고, 이 구성 요소들을 모두 설치합니다.

3-2) 안드로이드 SDK 설치

Android Studio는 기본적으로 최신 Android SDK를 설치합니다.

그러나 네이티브 코드로 React Native 앱을 빌드하려면 Android 11 (R) SDK가 필요합니다. Android Studio의 SDK Manager를 통해 추가 Android SDK를 설치할 수 있습니다.

Android Studio를 열고 "구성" 버튼을 클릭한 다음 "SDK Manager"를 선택합니다.

SDK Manager는 Appearance & Behavior → System Settings → Android SDK 아래의
Android Studio "Preferences" 대화 상자에서도 찾을 수 있습니다.

SDK 관리자 내에서 "SDK 플랫폼" 탭을 선택한 다음 오른쪽 하단 모서리에 있는 "패키지 세부 정보 표시" 옆의 확인란을 선택합니다. Android 11 (R)항목을 열어 다음 항목이 선택되어 있는지 확인합니다:

  • Android SDK Platform 30
  • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

그런 다음 "SDK 도구" 탭을 선택하고 여기에서 "패키지 세부 정보 표시" 옆의 확인란도 선택합니다. "Android SDK Build-Tools" 항목을 열어 30.0.2선택되어 있는지 확인합니다.

마지막으로 "적용"을 클릭하여 Android SDK 및 관련 빌드 도구를 다운로드하고 설치합니다.

3-3) ANDROID_SDK_ROOT 환경 변수 구성

React Native 도구는 네이티브 코드로 앱을 빌드하기 위해 몇 가지 환경 변수를 설정해야 합니다.

$HOME/.bash_profile또는 $HOME/.bashrc( z-shell 을 사용하는 경우 ~/.zprofile또는 ~/.zshrc) 구성 파일 에 다음 줄을 추가 합니다.

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

source $HOME/.bash_profilefor bash또는 를 입력 source $HOME/.zprofile하여 현재 셸에 구성을 로드합니다. echo $ANDROID_SDK_ROOT를 실행하여 ANDROID_SDK_ROOT가 설정되었는지 확인하고 echo $PATH를 실행하여 적절한 디렉토리가 경로에 추가 되었는지 확인하십시오 .

올바른 Android SDK 경로를 사용하고 있는지 확인하세요. Appearance & Behavior → System Settings → Android SDK 아래의 Android Studio "Preferences" 대화 상자에서 SDK의 실제 위치를 찾을 수 있습니다.

4) React Native Command Line Interface

# npm
npm install -g react-native-cli

# yarn
yarn global add react-native-cli

설치를 하실 때는 꼭 -g 를 붙여 전역 환경에서 설치해주세요.

설치가 완료됐다면, 시작할 프로젝트를 생성할 디렉토리의 위치에

새로운 React-Native 프로젝트를 만들어줍니다.

npx react-native init freeboard_mobile

Mac :: React Native CLI - iOS

Node, Watchman, React-Native CLI, Xcode 및 CocoaPods가 필요합니다.

1) Node & Watchman

Homebrew를 사용하여 Node 및 Watchman을 설치합니다.

이미 node가 설치되어있는 경우 node version이 14 이상인지 확인해주세요.

brew install node
brew install watchman

watchman은 파일 시스템의 변경 사항을 관찰하기 위한 Facebook 도구 입니다.

2) Xcode

Mac App Store에서 Xcode를 다운받아줍니다. Xcode를 설치하면 iOS Simulator와 앱 빌드에 필요한 모든 tool들이 설치됩니다.

이미 설치되어 있는 경우 Xcode version이 10 이상인지 확인해주세요.

2) CocoaPods

CocoaPods는 Ruby로 구축되어있으며 gem을 사용하여 cocoapods를 설치해야하는데, 이 경우 sudo(관리자 권한)으로 설치해주어야합니다.

sudo gem install cocoapods

4) React Native Command Line Interface

# npm
npm install -g react-native-cli

# yarn
yarn global add react-native-cli

설치를 하실 때는 꼭 -g 를 붙여 전역 환경에서 설치해주세요.

설치가 완료됐다면, 시작할 프로젝트를 생성할 디렉토리의 위치에

새로운 React-Native 프로젝트를 만들어줍니다.

npx react-native init freeboard_mobile

Windows :: React Native CLI (Android만 가능)

Node, React-Native CLI, JDK 및 Android Studio가 필요합니다.

1) Node, JDK

Windows용으로 널리 사용되는 패키지 관리자인 Chocolately를 통해 Node를 설치합니다.

또한 Chocolately를 통해 Java SE Development Kit(JDK)를 설치합니다.

관리자 명령 프롬프트를 실행하고(명령 프롬프트를 마우스 오른쪽 버튼으로 클릭하여 “관리자 권한으로 실행"합니다.)

choco install -y nodejs-lts openjdk11

이미 설치되어 있는 경우, Node는 14 버전, JDK는 11버전 이상인지 확인해주세요.

최신 버전의 JDK를 사용하는 경우 인식할 수 있도록 프로젝트의 Gradle을 변경해야합니다. 프로젝트 폴더에서 /android/gradle/wrapper/gradle-wrapper.properties 에서 distributionUrl의 값을 현재 Gradle 버전으로 업그레이드해줍니다.

2) Android development environment

2-1) 안드로이드 스튜디오 설치

 

Android Developer 페이지에 접속해,

Android Studio 의 설치파일을 다운로드 합니다.

다운로드 버튼을 클릭했다면, 하나의 모달창이 오픈이 되는데

스크롤을 최하단에 있는 다운로드 버튼을 클릭하면

설치 파일을 다운로드 할 수 있습니다.

Installation Wizard 가 실행되면

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

가 모두 선택되어 있는지 확인하고, 이 구성 요소들을 모두 설치합니다.

2-2) 안드로이드 SDK 설치

Android Studio는 기본적으로 최신 Android SDK를 설치합니다.

그러나 네이티브 코드로 React Native 앱을 빌드하려면 Android 11 (R) SDK가 필요합니다. Android Studio의 SDK Manager를 통해 추가 Android SDK를 설치할 수 있습니다.

Android Studio를 열고 "구성" 버튼을 클릭한 다음 "SDK Manager"를 선택합니다.

SDK Manager는 Appearance & Behavior → System Settings → Android SDK 아래의
Android Studio "Preferences" 대화 상자에서도 찾을 수 있습니다.

SDK 관리자 내에서 "SDK 플랫폼" 탭을 선택한 다음 오른쪽 하단 모서리에 있는 "패키지 세부 정보 표시" 옆의 확인란을 선택합니다. Android 11 (R)항목을 열어 다음 항목이 선택되어 있는지 확인합니다:

  • Android SDK Platform 30
  • Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

그런 다음 "SDK 도구" 탭을 선택하고 여기에서 "패키지 세부 정보 표시" 옆의 확인란도 선택합니다. "Android SDK Build-Tools" 항목을 열어 30.0.2선택되어 있는지 확인합니다.

마지막으로 "적용"을 클릭하여 Android SDK 및 관련 빌드 도구를 다운로드하고 설치합니다.

2-3) ANDROID_SDK_ROOT 환경 변수 구성

React Native 도구는 네이티브 코드로 앱을 빌드하기 위해 몇 가지 환경 변수를 설정해야 합니다.

Window 의 제어판 또는 하단의 메뉴바에 있는 검색 메뉴에서

시스템 환경 설정 을 검색해 실행하면, 시스템 설정 창이 오픈됩니다.

시스템 속성에서 하단 부의 환경 변수 버튼을 클릭하면

환경 변수창을 열 수 있습니다.

사용자 변수에 '새로 만들기' 버튼을 이용해

변수 이름과 변수 값을 넣어 만들어줍니다.

3) React Native Command Line Interface

# npm
npm install -g react-native-cli

# yarn
yarn global add react-native-cli

설치를 하실 때는 꼭 -g 를 붙여 전역 환경에서 설치해주세요.

설치가 완료됐다면, 시작할 프로젝트를 생성할 디렉토리의 위치에

새로운 React-Native 프로젝트를 만들어줍니다.

npx react-native init freeboard_mobile

프로젝트 설치가 잘 되었나요?

프로젝트가 설치된 디렉토리를 VS Code 로 실행해보세요.

여러분들이 처음 만든 React-Native 프로젝트의 첫 시작입니다.

React 프로젝트와 비교했을 때 크게 차이나는 부분이 없어보이지 않나요?

실제로도 React 프로젝트와 매우 비슷한 환경에서 프로젝트를 개발하게 될 것입니다.

React-Native 실행

프로젝트를 생성했으니, 이제 실행을 해봐야겠죠?

React-Native 는 Mac OS 와 안드로이드 환경에 따라서 실행하는 방법이 다릅니다.

자신이 사용하고 있는 컴퓨터 소프트웨어 환경에 맞춰서 프로젝트를 실행해봅시다.

Expo 실행하기

# npm
cd freeboard_mobile
npm start   # you can alse use: expo start

# yarn
cd freeboard_mobile
yarn start   # you can alse use: expo start

그러면 개발 서버가 시작됩니다.

iOS 또는 Android 휴대폰에서 Expo App을 설치하고 컴퓨터와 동일한 무선 네트워크에 연결합니다. Android에서는 Expo 앱을 사용하여 터미널에서 QR코드를 스캔하여 프로젝트를 열고, iOS는 카메라 앱의 내장 QR 코드 스캐너를 사용하면 됩니다.

Expo의 경우에는 React Native docs가 아닌 Expo Docs가 따로 존재합니다.
React Native가 아닌 Expo로 개발하게 된다면 이 문서를 참고해주세요!

Android :: React-Native 실행하기

1) Preparing the Android device

React Native Android 앱을 실행하려면 Android 기기가 필요합니다.

Android Studio를 사용하여 ./freeboard_mobile/android를 여는 경우 Android Studio 내에서 “AVD Manager”를 열어 사용 가능한 Android Vitual Device(AVD) 목록을 볼 수 있습니다.

만약, AVD가 없다면 새로운 AVD를 생성하여야 합니다. R API Level 30 image를 선택하여 AVD를 생성해주세요.

2) Running React Native application

2-1) Metro Start

Metro는 React Native와 함께 제공되는 Javascript 번들러입니다.

npx react-native start

yarn react-native start     # yarn 패키지 관리자 사용 시

Metro는 웹팩과 비슷합니다. Kotlin이나 Java와 달리 JavaScript는 컴파일이 되지 않습니다. 번들링은 컴파일과 동일하진 않지만 성능을 개선하고 플랫폼별로 JavaScript가 지원하도록 변환해줄 수 있습니다.

2-2) Start application

Metro가 터미널에서 실행되도록 한 상태에서 새 터미널을 열어 다음 명령어를 실행합니다.

npx react-native run-android

iOS :: React-Native 실행하기

1) Metro Start

Metro는 React Native와 함께 제공되는 Javascript 번들러입니다.

npx react-native start

yarn react-native start     # yarn 패키지 관리자 사용 시

Metro는 웹팩과 비슷합니다. Swift나 Object-C와 달리 JavaScript는 컴파일이 되지 않습니다. 번들링은 컴파일과 동일하진 않지만 성능을 개선하고 플랫폼별로 JavaScript가 지원하도록 변환해줄 수 있습니다.

2) Start application

Metro가 터미널에서 실행되도록 한 상태에서 새 터미널을 열어 다음 명령어를 실행합니다.

npx react-native run-ios
저작자표시 비영리 변경금지

'FrontEnd > ReactNative' 카테고리의 다른 글

React Native 키보드로 세로길이가 바뀌는것을 막고싶어요!  (0) 2022.10.26
React Navigation Tab Navigator를 사용하고 싶어요  (0) 2022.10.26
앱에서는 브라우저 저장소를 어떻게 사용하나요? React Native로 개발하는 방법! Async-Storage, Debugging Tool  (0) 2022.10.26
React Native에서는 어떻게 페이지 이동을 하나요? React Navigation이 있어요!  (0) 2022.10.26
React-Native 작동원리와 WebView, 기본 태그 및 Styled Component  (0) 2022.10.26

'FrontEnd/ReactNative'의 다른글

  • 현재글React Native 설치하고 실행해보기!

관련글

티스토리툴바