react-native 개발 환경 설정하기(expo)

react-native 개발 환경 설정하기

react native를 시작하기 위한 개발환경을 만들어 보겠습니다. 

우선 expo를 사용하여 만들 것 입니다. 

https://expo.io/

expo의 장점

1. 소스코드가 바뀔때마다 자동으로 업로드 해줍니다.

예전 안드로이드 스튜디오로 코딩을 해줄 때는 귀찮게 코드 바꾸고 다시 run하고 기다리고를 반복했던 기억은 이제 안녕!!!

2. 업데이트할 때 편합니다.

안드로이드 어플을 배포해본적은 없지만 업데이트를 해줄 때마다 서버에 있는 소스 코드를 바꾸는 것이기 때문에 검사나 시간이 오래걸리지는 않습니다. 빠르게 업데이트가 가능합니다. 

expo 단점

1. 추가적인 java와 object-c코드 작성 못함
    

원래 react-native에서 추가적으로 object-c와 java코드를 추가적으로 작성할 수 있습니다. 

하지만 expo로 개발할 경우 제한이 걸립니다.  

2. 외부라이브러리 제한이있음

git hub에 존재하는 react native 라이브러리를 사용한데 제한이 있습니다. 그 이유는 1번에 있습니다. 

그 라이브러리들 뒤쪽에 java와 object-c, swift로 되어있다면 사용하지 못합니다. 

그래서 expo로 개발할 경우 expo에서 제공하는 라이브러리를 사용해야하는 경우도 있습니다. 

설정 시작하기 

1. Node.js 설치하기 

일단 react-native를 사용하려면 node가 설치되어있을 필요가 있습니다. 

https://nodejs.org/ko/download/

2. expo cli설치하기 

예전에는 expo xde라는 프로그램이 있었는데 이제는 터미널에서 실행시킬 수 있는 expo cli라는 것이 생겼습니다. 

설치 명령어 

npm install expo-cli --global

3. 시작 파일 만들기 

create-react-app과 같이 react-native에서도 비슷한 명령어가 있습니다. 

expo init projectName

cd projectName

expo start

명령어를 사용해주면 

템플릿을 고르라고 합니다, 

1. blank

비어있고 한개의 페이지만 존재하는 프로젝트를 만드는 템플릿입니다. 

2. tabs 

react-navigation을 통해 여러 페이지가 만들어져있는 템플릿입니다.

여기서는 blank를 만들어서 실행시켜 보도록 하겠습니다. 

그럼 아래와 같은 구조로 프로젝트 파일이 생깁니다.

프로젝트 파일로 이동 한뒤 expo start를 해주면 이와 같은 웹사이트가 켜집니다. 

4. 시뮬레이터 혹은 자기 스마트폰으로 어플 실행하기

만약 자기 노트북이 맥북이라면 아이폰, 안드로이드 둘다 시뮬레이터를 통해 실행시킬 수 있습니다. 그러나 이전에 준비물이 필요한데요. 

아이폰을 시뮬레이터로 사용하기 위해선 xCode가 안드로이드를 실행시키기 위해선 안드로이드 스튜디오가 필요합니다. 안드로이드 스튜디오에서도 시뮬레이터가 깔려있어야합니다. 

준비가 다되었다면 웹사이트에서 보이던 Run Adroid, ios중 하나를 선택하여 실행하면 자동으로 시뮬레이터가 켜지며 프로젝트가 자동 실행합니다. 

근데 자기 노트북에서 시뮬레이터를 통해 실행하기 싫다 하실때에는 아이폰 안드로이드 둘다 마켓에 가셔서 expo를 설치한뒤 Scan QR Code를 눌러줘서 웹사이트 혹은 터미널에서 보이던 QR코드를 스캔해주면 자기 스마트폰에서도 실행할 수 있습니다. 

이 QR코드를 스마트폰 어플을 통해서 스캔 해주면 프로젝트가 자동으로 실행됩니다. 

<ios>

ios expo앱에서는 send link/sms를 이용합니다. 

수정

아이폰 유저가 아니라 qr코드로 앱을 실행시킬 수 없다고 생각했지만 밑에서 드래그를 통해 아래와 같은 화면을 만든 후 카메라 버튼을 눌러서 qr코드를 인식할 수 있습니다. link와 sms도 이용할 수 있습니다. 

<android>