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 34, Google 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 패키지 재설치
- Android Studio 실행.
- File > Settings(Windows)
- Languages & Frameworks > Android SDK
- SDK Tools 탭 선택.
- CMake를 찾아 체크 해제 후 Apply를 클릭하여 제거.
- 다시 체크한 후 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 입력
화면에 리액트 네이티브 앱이 잘 출력된다.
처음에 오류난 이유가 빌드는 잘 됐는데 뭔가 에뮬레이터에서 문제가 생겼던 것 같다.
에뮬레이터 삭제 후 다시 설치하고 위 방식대로 하니까 더 빨리 잘 나온다 !
'졸업 프로젝트 > React-Native' 카테고리의 다른 글
GPT-4o 기반 음성 챗봇 구현 및 AI 모델을 이용한 졸음 감지 (0) | 2025.05.12 |
---|---|
[React-Native] 카카오 로그인 구현 (0) | 2025.05.12 |
[React-Native] floating 버튼 구현 (0) | 2025.01.22 |
[React-Native] 프로젝트 초기 셋팅 (1) | 2025.01.15 |