[React Native 따라하기 02] 리액트 네이티브 개발 환경 구성하기

어떤게 필요한가?

먼저 개발하기 위해 필요한 것은 NodeJs(npm 포함)와 Expo

그리고 어플을 돌려보기 위해 필요한 iOS와 안드로이드 시뮬레이터 

그리고 코드 작성을 위한 Text Editor 정도 입니다.

리액트 네이티브  관련 내용을 작성하고 있으니

Node 설치법은 생략하도록 하구요.

텍스트 에디터는 각자 편하신 것으로 사용하셔도 상관 없을 것 같습니다.

(저는 Atom 을 사용하고 있습니다.)

Expo 설치

Expo 는 React native로 작성된 Javscript  코드를 각각 플랫폼으로 빌드해주는 개발 툴입니다.

아래 링크로 들어가셔서 Tools 로 들어가서

https://expo.io/

Expo CLI 를 클릭하시면

설치 방법이 나옵니다....

쉽죠?

  npm install expo-cli --global

Node JS 와 npm 설정만 되어 있다면 npm install 만으로 Expo 툴은 설치 완료 된 겁니다.

tools의 부가 설명을 하자면

Client는 

Expo 로 소스를 실행하면 아래와 같은 화면이 뜨는데, 좌측 아래 빨간 상자에 보이는 QR코드와 연동해서 사용하는 어플이라고 합니다.

참고로 저는 개발 PC에 따로 시뮬레이터를 설치하고 진행할 예정입니다.

많은 기기를 소유하고 있지 않을 뿐더러, 안드로이드 기기는 하나도 없기 때문에요....ㅠ

(혹시 제가 아래 작성한 시뮬레이터 말고 다른 방법이 있다면 알려주세요)

Snake는 

웹 브라우저에서 빌딩해볼 수 있는 웹 컴파일러 이고,

SDK는 

React Native Expo  릴리즈들 입니다.

시뮬레이터 설치

이 부분에서 제가 고민을 조금 많이 했는데요...

각 플랫폼에 맞는 시뮬레이터를 어떻게 설치 할 수 있을까 싶다가....

시뮬레이터만 설치 할 수 있는 방법이 없는 것 같아 결국엔 IOS는 xcode 를, 안드로이드는 안드로이드 스튜디오를 설치 하기로 했습니다.

혹시나 방법을 아시는 분이 계시다면 조언 부탁드립니다 ㅜㅜ

IOS Xcode는 app store 를 열어 xcode 를 검색하고, 설치하면 ios 시뮬레이터가 설치 됩니다.

⌘ + space 로 검색창을 열어 

시뮬레이터를 실행시키면

Device 메뉴에서 기기별 시뮬레이터를 실행 할 수 있습니다.

안드로이드는 아래 링크로 들어가셔서 설치 하시고

https://developer.android.com/studio/?hl=ko

실행하시면

아래의 Configure 메뉴의 SDK Manager 를 선택하여

필요하신 안드로이드 OS 버전을 선택하여 설치 하신 다음에

Start a new Android Studio Project 를 선택하여 설치한 안드로이드 버전으로 프로젝트를 하나 만들어 줍니다.

프로젝트를 생성하고, 프로젝트를 열고, 아래 빌드 로그에 completed successfully 가 뜨면 상단 Tools에 AVD Manager 메뉴가 생깁니다.

AVD Manager 메뉴를 열어

Create Virtual Device 를 눌러 가상 기기를 생성하고
Actions 를 눌러 정상 실행되면 완료 되신겁니다.

첫 프로젝트 생성해보기

개발 환경을 구성했으니

그냥 끝나면 허무하겠죠?

expo 를 이용하여 더미 프로젝트를 하나 생성하고, 시뮬레이터에 화면을 띄워 보겠습니다.

Expo IDE(?)인 Expo XDE 가 있다 라는것을 검색 도중에 알게 되어서

알아보던 결과 지원 중단 되어 CLI 를 통한 개발을 할 수 밖에 없는것 같더라구요

(참조 : https://codinghub.tistory.com/48)

그렇다면 어쩔 수 없이 (? 사실 더 편하긴 한것 같습니다)

1. 워크스페이스 폴더를 만들어준 후, 워크스페이스 폴더로 이동합니다.

2. 워크스페이스 폴더에서 아래 expo 를 init 합니다.

  expo init react_dummy

react_dummy 라는 이름의 프로젝트를 생성하는 건데요,

위와 같이 템플릿을 선택하라고 나오면

blank를 선택(엔터)합니다.

workflow도 기본 default 를 선택해줍니다.

workflow 설정이 완료 되면, 앱 이름을 작성하게 되는데요.

name에 앱 이름을 작성하고 엔터를 치면

Expo 초기 설정을 열심히 진행한 뒤

위와 같은 화면이 뜹니다.

작업 완료 로그 하단에 보면 완료 되었다는 메시지와 함께

프로젝트를 실행하려면 

react_dummy 폴더로 이동해서

npm start 를 하라는 

메시지가 보이죠?

react_dummy로 이동합니다

react_dummy 폴더로 이동한 후에 보시면 

저는 npm start 를 하지 않고 expo start 를 했습니다.

npm start 를 해도 결과는 똑같으니 

아무거나 사용하셔도 무관할것 같습니다.

여튼 프로젝트를 실행하면 브라우저에 개발툴이 아래와 같이 열리는데

좌측 사이드메뉴로 시뮬레이터를 실행해볼 수 있습니다.

맥의 경우 IOS 시뮬레이터는 실행을 해두지 않아도 알아서 열리는것 같은데

안드로이드 시뮬레이터는 안드로이드 스튜디오를 열어서 

ADV Manager 로 시뮬레이터를 실행해두어야 정상 실행 되는것 같습니다.

제가 시뮬레이터를 따로 설치해서 그런가 싶네요......

다시 한번 요부분 다른 방법 아시는 분 계신다면 조언 부탁드립니다ㅠ

시뮬레이터 실행 화면입니다

좌측은 IOS, 우측은 안드로이드이구요

각자 설정하신 워크스페이스를 Text Editor 로 여시면

 ${workspace}/react_dummy

App.js 파일이 있구요.

빨간 상자 부분이 현재 어플 화면에 해당하는 부분입니다.

여러가지 설치하시느라 고생많으셨습니다.

다음 03에는 간단하게 코드 설명과

본격적인 화면 개발을 해보도록 하겠습니다.