[React Native] App 만들기

컴퓨터에 expo cli를 설치했고 Expo Go를 휴대폰에 설치했다면 이제 Expo Project 를 만들 거다.

프로젝트를 생성할 디렉토리에 가서

expo init <프로젝트명>

그러면 템플릿 옵션을 고르라고 나오는데 제일 위의 blank를 선택해 주면 된다.(Enter)

시간이 걸리면서 여러가지가 설치 되게 되는데

설치가 완료 되었다면 거기서 VSCode를 실행시켜 주면

code .

구성요소를 보면 다양한 파일들이 있는데 그중 가장 중요한 package.json 도 들어있다. 마치 일반적인 node.js 프로젝트 처럼 보인다.(혹은 create react app 처럼 생겼다.)

이제 이 코드가 폰에서 실행되는지를 확인해 보고 싶은데

package.json 의 scripts(명령어들) 을 보면 실행가능한 5가지의 명령어들이 있다.

하지만 android, iOS 같은 명령어는
시뮬레이터 없고, Java 없고 Xcode 도 없기 때문에 실행이 안될 것이다.

하지만 폰에서 바로 실행할 것이기에 걱정하지 않아도 된다. 우선
프로젝트의 폴더 안에 들어와서

npm start 
또는 
npm run start

명령어를 실행 시켜주면

이렇게 QR 코드를 지닌 웹페이지를 볼 수 있다.
VSCode 의 콘솔창에는 명령어들을 볼 수 있다.

(설치가 안되어 있거나, 연결이 안되어 있어 실행은 안될 것이다.)

중요한 것은 현재 expo 가 실행 중 이라는 것이다.

expo는 기본적으로 폰에서 실행시켜 주기를 기다리고 있는 상태인 것이다.

실행을 위해서는 로그인을 해줘야 한다.
Ctrl + C 로 종료 시키고

컴퓨터와 폰에서 둘 다 로그인을 해주자.

expo login

그리고 폰에서도 이제 프로젝트의 화면이 보여야 한다.

만약에 그렇지 않고 큐알코드 연결에서 무한 로딩이 걸리다 실행이 되지 않는다면

같은 네트워크에 접속해야 한다. 로컬로 앱이 동작하기 때문이다

휴대폰에서 프로젝트를 클릭해 실행을 하면 각자 바쁘게 동작을 하기 시작하는데 결과 화면으로 이렇게 뜬다.

그리고 이 문구의 출처는 바로

프로젝트 안의 App.js 안의 Text 이다!

그리고 웹 사이트에서 이렇게 추가된 device 도 확인 할 수가 있다.

지금까지 React Native 코드를 바로 핸드폰으로 전송했다. 그리고 폰에서 코드를 실행시켰다. expo 라는 앱은 미리 인프라가 다 갖춰져 있고 JavaScript 만 수정하면 동작하기 때문이다.

정리

결과적으로 React Native 앱은 실제로는 Native 하다. 왜냐하면 실제로 운영체제와 대화하고 있기 때문이다. 그리고 많은 인프라들 덕분에 JavaScript 가 운영체제와 상호작용함을 알 수 있다. 그래서 이것이 native 앱이라는 거다.

Bridge, Native 도 우리를 위해서 준비가 되어 있지만
나중에 출시를 하기 위해서는 Java, Xcode 등이 다 설치가 되어 compile 이 되어야 하기 때문이다.

앱 스토어에 코드를 보낼 때는 기본적으로 모든 infrastructure 와 JS 코드를 함께 보내는 것을 의미하기 때문이다. 그렇기에 시뮬레이터, Java, Android Studio, Xcode 가 필요한 것이다. 왜냐하면 이 시설들은 한번은 Android 용으로 컴파일이 되고 한번은 iOS로 컴파일 되기 때문이다. 동일한 JS 코드일 뿐이지만 인프라 시설은 CPU 아키텍쳐에 따라서 다른 언어로 컴파일 될 것이다.

하지만 이러한 셋업 과정이 몹시 불편할 것을 알았던 expo 는

이러한 인프라 시설들을 Java 와 Xcode로 사전에 컴파일을 하여 앱스토어에 보냈고 우리는 그것을 다운 받았다. 이 앱은 멋진 기능을 제공해주는 데 그것이 바로 JavaScript 코드를 변경할 수 있도록 해주는 것이다. 그래서 우리는 컴퓨터에서 폰으로 코드를 보낼 수 있게 됐고, 우리가 직접 인프라 시설을 컴파일 하지 않아도 됐다. expo 가 이미 했고 우리에게는 JS 코드를 업데이트 할 수 있는 멋진 기능을 제공해 준 것이다.