<TIL> react-native emulator에 화면 띄우기 - Trello(1)

1. react-native cli , expo cli 어떤 것을...?

간단한 어플리케이션을 만들 예정이라 무거운 expo보다는 react-native cli를 사용하기로 하였다.

 

2. hello world 출력해보기

안드로이드 에뮽레이터로 창 띄우는데 이틀 걸렸다..ㅜ

 

react-native에 나와 있는 방식과 거의 동일하게 진행하였습니다. (mac 환경에서 android 만드는 방법을 사용하였습니다.)

 

1. 기본적으로 설치해야 할 것

일단 homebrew를 설치하였습니다.
 => https://brew.sh/index_ko

Homebrew

brew 설치가 완료되면 밑의 명령어를 실행하여 node와 watchman을 install해줍니다.

brew를 사용할 때는 터미널에서 하는 것을 추천합니다 (제 iTerm은 brew를 인식 못하더라고요..)

brew install node
brew install watchman

밑에 명령어로 jdk를 설치해줍니다.

brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk11

제가 설치한 jdk의 버전은 11입니다.

13 버전은 아직 안정이 덜 되어 있어서 안정적인 11 버전을 사용하였습니다.
관련 이슈 : https://github.com/bjpublic/Reactnative/issues/1

리액트 예제 실행이 안되고 있습니다. · Issue #1 · bjpublic/Reactnative

2. 안드로이드 스튜디오 설치, 설정

다음으로는 andriod studio를 설치해 줍니다.

https://developer.android.com/studio/index.html

Download Android Studio and SDK tools  |  Android 스튜디오

 

'Custom'으로 설정하고 next를 누르면 여러가지 설치 할 목록이 나오는데 그 중에

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device 

위에 항목을 선택한 뒤 'Next'를 클릭하면 됩니다. 

메인 화면

메인화면 맨 아래 톱니바퀴모양의 Configure를 누른 뒤 SDK Manger를 선택합니다.

Appearance & Behavior → System Settings → Android SDK. 순서로 들어가면 
설치 할 수 있는 SDK Platform 여러 버전 중에 저는 9.0버전을 선택하였습니다.

그리고 나중에 사용할 예정인 위에 "Android SDK Location" 경로를 복사해 둡니다.

밑에 show detail을 누르면 세부적인 것을 다운 받을 수 있습니다.

위에 선택되어있는 것을 선택하면 됩니다.

그리고 위에 "SDK tools"을 클릭하여 아래와 같이 설치하면 됩니다.

일단 android studio의 설정은 마쳤습니다.

 

3. 시스템 환경변수 추가 밑 적용

그러면 다시 터미널을 키고

vi ~/.bash_profile

를 실행을 하면 환경변수를 수정 할 수 있습니다.  i를 눌러 insert모드로 들어가서 파일에 밑에 내용을 추가합니다.

export ANDROID_HOME='위에서 복사 했던 sdk 경로'
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

편집이 완료되었으면 esc를 누른 다음 :wq!에 저장을 합니다.

그리고 마지막으로 터미널에서 밑에 명령어로 저장된 파일을 적용시키면 됩니다.

source ~/.bash_profile

 

4. npx로 프로젝트 만들기, 코드 실행

이제 드디어 react-native 프로젝트를 만들 수 있습니다!

(저는 npx를 이용하여 프로젝트를 만들었습니다. => 최신 버전으로 설치 후 바로 삭제 된다.)

npx react-native init <프로젝트 이름 = Trello>

그러면 react-native로 구성이 되어있는 프로젝트가 만들어집니다.

 

프로젝트가 만들어진 다음에 맨 처음으로 해야 할 것은 

android파일로 들어가서 local.properties파일을 만들어줍니다.

 

파일안에는

sdk.dir="sdk 경로 $ANDORID_HOME과 동일한 내용이 들어갑니다."

APP.js에 기본으로 들어있는 코드를 지운 다음

import React from 'react';
import {View, Text} from 'react-native';

const App: () => React$Node = () => {
  return (
    <View>
      <Text>Hello world!</Text>
    </View>
  );
};

export default App;

hello world를 작성합니다. 

 

이제 emulator에서 코드가 돌아가는지 확인 할 수 있는 단계입니다

.

andriod studio를 실행하고 emulator를 실행시켜 줍니다.

emulator는 밑에 configure에 ADK Manager안에서 생성, 삭제, 실행 할 수 있습니다.

emulator는 처음에 생성할 때에는 화면의 크기는 원하는 것으로 하면 되지만 system image는 위에서 설정한 것과 동일한 것이 좋습니다,

저 같은 경우는 아까 (Android 9.0) pie 로 설정하였기 때문에 동일한 pie의 환경의 emulator를 지정하여 사용하고 있습니다.

 

emulator를 실행한 다음에

npx react-native run-android

를 실행해주면 hello world가 emulator 화면에 출력되는 모습을 확인 할 수 있습니다.

쨔잔!