6-1 React-Native란?
React-Native는 페이스북이 개발한 오픈소스 모바일 애플리케이션 프레임워크이다. Android, IOS, Web, UWP용 애플리케이션을 개발하기 위해 사용된다.
6-2 Rn과 Expo
React-Native 프로젝트를 생성할 때 총 2가지 방법을 제공한다. expo Cli와 react-native Cli가 있는데 이것은 각각의 장점과 단점이 있다.
—Expo
장점
- 배포하기 편하다.
- 빠르고 간단하게 설치가 가능하다.
- xCode, Android 스튜디오 없이 본인의 휴대폰으로 테스트 가능하다.
단점
- Java, Kotlin, Objective-C, Swift로 작성이 불가능하다.
- 빌드 파일의 크기가 크다.
- 블루투스 이용불가
—RN
장점
- 자기가 원하는 언어로 추가로 작성이 가능하다.(bridge 역할)
- 빌드파일 크기가 상대적으로 작다.
단점
- 설정 시간이 오래걸린다.
- 배포, 업데이트 속도가 느리다.
- Mac OS없이 IOS 개발을 못한다.
보통 React-Native를 공부한다고 하면 대부분이 RN Cli를 이용해 개발을 진행한다. 이 블로그에서도 역시 RN 라이브러리를 활용할 것이기 때문에 RN 프로젝트 관련된 내용만 포스팅 할 예정이다.
6-3 Xcode 설치
AppStore에서 XCode 설치
→ 평점 1.9따리 IDE인 Xcode를 설치한다.
환경설정 변경
— Xcode → Preference → Locations → Command Line Tools에 현재 XCode버전 설정
6-4 Homebrew 설치
—Homebrew란?
macOS 운영체제의 소프트웨어 설치를 쉽게 도와주는 소프트웨어 패키지 관리 시스템이다.
이것을 설치하면 터미널로 원하는 소프트웨어를 편하게 설치가 가능하다.
—설치방법
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"터미널에 명령어만 입력하면 자동으로 설치가 진행된다.
❗M1을 사용하는경우
이번에 M1칩을 탑제한 맥북이 나오면서 터미널의 구동형식이 Rosetta와 Rosetta2 이렇게 2가지가 생겼다. M1부터 사용하는 Rosetta2에서는 X86_64에서 돌아가는 가상앱들이 실행이 안되는 것이 많다. 아직 홈브루가 설치가 안되는 걸로 알고있는데, 이것은 Rosetta 터미널로 변경을 해주면 쉽게 해결 가능하다.
→ 터미널 정보가져오기 - Rosetta를 사용해서 열기 클릭
6-5 node, watchman 설치
Homebrew를 사용하면 아주 쉽게 설치가 가능하다.
brew install node
brew install watchman
#설치되었는지 확인
node -v
#v14.15.3
watchman -v
#4.9.0→ 버전이 뜨면 정상적으로 설치가 완료된 것이다.
6-6 Cocoapods 설치
IOS 및 macOS, tvOS 등 애플 플랫폼에서 개발을 할 때, 외부 라이브러리를 관리하기 쉽도록 도와주는 의존성 관리도구이다.
—설치방법
#설치 명령어
sudo gem install cocoapods
#확인
pod --version
#1.10.1
6-7 React Native CLI 설치
마지막으로 react-native로 앱을 개발하기 위해 필요한 react-native CLI만 설치를 하면된다.
#설치 명령어
npm install -g react-native-cli
#확인
react-native --version
#react-native-cli: 2.0.1
#react-native: 0.63.0→ 버전확인이 된다면 잘 설치된 것이다.
6-8 실행
이제 터미널로 원하는 폴더에 가서 프로젝트를 실행해 보자!
#예전버전 프로젝트 생성
react-native init [프로젝트명]
#현재
npx react-native init [프로젝트명]이전 버전의 명령어로 실행을 하면 에러가 많이 나므로 현재버전으로 실행하기를 권장한다고 docs에 써져 있으니 그대로 실행하면 될꺼같다.
—폴더확인
→ 설치가 잘 완료되면 이렇게 많은 파일들이 생긴다.
—pod install
react-native에 관련된 라이브러리를 xcode 프로젝트에 추가하기 위해 pod install을 한다.
cd ios
pod install❗podfile은 ios 폴더에 있으므로 ios 폴더에 들어가서 실행한다.
—실행
cd ..
react-native run-ios
→ 다행히 실행이 잘된다.
안드로이드도 같이 설치를 할려고 했지만 아직 사용할거 같지 않아서 안드로이드 설치법은 진짜 나아아아아중에 포스팅 할 것 같다.
Uploaded by Notion2Tistory v1.1.0