졸업 프로젝트/React-Native

[React-Native] 초기 셋팅 및 프로젝트 생성

ansui 2025. 1. 7. 17:31

React Native 시작하기

 

React Native · Learn once, write anywhere

A framework for building native apps using React

reactnative.dev

 

✅미리 완료한 부분

1️⃣ Node.js 설치

 

2️⃣ JDK 설치

기존에 설치한 버전이 11이었는데 안드로이드 스튜디오에서 빌드하면서 오류 발생

안드로이드 스튜디오 권장이 17이라 다시 설치하고 환경 변수도 다시 설정.

참고 블로그

https://yungenie.tistory.com/11

 

🔧 새로 셋팅한 부분

3️⃣Android Studio 설치

https://developer.android.com/studio?hl=ko

위 사이트에서 다운로드

Android Sdk 설치

(More Actions > SDK Manager > Android 14 (UpsideDownCake)Android SDK Platform 34Google APIs ARM 64 v8a System Image 설치 등 최신 버전 2개정도 설치)

환경 변수 설정

 

참고 블로그

https://hit-sand.tistory.com/62


📂 프로젝트 생성  

가장 많이 오류가 발생한 부분이었다.

처음에 생성할 때 아래와 같이 입력했는데 오류가 발생했고 다르게 생성했을 때는 폴더는 생겼는데 app.jsx나 이런 파일들이 하나도 안생겼다.

npx react-native init "프로젝트명"
🚨️ The init command is deprecated.

- Switch to npx @react-native-community/cli init for the identical behavior.
- Refer to the documentation for information about alternative tools: https://reactnative.dev/docs/getting-started
Exiting...

 

이후 아래처럼 입력하여 해결하였다.

1. 기존에 설치된 react-native-cli 제거
npm uninstall -g react-native-cli

2. react-native-community/cli 설치
npm install -g @react-native-community/cli

3. 프로젝트 생성
npx @react-native-community/cli init 프로젝트명

 

*리액트 네이티브 최신버전부터는 자동으로 타입스크립트로 생성된다.

JS로 바꾸고 싶은 경우 App.tsx 파일명을 App.jsx나 App.js로 변경 → 빨간 줄 뜨는 부분 삭제

 

실행

1. 안드로이드 스튜디오에서 폴더 열기

프로젝트 폴더에서 android 폴더를 연다.

자동으로 빌드가 된다.

 

 

빌드를 하면서 오류가 발생했다. 

[CXX5304] Found corrupted package.xml at C:\Users\tndl3\AppData\Local\Android\Sdk\cmake\3.22.1\package.xml
[CXX5304] Found corrupted package.xml at C:\Users\tndl3\AppData\Local\Android\Sdk\cmake\3.22.1\package.xml
[CXX5304] Invalid package.xml found at C:\Users\tndl3\AppData\Local\Android\Sdk\cmake\3.22.1\package.xml and failed to parse using fallback.
[CXX5304] Invalid package.xml found at C:\Users\tndl3\AppData\Local\Android\Sdk\cmake\3.22.1\package.xml and failed to parse using fallback.

 

 

오류 원인

Android SDK 내의 CMake 패키지와 관련된 package.xml 파일이 손상되었거나 올바르지 않다.

이 파일은 CMake 패키지의 메타데이터를 포함하는 XML 파일로, Android 빌드 시스템에서 C++ 구성 요소를 처리하는 데 사용된다.

 

1. 손상된 파일: C:\Users\tndl3\AppData\Local\Android\Sdk\cmake\3.22.1\package.xml 파일이 손상되었거나 불완전하게 다운로드됨.

2. 잘못된 설치: CMake 패키지가 올바르게 설치되지 않았거나 업데이트 중 오류가 발생함.

3. 권한 문제: 파일이 읽기/쓰기 권한 문제로 인해 제대로 액세스되지 않음.

 

해결 - CMake 패키지 재설치

  1. Android Studio 실행.
  2. File > Settings(Windows)
  3. Languages & Frameworks > Android SDK
  4. SDK Tools 탭 선택.
  5. CMake를 찾아 체크 해제 후 Apply를 클릭하여 제거.
  6. 다시 체크한 후 Apply를 클릭하여 재설치.

 

2. Running Devices

안드로이드 스튜디오에서 에뮬레이터 실행

 

3. 리액트 네이티브 앱 실행

npx react-native run-android

 

a 눌러서 Android로 실행

 

이후 실행하면 android studio 없이 콘솔창에 빌드된 후 에뮬레이터가 창으로 생성된다.


초기 설치만 했는데 벌써 지쳤다...

리액트 네이티브 공부도 열심히해서 졸프 잘 마무리 해야겠다 !!!!!


+) 2025.01.14 추가

이제 개발 시작하려고 다시 열었는데 갑자기 안열린다...

그래서 안드로이드 스튜디오에서 에뮬레이터를 다시 설치했다.

 

혹시 프로젝트 생성 문제인가 해서 프로젝트도 다시 생성했다.

참고 링크:

https://reactnative.dev/docs/getting-started-without-a-framework

npm uninstall -g react-native-cli @react-native-community/cli

npx @react-native-community/cli@latest init 프로젝트명

 

프로젝트 시작 방법

1. 안드로이드 스튜디오에서 에뮬레이터 먼저 실행

More Actions > Virtual Device Manager > Device 먼저 실행

 

2. 에뮬레이터 화면이 켜지면 리액트 네이티브 프로젝트 실행

npm run android 입력

화면에 리액트 네이티브 앱이 잘 출력된다.

처음에 오류난 이유가 빌드는 잘 됐는데 뭔가 에뮬레이터에서 문제가 생겼던 것 같다.

에뮬레이터 삭제 후 다시 설치하고 위 방식대로 하니까 더 빨리 잘 나온다 !