[RN] React-native-cli Mac OS 환경설정 : 초기 프로젝트 구성

해당 글은 Mac OS 기반의 React-native-cli 기반 환경설정 방법입니다.

 

1) 필수 프로그램을 설치합니다.

---

1. homebrew

---

💡 macOS 용 패키지 관리자입니다.

Homebrew

 

# 설치 이후 버전 확인
$ brew -v

 

 

2. node

---

💡 homebrew를 통해서 설치해도 가능하며, 아래 링크를 통해 다운로드를 하여도 무관합니다.

# node install
$ brew install node

# node check
$ node -v

Node.js

 

 

3. yarn or npm

---

💡 해당 프로젝트에서는 ‘yarn’ 패키지 매니저를 선택하였습니다.

# yarn install
$ brew install yarn --ignore-dependencies

# yarn install check
$ yarn -v

# or

# npm install
$ brew install npm

# npm install check
$ npm -v

 

4. watchman

---

💡 watchman 이란?

- React Native 프로젝트에서는 파일이 변경될 때마다 Watchman이 변경 사항을 감지하고 해당 파일만 다시 빌드하게 됩니다. 이를 통해 전체 앱을 다시 빌드하지 않고도 개발자가 작업한 부분만 빠르게 확인할 수 있습니다.

# watchman install
$ brew install watchman

# watchman install check
$ watchamn --version

Watchman A file watching service

 

5. Cocoapods

---

💡 macOS 용  라이브러리 의존성 관리 도구

# cocoapods install
$ brew install cocoapods

# cocoapods install check
$ pod --version

CocoaPods.org

 

 

6. Xcode

---

💡 IOS 의 시뮬레이터로 수행할 XCode를 설치합니다.
App Store - ‘Xcode’ 검색 및 다운로드

 

 

7. Visual Studio Code

---

💡 프로젝트의 소스를 실행시키기 위한 IDE 툴입니다.

Visual Studio Code - Code Editing. Redefined

 

 

2) 프로젝트를 생성합니다.

---

1. react-native-cli 설치

---

# react-native-cli global install
$ yarn global add @react-native-community/cli

# install check & version check
$ react-native --version

 

 

2. react-native-cli 기반 react-native 프로젝트 생성

---

# React Native 프로젝트 생성
$ npx react-native init [프로젝트 명]

# React Native에 특정 버전으로 프로젝트 생성
$ npx react-native@[특정 버전] init [프로젝트 명] --template react-native-template-typescript

# React Native에 Typescript 기반의 프로젝트 생성
$ npx react-native init [프로젝트 명] --template react-native-template-typescript

# CRNA (Create-react-native-app) 방식으로 프로젝트 생성
$ npm install -g create-react-native-app
$ create-react-native-app [프로젝트 명]

 

[참고] 가끔씩 react-native 프로젝트를 생성할 때 아래와 같은 문제가 발생할 때의 해결책입니다.

 

[해결책]  레거시 react-native-cli에서는 해당 템플릿을 사용할 수 없고 새로운 CLI에서만 사용할 수 있다고 합니다. 기존의 cli를 제거하고 npx를 이용하거나 npx를 이용하고 싶지 않다면 새로운 cli를 전역으로 설치해야 합니다.

# 기존의 Global 삭제
$ npm i -g @react-native-community/cli
$ yarn global remove react-native-cli

# Global 추가
$ yarn global add @react-native-community/cli

# 템플릿 새로 구성
$ npx react-native init MyApp --template react-native-template-typescript

# 특정 버전에 맞게 설치
$ npx react-native@0.72.4 init MyApp --template react-native-template-typescript

 

[해결 💡 ] 아래와 같이 설치가 되어야 정상적으로 설치가 되었습니다.

 

 

3) '시뮬레이터'로 실행하기 

---

1. 명령어를 입력하여서 시뮬레이터를 실행시킵니다.

---

💡 터미널에서 아래의 명령어를 입력하여 시뮬레이터를 실행시킵니다.

# start ios
react-native run-ios

 

 

2. 최초 실행하는 경우에는 해당 React-native 앱을 Xcode에 설치를 해야 하므로 시간이 걸립니다.

---

💡 아래의 이미지처럼 최초 앱을 빌딩 하느라 시간이 소요됩니다.

 

 

3. 실행 완료

---

💡 최종 앱의 빌딩이 완료되면 아래와 같은 화면이 출력됩니다.

 

 

 

4) 직접 '디바이스'를 연결하여서 실행시키기

---

💡 해당 테스트 기기는 ‘아이폰’ 디바이스를 이용하여서 연결을 하려고 합니다. ‘아이패드’ 디바이스도 동일하게 연결을 합니다. 디바이스를 연결할 때 필수적으로 디바이스에 USB 단자로 연결된 상태여야 합니다.

 

1. [프로젝트 명]. xcworkspace 파일 실행합니다.

---

💡 해당 설치한 프로젝트에서 ios 폴더에 들어가서 ‘[프로젝트명]. xcworkspace’ 파일을 더블 클릭하면 xcode로 실행이 됩니다. 이외에는 Xcode를 통해서 불러오기를 수행하면 동일한 화면이 출력됩니다.

 

2. [Xcode] 실행 확인

---

💡 해당 파일을 로드해오면 프로젝트 파일을 클릭하면 아래와 같이 출력이 된다.

 

💡 디바이스가 연결되었는지 확인을 합니다.

 

3. [Xcode] signing & capablites 탭으로 이동한다.

---

💡 signing & capablites 탭으로 이동합니다. 이동하면 최초 개발자의 애플 아이디가 연동이 되지 않은 상태이면 아래와 같이 에러로 출력이 됩니다.

 

4. Apple Developer에서 가입을 합니다

---

💡 애플 개발자를 인증하는 회원가입을 수행합니다.

Apple Developer

 

💡 사이트를 접속하면 아래의 ‘Account’ 탭을 눌러서 로그인을 하고 가입을 수행합니다.

 

5. [Xcode] 가입을 하고 로그인을 하면 ‘Team’의 선택 박스를 누르면 로그인된 아이디가 출력됩니다.

---

 

💡 해당 부분을 선택하면 아래와 같이 에러로 발생했던 부분이 사라집니다.

 

6. [Xcode] 해당 시작 버튼을 누릅니다.

---

 

7. [Xcode] 수행 완료

---

💡 최종적으로 아래와 같은 화면이 출력됩니다.

 

오늘의 결론

---

오늘은 React-native 환경 설정 방법에 대해서 숙지하였습니다.
최초 한 번만 제대로 설정하면 추후에는 별다른 수정이 없으므로 한번 제대로 설정하면 문제가 없을 것입니다.

 

 

 

오늘도 감사합니다.😀