1.React Native 설치와 실행(hello world)

지난 시간에는 꿀잼 리액트의 매력을 나열해봤습니다.

본디 React.js부터 시작하는게 순서가 아니겠나 싶지만 현재 React Native 프로젝트를 진행중이기 때문에 

까먹지 않기 위해 React Native의 시작부터 디자인, 기능 개발과 릴리즈 버전 빌드에 대한 내용을 순차적으로 다뤄보겠습니다.

이번 시간에는 React Native를 설치와 실행하는 법을 알아보겠습니다.(설치한다는 표현이 맞을지 모르겠네요.)

이 글이 끝날때쯤 여러분은 Android앱과 iOS앱 둘다 만들 수 있는 개발자가 되는것이죠.

(이제 연봉 협상할 때 안드 2700 ios 2700을 들걸 내가 4000을 받고 한방에 해주겠소! 하고 자신있게 말하세요)

미리 언급하자면 저의 React Native버전은 0.55이고, 공식문서는 여기에서 확인하실 수 있습니다.

자 그럼 각설하고 시작하겠습니다.

1. npm 설치

Node를 해보신분이라면 npm을 들어보셨을겁니다. npm은 자바스크립트를 위한 패키지 매니저로,

node.js를 설치하면 npm을 사용할 수 있습니다.

React.js, React Native 모두 npm을 통해서 설치, 제거 할 수 있습니다.

npm을 쓰기위해 우선 https://nodejs.org/ko/ 이곳에 들어가서 stable버전의 node를 설치합시다.

(npm만 따로 설치할 수 있나? 아무튼 react.js까지 연재를 해야하기 때문에 묻지도 따지지도 말고 node.js를 설치해줍시다!)

방금 버전을 확인해보니 저는 node v8.10.0 을 쓰고있네요 

mac유저라면 brew를 통해서 설치할 수 있습니다.

우분투 계열이라면 아래 명령을 통해 쉘에서 설치할 수 있습니다.

$ sudo apt-get update
$ sudo apt-get dist-upgrade
$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ node -v

w3schools님들의 친절한 설명(임베디드 플젝하시는분들도 참조하시면 좋을 것 같네요~)

이제 커맨드, 쉘, 명령프롬프트에 npm -v라고 입력했을때 버전이 나온다면 정상적으로 설치가 된 것 입니다.

2. React-Native-Cli설치

Expo라는 IDE(?)를 사용하면 React Native 프로젝트를 빠르게 시작할 수 있습니다. 

하지만 Expo에서 써드파티 라이브러리를 사용할 수 없는 등 아직까지는 제약이 있기 때문에

우리는 Expo를 쓰지않고 React Native Cli로 개발자 스웩을 뽐내며 프로젝트를 생성하겠습니다.

(저는 atom 에디터를 사용하고 있습니다.)

$ npm install -g react-native-cli

커맨드, 쉘, 명령프롬프트(이하 커맨드라고 통칭하겠습니다.)에 위와 같은 명령어를 입력하면 React-Native-Cli를 설치할 수 있습니다.

-g는 global이라는 뜻으로 전역범위에서 설치(사용)하겠다 라는 뜻을 의미합니다.

npm으로 설치한 모듈은 기본적으로 해당 프로젝트 안에서만 효력을 발휘하는데, cli는 그 목적이 전역 범위에서 일어나야 하기 때문에 -g를 붙여줍니다.

설치가 완료되면 react-native init 프로젝트명 으로 프로젝트를 생성할 수 있습니다.

적절한 경로로 이동해서 아래의 명령으로 프로젝트를 생성합니다.

$ react-native init TestProject

윈도우 명령 프롬프트에서 사용가능한 명령이 아니라고 나오면 새 프롬프트 창을 열면 된다고 하네요.

현재 프롬프트 창에서는 없는 명령어로 인식한다고 합니다.

위의 사진처럼 프로젝트 생성이 완료됩니다.

3. 프로젝트 실행

Wow! 이제 우리는 멀티플랫폼 개발자가 되었습니다.

그럼 프로젝트를 실행해봐야겠죠?

일단 개발 환경에서 프로젝트를 실행하려면 virtual device와 builder가 필요하기 때문에 Xcode와 Android Studio 설치가 필요합니다.

- iOS 실행

Xcode는 App Store를 통해 설치하면 됩니다. 저는 원래 os업데이트를 잘 안하는 편인데(덕분에 ios 11의 배터리 문제에서 생존했습니다!) high serria 버전으로 업데이트해야 Xcode가 설치된다고해서 눈물을 머금고 업데이트를 했습니다.

