[React Native] EnvSet

어제의 Flutter 환경 세팅에 이어서 이번엔 React Native 환경 세팅이다. 

애초에 React로 개발을 하던 사람이니 Flutter에 비하면 환경 세팅 자체가 그렇게 복잡하지 않아서 

어제 보단 시행착오가 적었지만 그래도 확실히 앱을 개발한다는게 개발한걸 바로 브라우저로 확인할 수 있는 웹보다는 에뮬레이터 같은 것들을 필요로 하다보니 조금 해메게 되긴 하는 것 같다. 

그래도 Flutter는 개발환경 세팅만 해두고 아직 테스트용 프로젝트 생성을 안해봐서 에뮬레이터 돌리는건 해보지도 못했는데,

RN은 어찌 됐든 돌리는거까지 해볼 수가 있어서 오늘은 에뮬레이터 실행까지 따라가보도록 하겠다.

 

0. Node.js 설치 

https://nodejs.org/ko/download

다운로드 | Node.js

이거는 솔직히 React 하던 사람들이면 어차피 다 있을거라고 생각해서 안 쓰려고 했는데, 그래도 써둔다. npm / yarn을 통해서 expo나 React Native CLI 를 설치 하기도 하고 JS 로 개발한다면 당연히 Node.js 필요하니까 꼭 설치해두어야한다. 

 

1. XCode / Android Studio 설치

2023.06.07 - [Dev/envSet] - [Flutter] EnvSet

[Flutter] EnvSet

(관련 홈페이지 링크는 위의 글에 들어있다.)

Flutter 와 동일하게 이 두가지는 당연히 필요로 한다. 여기서 살짝 설명을 하고 넘어가자면 속칭 하이브리드 앱이라는 크로스플랫폼 어플리케이션이 왜 자꾸 XCode와 Android Studio를 필요로 하냐면 Flutter는 Dart, Rn은 JS 로 개발을 하지만 결과적으로 빌드를 하는 과정에서 각 플랫폼에 맞는 언어로 컴파일을 하기 때문에 그 컴파일을 병행하는 빌드툴로써 저 두가지를 필요로 하는거다. 

때문에 Windows 에서는 IOS 앱을 개발할 수가 없다고 하는게 저 Xcode를 사용할 방편이 없어서 그렇게 말을 한다고 보면 되겠다. 

 

2. Expo / React-Native-CLI

앞의 것들이 모두 설치가 끝나고 나면 두가지의 선택지가 생기는데, Expo를 통해 프로젝트를 생성하는 방법이 있고, React Native CLI를 가지고 프로젝트를 생성하는 방법이 있다. 두가지다 장점과 단점이 존재하는데, Expo의 경우에는 쉽고 빠르게 초기설정을 마칠 수 있다는 점, 여러가지 IDE를 사용하지 않고도 개발이 가능하다는 점이 강점이고 그런 이유로 입문자들이 첫 프로젝트를 생성해볼때 사용하면 좋을 것으로 생각된다. 하지만 개발자가 사용하고 싶은 모든 라이브러리를 사용할 수가 없으며 Expo에서 제공하는 라이브러리만 사용이 가능하다는 점, 또 Native 파일들을 제어할 수 없다는 단점이 있다.

React Native CLI를 사용하면 개발자의 입맛대로 개발이 가능하다고 한다.(즉, 개발자가 프로그램을 통제할 수 있는 선택지가 넓어진다는 듯.) 하지만 초기설정이 까다롭고, 각 환경별로 별도의 빌드가 필요하기 때문에 조금 번거롭다고 한다.(나도 처음하기 때문에 쉬운 방법을 선택한거라 후자는 안해봐서 모름)

일단 내가 해본 Expo를 기준으로 설명할건데, React-Native-CLI를 통해서 프로젝트를 생성하는건 추후에 나도 사용해보고 추가할 예정이다. 

 

자 그럼 환경 세팅으로 돌아가서, 먼저 Expo라는게 있으니 저것도 설치를 해야할 거다.

$ npm install -g expo-cli

이렇게 npm을 통해 Expo CLI 를 설치해주고 설치가 끝나면 

$ expo init testProject

이런 커맨드를 통해 프로젝트를 생성할 수 있다. 

그러면 어떤 템플릿으로 만들 것인지 물어보게 되는데, 일단 난 어떤 식으로 개발이 되는지 예제코드를 보고 싶어서 tabs 라는 예제가 있는 템플릿을 선택했다. 이러면 이제 플젝이 하나가 딱 생기게 되는데 플젝 생성은 이걸로 끝이고 이때부터는 사용 중인 IDE로 확인하면 된다. 

(나는 현재 인텔리제이 ultimate를 사용하고 있는데, 다른건 안써봐서 모르겠지만 VScode로 보여주는 예제가 구글링하면 꽤나 나와서 인텔리제이 돈 아까워서 못사겠다 하면 VScode쓰면 될 것 같다. )

 

3. Android / IOS 각자 환경에서 실행시켜보기

여긴 이제 간단한데, 일단 package.json에 스크립트가 있어도 yarn start / npm start가 아니라 일단 expo start를 해줘야 할 것 같다. 

왜냐면 뭐 자꾸

Unable to reach Expo servers. Falling back to using the cached dependency map (bundledNativeModules.json)

이런 알 수 없는 에러가 계속 생겼는데, 이게 해결 방법 찾아보니까 stackoverFlow에서 yarn start 하지말고 expo start 한번 해보라길래 해보니까 해결 됐다.

그럼 이제 문제가 생기는 상황은 다 해결한.. 줄 알았는데 안드로이드 환경으로 실행시켜보니 놀랍게도 실행이 안된다. 이번엔 

No Android connected device found, and no emulators could be started automatically.
Please connect a device or create an emulator (https://docs.expo.dev/workflow/android-studio-emulator).

이런 에러가 생겼는데, 찾아보니 안드로이드 스튜디오를 안깔면 생기는 문제라는 내용 + 안드로이드 스튜디오는 있는데 설치된 SDK, 에뮬레이터를 찾지 못해서 생기는 일이라고 PATH를 잡아야한다고 했음. 

근데 너무 귀찮아서 아니 인텔리제이 뭐해~ 라면서 세팅 들어가서 android sdk 찾으니까 이게 있네...? 갓텔리제이..

그래서 인텔리제이 설정 상으로 설치된 SDK 위치 잡아주고 나니 옆에

저 우측에 쬐끄만하게 있는 여기 라는 글자를 봐주시겠나요..?ㅠ 화살표가 있어요...

 

저렇게 Device Manager라는 탭이 생긴다. 저기서 안드로이드 에뮬레이터를 실행 시킬 수 있고, 이걸 실행 시킨 다음에

yarn android 해주면 정상적으로 빌드 후 실행되는걸 볼 수 있다. 

 

IOS는 솔직히 Window 환경에선 시도 하지도 않겠지만 Mac 환경에서도 할말이 없는게 따로 설정하거나 에뮬레이터 실행시켜 줄 것도 없이 yarn ios 하면 알아서 빌드하고 알아서 열리더라.

 

이렇게 RN 세팅하고 템플릿이지만 실행까지 끝!