리액트 네이티브 설치 - CLI 버전

https://yun5o.tistory.com/entry/React-Native-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%951-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

[React Native] 리액트 네이티브 개발환경 설정(1/6) - 시작하기

 

https://bpblog.tistory.com/233

새 리액트 네이티브 프로젝트 만들기 - 안드로이드 ios 에뮬레이터 실행까지

 

https://devbksheen.tistory.com/entry/React-Native-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

React Native 프로젝트 시작하기

 

* 리액트 네이티브 설치과정

1. Node.js 설치

2. react-native-cli 설치 (글로벌로 설치후 추후 에러나면 글로벌에 설치한건 삭제하기)

3. JDK17 설치 (windows x64 installer)

4. JDK 환경변수 설정 (내PC - 설정 - 고급시스템 설정 - 고급 - 환경변수 - 사용자변수/PATH 편집)

5. 안드로이드 스튜디오 설치 (설치중 SDK 경로 확인) (File > settings > languages & frameworks > Android SDK location 확인)

6. 안드로이드 스튜디오 환경변수 설정

7. 리액트 네이티브 프로젝트 생성 (npx react-native init 프로젝트명) (상위폴더가 모두 영어로 되어있는지 확인)

8. 에러확인 (react-native doctor)

9. npm start 또는 npm run android 

 

* 리액트 네이티브 설치시 에러 체크리스트 

1. 공유폴더에 설치하는 경우 (공유폴더 외부에 설치하기)
2. react-native doctor 에러 (제어판 - 시스템 - 장치이름에 공백제거)
3. react-native-cli 와 react-native 라이브러리 다시 설치하기
4. 폴더경로에 한글이름 모두 제거하기
5. react-native doctor 체크리스트에 애뮬레이터 문제가 있을시 아래 명령어로 애뮬레이터 수동으로 시작해주기
(cd C:\Users\%USERNAME%\AppData\Local\Android\Sdk\emulator
emulator -avd Pixel_2_API_33) 
33 은 자신의 애뮬레이터 버전이고, build.gradle 에 명시된 버전과도 일치해야 한다.
6. react-native doctor 체크리스트에 환경변수가 제대로 설정되지 않은 경우 (환경변수 다시 확인하기)
7. 모든것이 잘되지 않는 경우 다시 npx react-native init 으로 새로 폴더를 생성한 다음 npm run android 실행하기

 

{
  "name": "LearnReactNative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

설치가 완료된 package.json 파일은 위와 같다. 

JDK 설치 확인

JDK 환경변수 설정

안드로이드 정상설치 확인

안드로이드 SDK 경로 확인

리액트 네이티브 프로젝트 생성

 

빌드중 화면

빌드성공 화면

안드로이드 애뮬레이터 실행

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  View,
} from 'react-native';


function App(){
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.title}>리액트 네이티브 준비완료 !</Text>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    color: 'orange'
  }
})

export default App;

package.json 파일이 위치한 곳에서 App.tsx 파일은 삭제하고 App.js 파일을 생성하고 위와 같이 작성한다. Ctrl + S 로 저장하면 애뮬레이터 화면이 바뀌면서 아래와 같은 화면이 나온다. 

 

* 대표적인 에러와 해결방법

https://stackoverflow.com/questions/72768245/typeerror-cli-init-is-not-a-function-for-react-native

TypeError: cli.init is not a function for react native

프로젝트 생성중 에러 해결방법

안드로이드 프로젝트 생성시 에러

npx react-native init 으로 프로젝트를 생성하는 중에 위와 같은 에러를 만나면 react-native-cli 라이브러리를 삭제하고 다시 설치한다. 만약 글로벌로 설치했는데도 에러가 나면 글로벌에 설치된 react-native-cli 는 삭제하고 프로젝트 안에서 -g 옵션없이 설치한다. 

 

react-native doctor 로 검사할때 위와 같은 에러가 나면 안드로이드 스튜디오에서 아래와 같이 Android SDK Command-line Tools 를 설치해준다. 

 

https://zibu-story.tistory.com/187

React Native Cli 초기세팅(윈도우), 오류시 해결방법

 

npm start 나 npm run android 에서 해당 에러가 나면 프로젝트의 부모 디렉토리들 중에 한글명 폴더가 존재하기 때문이다. 그러므로 프로젝트 경로까지 전부 영어폴더명으로 변경한다.