React Native에 대해 알아봤으니 본격적으로 React Native 프로젝트를 만들어서 폰으로 띄울 수 있게 해보겠다.

공식 홈페이지에서 Expo CLI를 설치하는 방법을 소개하고 있다.

이전에 React Native CLI를 시도해보다가 너무 복잡해서 그만두고 Expo CLI를 설치하였다.

먼저 cmd 창을 열어 npm install -g expo-cli를 쳐준다. 물론 Node 12 LTS나 그 이상의 버전이 설치되어 있어야 한다.

그 다음, 나는 새로 만들 프로젝트를 ‘RN’이라는 폴더를 바탕화면에 만들어 거기에 만들기로 결정하였다.

그래서 해당 폴더 경로로 cd 커맨드를 이용하여 이동하였고, expo init AwesomeProject라는 커맨드를 이용하여 ‘AwesomeProject’라는 이름의 프로젝트를 만들었다.

그 후

cd AwesomeProject #만들어진 AwesomeProject 폴더로 이동
npm start #expo start라고 해도 된다.

를 입력하여 프로젝트를 구동했다.

이 커맨드를 입력하면 cmd 창에는

이렇게 qr code가 뜨고,

이런 창이 하나 더 뜬다. 하기 전에, 위 사진에서 내가 형광펜으로 노랗게 칠해놓은 ‘Tunnel’을 클릭하자.

Default는 LAN으로 되어있는데, 폰으로 연결했을때 계속 오류가 나서 구글링을 해보니 ‘Tunnel’로 설정해야 오류가 나지 않는다 해서 확인해보니 Tunnel로 바꿔야 오류가 나지 않았다.

그 다음, 이제 폰에서 이 프로젝트를 열어볼 것이다.

나는 안드로이드라, Google app store에서 ‘Expo’를 검색하여 앱을 다운받았다.

위의 앱을 열면 다음과 같은 화면이 뜬다.

여기서, 형관펜으로 친 qr코드 부분을 누르자. 누르면 아래와 같이 카메라로 qr코드를 인식할 수 있게 해준다.

여기에서 위에서 Tunnel로 클릭한 부분 아래에 있는 qr코드에 마우스를 갖다대면 qr코드를 확대해주는데, 이 qr코드를 카메라로 인식하자.

카메라로 인식하면 아래와 같은 화면이 뜨고 하단에 ~~download가 뜨면 정상적으로 로딩이 되는 것이다.

그리고 AwesomeProject 폴더를 vs code로 import해서 App.js 파일을 연 후, 텍스트 부분을 다음과 같이 수정하였ㄷ.

그러면 폰에서는 다음과 같이 뜬다.

그리고 만약 내가 vs code에서 text부분을 또 수정해서 그냥 저장하기만 하면 폰에서 바로 아래와 같이 ‘Refreshing’이라는 메세지가 뜨며 화면이 수정되어 보여지는 것을 확인할 수 있다.

정말 보면서 너무 편하다고 생각이 들었다. 이제 아주 간단한 프로젝트를 생성하여 폰으로 연결시키는 것까지 해봤으니 공식 문서에 나와있는 설명들을 보고 차근차근 공부해야겠다.