비어있는 기본 프로젝트를 생성해보자. create-react-native-app

생성된 리엑트네이티브 프로젝트의 metro서버를 실행한 화면

비어있는 기본 프로젝트 생성 

npx create-react-native-app

중간에 프로젝트 이름을 물어보는데, 나는 netflvies 라고 정했다.

그리고 비어있는 템플릿을 선택하면 프로젝트 생성이 완료된다. 

 

리엑트 네이티브 프로젝트 실행 방법  1

npm run ios

package.json 파일의 script 블록

package.json 파일을 열어보면 "scripts" 가 있는데, web으로 실행하고 싶다면 npm run web , 안드로이드를 실행하고 싶다면 npm run android 를 하면 된다. 

 

리엑트 네이티브 프로젝트 실행 방법  2

npm start

React Native 서버인 Metro 서버만 독립적으로 실행한다. 

터미널을 하나 더 연다. (나는 zsh 이지만 어떤것이든 상관없음)

VsCode에서 터미널 하나 더 열기

터미널 두개가 열려져 있을 때 보이는 탭

새로 열어둔 커맨드창에 npm run ios (또는 android) 를 입력해서 실행한다. 

 이렇게 하면, 서버 새로고침(r)을 하면서 앱이 멈춰도 서버는 죽지 않기 때문이다.  

npm run ios 는 서버가 없다면 자동으로 실행시키고, 서버가 있으면 추가로 메트로 서버를 생성하지 않는다. 

 

발생할 수 있는 에러 

Local package.json exists, but node_modules missing, did you mean to install?

위 에러는 npm run ios를 실행할 때, package.json 파일은 있지만 node_modules 안에 파일이 없거나 폴더 자체가 없을 경우를 의미한다. 즉, 설계도는 있지만 설계도대로 인스톨된 파일들이 없다는 뜻. 

 

해결 방법

 

npm install 

 

package.json 파일에 맞춰서 모든 의존성 라이브러리들이 다시 설치 된다. 

 

그 외 

아래와 같이 package.json 파일에서  expo start 와 react-native run 중에 어떤것으로 정의되어도 실행하는 데는 차이가 없었다. 

 

  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },

  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start"
  },