[React-Native] React Native 프로젝트 생성 / 실행하기 (연결에러해결)

항해99 실전 프로젝트에 앞서 우리팀은 React Native를 배우기로 했다.

그리고 실전 프로젝트 역시 웹이 아닌 앱으로 진행하려고 한다.

 

React-Native

공식문서 : https://reactnative.dev/

React Native · Learn once, write anywhere

 

설치 버전

 

설치 명령어

//npm
npm install -g expo-cli

//yarn
yarn add expo-cli

 

새 프로젝트 생성

//npm
npx create-expo-app AwesomeProject

cd AwesomeProject
npx expo start

//yarn
yarn create expo-app AwesomeProject

cd AwesomeProject
yarn expo start

 

나는 추가로 듣는 유료강의대로 npm을 설치했는데,
npx로 설치하는 것이 좋을 것 같다는 생각이 들었다. 그러나 npm으로 설치해도 문제될 건 없다.

npm start // 실행 명령어를 입력하면 터미널에 qr코드가 나온다.

 

우리가 리액트에서는 localhost:3000으로 실행해서 작업한 내용을 미리볼 수 있었는데
리액트 네이티브의 경우 앱이다보니 실제 사용하게 될 기기인 핸드폰으로 앱을 다운받아 보면서 작업을 해야한다.

그래서 expo go앱을 다운 받았다.

 

Android 나 ios 에 expo go 앱을 다운 받은 후 터미널에 나와있는 qr코드를 찍어주면 된다.

 

 

위 앱을 다운 받은 후 열면 왼쪽 사진처럼 보이고, Scan QR code로 코드를 찍으면 오른쪽 사진처럼 보이게된다.

 

이때 주의할 점은 작업하고있는 컴퓨터와 동일한 무선 네트워크에 연결해야 한다.

 

그렇지 않으면 위와 같은 파란 화면을 볼 수 있다

Somting went wrong
Network response timed out

내 경우 핸드폰을 LTE에서 와이파이로 변경하여 에러를 해결했다.