(윈도우 ios빌드는 아직 안해봤는데 조사하는대로 작성하겠습니다. 일단 관련 링크를 첨부합니다. https://blog.udemy.com/xcode-on-windows/)

Xcode가 있다면 다음 명령만으로 프로젝트를 실행할 수 있습니다.

명령은 프로젝트의 루트(TestProject/)로 이동해서 실행하셔야 합니다.(첫 빌드는 10분 이내의 시간이 약간 소요될 수 있습니다.)

darrui-MacBook-Pro:TestProject darr$ react-native run-ios

Loading dependency graph에서 잠시 시간이 흐른 뒤, 위와 같은 진행창을 볼 수 있습니다

로딩중인 것을 확인할 수 있습니다.(근데 배경이 왜 까맣게 나오나..?)

로딩이 완료되면 React Native의 HelloWorld를 볼 수 있습니다!

- Android 실행

(알림)Android Studio를 예전부터 사용했기 때문에 실제 초기 세팅과는 조금 상이한 부분이 있을 수 있습니다.

설치 혹은 실행중에 에러가 발생한다면 댓글 남겨주세요.

예전에는 Android Studio를 설치하지 않고 brew install android-sdk 식으로 sdk만 설치해도 avd를 실행할 수 있었다는데, 현재는 android 명령으로 avd를 지원하지 않는 것 같습니다.

때문에 Android Studio를 설치해줍니다.(https://developer.android.com/studio/)

Android Studio 설치가 완료되었다면 메뉴의 open을 선택하고 TestProject/android/를 선택한뒤 확인을 눌러주세요.

프로젝트가 열리면 아래와 같은 화면을 볼 수 있는데, 우선 build.gradle을 확인합니다.

(아래와 같은 디렉토리 경로가 보이지 않는다면 이미지 좌측 상단에 빨갛게 표시한 부분을 android로 바꿔주세요) 

현 시점 init 프로젝트의 targetSdkVersion은 26을 나타내고 있네요. 우리는 이 버전의 sdk를 설치해야합니다.

Tools - Android - SDK Manager에서 Android 8.0 (Oreo) API level 26을 선택하거나

Message창에 install Bulid Tools xxx and sync project를 눌러서 sdk를 설치해줍니다.

(내래 26과 관련된건 모조리 눌러주갓어!)

선택 후 OK를 누르면 설치가 진행됩니다.(저는 이미 설치가 되어있는 상태입니다.)

SDK 설치가 완료되었다면, 환경변수를 설정 해줘야합니다.

windows의 경우 내컴퓨터 - 속성 - 고급 시스템설정 - 환경변수 로 들어가서 시스템 변수에 '변수이름 - ANDROID_HOME 변수 값 - C:\sdk의 경로' 를 입력하면 됩니다.

(일반적으로 windows의 sdk는 C:\android-sdk\ 이곳에 위치하고 있는 것 같네요.)

mac의 경우 커맨드 창에서 vi ~/.bash_profile을 입력하신 후, 'export ANDROID_HOME=sdk의 경로' 를 입력하신 뒤 :wq를 입력해서 저장하시면 됩니다.

(제 mac에서는 /Users/darr/Library/Android/sdk 이곳에 위치하고 있습니다.)

.bash_profile을 수정하고 저장하는게 이해가 안되시면 vi 편집기 사용법을 검색하세요!

다음은 Virtual Device를 설정하기 위해 Tools - Android - AVD Manager에 들어갑니다.

(AVD Manager)

위에 3개는 제가 안드로이드 프로젝트를 사용할때 만든것으로 처음 실행하셨다면 아무것도 없는게 맞습니다.

그럼 디바이스를 만들기 위해 Create Virtual Device를 누릅니다.

(가상 디바이스의 환경설정을 선택 할 수 있습니다.)

Create Virtual Device를 누르면 여러가지를 설정할 수 있는 화면이 나옵니다.

예전에는 가상 디바이스의 빠른 부팅을 위해 accelerator 같은 설정을 해줘야 했는데 지금은 기본적으로 지원되는 것으로 알고 있습니다.

웬만한건 기본으로 두셔도 됩니다. 필요하다면 ram과 disk 용량정도?

다만 System Image는 우리가 설치한 API level에 맞는 (현재 targetSdkVersion은 26입니다.) Image를 선택합니다.

(새로 생성된 TestProject 디바이스)

생성한 디바이스는 위 화면처럼 확인할 수 있습니다.

위 디바이스를 더블 클릭하거나 초록색 화살표를 누르면 아래 이미지처럼 디바이스가 실행됩니다.

자 그럼 다시 커맨드로 돌아가서 아래와 같이 run-android 명령을 입력합니다.

darrui-MacBook-Pro:TestProject darr$ react-native run-android

짜잔! iOS 첫 빌드 때보다 시간이 좀 더 걸리긴 했지만 TestProject 앱이 안드로이드에서도 실행됐네요!

ios와 android 둘다 실행되고 있는 것을 볼 수 있습니다.

안드로이드는 실행과정이 좀 번거로웠죠?

iOS와는 다르게 안드로이드 가상 디바이스에서 테스트하기 위해서는 Android Studio에서 가상 디바이스를 실행 한 뒤 run-android 명령을 실행해줘야합니다.

디바이스를 실행하지 않고 run-android를 한다면 대상 기기를 찾을 수 없다며 build failed 메세지를 보시게 됩니다.

4. 요약

* react native를 설치하기 위해 node.js를 설치합니다.(npm 설치)

* npm install -g react-native-cli 명령을 통해 react-native를 설치합니다.

* react-native init ProjectName 꼴로 프로젝트를 생성할 수 있습니다.

* 가상 디바이스를 실행하기 위해서는 Android Studio와 Xcode 설치가 선행되어야 합니다.

* react-native run-ios 명령으로 프로젝트를 실행할 수 있습니다.(안드로이드는 미리 가상 디바이스를 실행해야 합니다.)

5. 마치며

이번 시간에는 React Native 설치와 프로젝트 생성, 디바이스에서 실행하는 과정을 작성했는데요.

안드로이드 디바이스에서 테스트 하기 위해서는 Android Studio에서 디바이스를 실행 한 뒤 run-android를 해야한다는 부분만 주의하시면 될 것 같습니다.

혹시 진행중에 막히는 부분이 있다면 댓글로 남겨주세요!

환경설정을 완전 처음부터 진행하는게 아니라서 설명이 안된 부분이 있을 수 있습니다..!ㅠㅠ

다음 시간에는 프로젝트를 시작할 때 나온 loading 창의 정체와, 프로젝트 경로설명, 디버깅, 디자인에 대한 내용을 작성 해보겠습니다.

Comming soon!