[ReactNative] React Native Cli 프로젝트 시작하기
들어가기에 앞서,
React Native Expo 가 아닌 React Native Cli 를 이용한 프로젝트 생성 방법에 대한 글 입니다.
갑자기 앱 한번 만들어 보고 싶어서, React 를 할 줄 알기에 React Native 를 다짜고짜 시작했지만 프로젝트 생성하고 실행하는데 이렇게 다사다난할 줄 꿈에도 몰랐습니다. (3일 걸렸...🫥ㅋ)
전체적인 실행 방법은 React Native 공식 문서에 나와있습니다.
- React Native 환경 설정 방법 : https://reactnative.dev/docs/set-up-your-environment
- React Native Cli 실행 방법 : https://reactnative.dev/docs/getting-started-without-a-framework?package-manager=npm
또, 이 블로그 글에서 도움을 받았습니다.
- React Native 설정 (IOS) : https://velog.io/@soyoungdl/React-native-settingiOS#-react-native-cli
- 맥(Mac)에 React Native 개발 환경 구축하기 : https://deku.posstree.com/ko/react-native/install-on-mac/#react-native-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1-%EB%B0%8F-%ED%99%95%EC%9D%B8
그리고 오류 발생시 해결 방법은 참고한 글 링크를 같이 첨부하였습니다.
( 2024.08.17 기준 버전입니다. )
MacOS 사용자이고, HomeBrew 가 설치되어 있어야 합니다.
1. Node 와 watchman 을 설치합니다.
$ brew install node
$ brew install watchman
2. Ruby 업그레이드
Ruby는 gem이라는 의존성 관리 도구를 통해 cocoapad 를 설치하기 위해 필요합니다.
기본적으로 MacOS 는 Ruby 가 설치되어 있습니다. 2.6 버전이 설치되어 있습니다. 다음 명령어로 버전을 확인해 볼 수 있습니다.
$ ruby -v
하지만 최신 React Native 에서는 해당 버전으로는 실행이 불가능합니다.
정확하게는 Ruby로 최신 Bundler 설치할 때 Ruby 버전이 낮아서 오류가 발생합니다.
( 참고한 블로그에서 2.7 버전을 사용하시길래 다운받아서 실행해봤지만 Ruby 버전 3.0 이상을 요구했습니다. )
따라서 Ruby 를 업그레이드 해 줍니다. 찾아보니 Ruby 도 Npm 처럼 버전을 컨트롤할 수 있는 환경이 존재하더라구요. 바로 rbenv 입니다.
$ brew install rbenv저는 Ruby 가장 마지막 버전을 확인하고 마지막 버전으로 다운 받았습니다.
# 설치 가능한 마지막 안정 버전 리스트 확인
$ rbenv install -l
# Ruby 버전 설치
$ rbenv install 3.3.4
# 다운 받은 버전을 전역으로 설정
$ rbenv global 3.3.4
Ruby 버전을 확인해 보시고 변경되지 않았다면 터미널을 껏다 켜시면 됩니다.
그리고 나서 gem 을 이용해서 bundler 를 설치해 줍니다.
$ gem install bundler
3. XCode 설치 및 설정
Mac App Store 에서 XCode 를 다운받습니다. (매우 오래 걸림)
Xcode → Settings... → Locations 에서 "Command Line Tools" 를 설정해 줍니다. 최신 버전으로 선택해 주면 됩니다.
그리고 나서 IOS 시뮬레이터를 설치해줍니다.
Xcode → Settings... → Platforms 에서 IOS 를 설치해 줍니다. (이것도 오래 걸립니다...)
4. 프로젝트 생성
기존에 react-native-cli 를 전역(global)로 설치한 적이 있는 경우, 예기치 않은 오류가 발생할 수 있으니 제거해 줍니다.
$ npm uninstall -g react-native-cli @react-native-community/cli이제 react-native-cli 를 이용해 프로젝트를 생성합니다.
$ npx @react-native-community/cli@latest init 프로젝트명
( 저는 FirstApp 로 프로젝트를 생성했습니다. )
생성되면서 터미널에 표시되는 로그를 확인해 보니 전 다음과 같이 오류가 발생했었습니다. 감사하게도 관련해서 "Run instructions for IOS"를 확인하라고 로그에 같이 적혀있었습니다.
링크를 타고 들어가서, 표시된 내용대로 IOS 폴더에 가서 bundle을 설치하고, cocoapod를 설치하라고 하네요. 그대로 해주면 됩니다!
$ cd ios
$ bundle install
$ bundle exec pod install하지만 여기서 전 cocoapod 를 설치하다가 오류가 또 발생하게 됩니다. 🤬
원인은 구글링을 통해 쉽게 찾을 수 있었습니다. bundle이 node_modules 를 설치하지 않고 pod 를 실행하려고 해서 오류가 발생했다고 합니다. 따라서 node_moduels 를 먼저 설치해주면 된다고 합니다. [참고]
ios 폴더를 빠져 나와 프로젝트 루트 폴더로 이동한 후에 npm install 을 하여 node_modules 를 생성해 줍니다.
$ npm install
# 설치 완료되면 다시 ios 폴더로 가서 cocoapod 설치
$ cd ios
$ bundle exec pod install
5. 프로젝트 실행
이제 모든 설정이 끝났습니다! 프로젝트 루트 폴더에서 생성한 프로젝트를 실행합니다.
$ npx react-native run-ios
처음 실행하는 것이라 그런지, 아니면 제 노트북에 문제인지는 모르겠으나 Building the app... 여기서 엄청 오래 걸렸습니다. 따라서 멈춘줄 알고 껏다가 다시 실행했는데요. (이러지 말았어야 했습니다...) 그랬더니 다음과 같이 오류가 발생하더라구요?!
error Failed to build ios project.
ios project. "xcodebuild" exited
"xcodebuild" exited with error code '65'. To debug build logs further, consi
der building your app with Xcode.app, by opening
'FirstApp.xcworkspace.
에러 코드 65는 유명한 오류더라구요. 원인을 빠르게 찾을 수 있었습니다. Xcode 캐시를 삭제하고 다시 실행해 주면 됩니다. [참고]
# Xcode의 Derived Data를 삭제
$ rm -rf ~/Library/Developer/Xcode/DerivedData
# React Native 재 실행
$ npx react-native run-ios
5-1. 프로젝트 실행 시 시뮬레이터에서 발생한 오류
저는 React Native 프로젝트 실행하면서 IOS 시뮬레이터에서 다음과 같은 오류도 발생했었습니다.
No bundle URL present.
Make sure you're running a packager server or have included a .jsbundle file in your application bundle.React Native 프로젝트에서 JavaScript 번들(즉, 앱의 JS 코드)을 찾을 수 없을 때 발생한다고 합니다. 이 문제는 일반적으로 Metro 번들러가 실행되지 않거나, 앱이 JavaScript 번들을 찾을 수 없을 때 발생하게 됩니다. (chatgpt 발췌)
React Native 앱이 실행될 때, Metro 번들러가 JavaScript 코드를 제공해 주는데, 이 번들러가 실행되지 않았거나 중지되었을 경우 이 오류가 발생할 수 있다고 합니다. 따라서 Metro 번들러를 수동으로 실행해 오류를 해결할 수 있습니다.
$ npx react-native start