React-Native Cli로 React-Native 프로젝트 세팅하기 (iOS, macOS)

React-Native Cli로 React-Native 프로젝트 세팅하기 (iOS, macOS)

1. 준비물

Node / Watchman / CocoaPods / Xcode / homebrew (node, watchman 설치 용도)

Homebrew가 설치되지 않았다면, https://brew.sh/ 

 

Node	JavaScript 런타임 환경이다. React Native 앱을 빌드하고 실행하기 위해 필요하다.
Watchman	Watchman은 파일 시스템의 변경 사항을 감시하는 도구이다. 성능 향상을 위해 권장된다.
CocoaPods	CocoaPods는 iOS 프로젝트의 의존성 관리 도구이다. 외부 라이브러리를 쉽게 관리할 수 있게 해준다. 참고 : https://guides.cocoapods.org/using/getting-started.html
Xcode	Xcode는 iOS 앱 개발을 위한 통합 개발 환경(IDE)이다. iOS 앱 빌드에 필수적이다. 다운로드 : https://apps.apple.com/us/app/xcode/id497799835?mt=12

 

 

터미널에서 설치 명령어 :

brew install node
brew install watchman
sudo gem install cocoapods

 

2. Command Line Tools 설치하기

 

Xcode를 다운받은 후 Xcode를 열고, Settings > Locations > Command Line Tools 를 선택한다.

 

 

Command Line Tools 드롭다운에서 가장 최근 버전을 선택해 설치한다.

새로운 버전의 Command Line Tools를 설치한 후에는, 일반적으로 동일한 버전의 Xcode를 사용하는 한 다시 설치할 필요가 없다.

 

 

3. iOS 시뮬레이터 설치

Xcode의 Settings > Platforms 탭에서 iOS 시뮬레이터를 설치할 수 있다.

 

 

4. 새로운 어플리케이션 생성하기

설치하고 싶은 경로로 이동한 후, npx를 사용해 React Native 프로젝트를 생성한다.

cd 설치하고 싶은 경로
npx react-native@latest init [프로젝트 이름]

 

성공했다면 터미널에 위와 같이 실행된다.

 

5. 어플리케이션 실행하기

 

필자는 test라는 이름으로 생성한 파일을 VScode에서 열어주었다.

 

1. 의존성 설치

Terminal을 실행시켜, 종속성을 설치한다. npm install 혹은 yarn을 통해 가능하다.

 

 

2. CocoaPods 설치

이후 CocoaPods를 설치해준다. 터미널에서 ios 폴더로 이동한 후 pod install 명령어를 통해 설치 가능하다.

cd ios
pod install

설치를 마치면 아래와 같은 경고문을 볼 수 있다.

Pod 설치가 완료되었으며, xcworkspace를 사용해야 할 것을 알려주고 있다.

 

 

3. 코드 서명하기

만약 애플 개발자 계정이 없다면, 애플 홈페이지에서 개발자 계정을 만들어야 한다.

 

우선 iOS 장치를 USB to Lightning 케이블로 Mac에 연결한다.

이후 Xcode에서 해당 프로젝트를 열고, ios 폴더 내부에 있는 .xcworkspace를 열어준다.

만약 앱을 처음으로 iOS 장치에서 실행할 경우, 장치를 개발용으로 등록해야 할 수도 있다. Xcode의 메뉴바에서 Product > Destination으로 간다. 리스트에서 장치를 찾아 선택하면, Xcode가 해당 장치를 개발용으로 등록한다.

 

이후 Xcode에서 프로젝트를 선택한 후, Signing 탭으로 들어간 후 Team에서 애플 개발자 계정 또는 팀을 선택한다.

마찬가지로 Tests 타겟에 대해서도 Team을 설정해 주어야 한다.

이렇게!

 

 

위와 같은 경고문이 뜨는 이유는 Bundle Identifier의 이름이 unique string이 아니기 때문이다.

일반적으로는 역도메인 스타일을 많이 사용하는데, com.domainname.appname 와 같은 형식으로 domainname에는 웹사이트 주소 혹은 회사명을, appname에는 앱의 이름을 입력한다.

 

 

Bundle Identifier가 다른 개발자의 것과 겹치지 않는 unique한 것이면 아래와 같이 에러가 발생하지 않는다.

마찬가지로 Tests에 대해서도 동일한 작업을 반복해 주어야 한다.

 

 

4. Metro 켜기

위 작업이 성공적으로 마무리 되었다면, 프로젝트로 다시 돌아와 Metro를 켜준다.

yarn start 명령어를 통해 Metro를 켤 수 있다.

이 때 iOS 기기와 mac이 usb로 반드시 연결되어 있어야 한다. (iOS 기기에서 실행시키고 싶으면)

yarn start
i 누르기

 

처음에 Build 하는데 약 3분정도의 시간이 소요되는데 (개인마다 다를듯?) 에러가 난 게 아니면 얌전히 기다리면 success 문구를 맞이하게 된다.

 

나의 iOS 기기에서,

앱 설치된 모습

앱 실행 후 초기 화면

다음과 같이 잘 실행되었으면 성공이다!

 

간혹 신뢰할 수 없는 개발자 문구가 뜨는 경우가 있는데, 이는 일반 > VPN 및 기기 관리에서 권한을 허용해주면 된다.

 

 

끝!

레퍼런스

https://reactnative.dev/docs/environment-setup?guide=native

https://reactnative.dev/docs/running-on-device?platform=ios