[React Native] M1 맥에서 React Native 개발 환경 구축하기

평소에 그냥저냥 쓰고 있던 LG 그램이 갔다. 윈도우 11로 업데이트 하자마자 상태가 많이 안좋아졌다.

따라서 평소에 Mac OS를 쓰고 싶었기 때문에 그냥 맥북을 사기로 했다. 개발하는데 있어 Apple Silicon에 대한 두려움이 있었으나, 그렇다고 인텔 맥북을 살 수는 없었기에 M1 맥북을 샀다.

맥북을 샀으니 개발 환경도 새로 구축해줘야 했다. 만들어줘야 할 환경 중 하나가 리액트 네이티브였다. M1에서 리액트 네이티브를 하려면 제약이 많아, 개발 환경 만들기가 어렵다는 얘기를 많이 들었다. 비장한 각오를 다지며 개발환경 구축에 돌입했다.

 

 

단계가 많아 목차로 정리해보았다.

 

1. Xcode 설치
2. iTerm2 설치
3. oh-my-zsh 설치
4. homebrew 설치
5. node 설치
6. cocoapods 설치
7. watchman 설치
8. Xcode Tools 설정
9. React-Native 설치

 

1. Xcode 설치

Xcode 설치는 App Store에서 쉽게 설치할 수 있다. 용량이 커서 그런지 설치 시간이 오래 걸리니, 이걸 설치하는 동안 다른 작업을 하고 있는 게 좋다.

 

2. iTerm2 설치

iTerm2는 터미널 환경을 최적화하여, React-Native 설치를 원활하게 하기 위해 설치해주었다. 이것을 설치하면, 다양한 테마를 적용하여 터미널을 커스터마이징할 수도 있다. React-Native 설치는 주로 터미널을 활용하기 때문에 iTerm2를 설치하면 좋을 것이다.

https://iterm2.com/ 에서 설치할 수 있다.

해당 사이트에 접속하면 Download라고 크게 써있다. 그것을 클릭해주면 된다.

dmg파일이 설치되는 데, 해당 파일을 다시 클릭하여 설치하면 응용 프로그램에 설치가 된다.

그리고 Finder에서 설치한 iTerm2를 복제해서 복사본을 만들어준다.

iTerm2 복사본을 우클릭하여 정보 가져오기를 누른다.

위 사진과 같이 Rosetta를 사용하여 열기를 체크해준다.

이와 같이 해주는 이유는, 기존의 터미널은 Apple Silicon에서 작동할 수 있도록 하고 iTerm2는 Rosetta로 돌려 아직 호환이 안되는 것을 다루기 위함이다. iTerm2를 복제하지 않고 기존의 터미널과 같이 써도 되지만, 나는 iTerm2를 복제하여 하나는 Apple Silicon용, 나머지는 Rosetta용으로 만들어놨다.

 

3. oh-my-zsh 설치

굳이 설치 안해줘도 되는데 유용한 기능이 있다고 해서 일단 설치했다. 

iTerm2 복사본을 열고 아래와 같이 입력해준다.

 

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

 

oh-my-zsh를 설치해주면 위와 같은 화면이 나온다.

 

4. homebrew 설치

homebrew는 맥에서 다양한 도구들을 설치할 수 있게 해주는 패키지 매니저이다. homebrew를 사용하면 맥에서 간단하게 필요한 패키지를 설치할 수 있다.

https://brew.sh/index_ko

위 링크로 들어가서 homebrew 설치하는 코드를 복사한 후, iTerm2에서 실행해준다.

homebrew 설치 확인은 아래 코드로 할 수 있다.

 

brew --version

 

5. node 설치

react-native는 Javascript이므로 Javascript의 런타임인 Nodejs가 필요하다.

node는 아래 코드를 통해 설치할 수 있다.

 

brew install node

 

아래 코드를 통해 설치 확인한다.

 

node -v

 

node를 설치하면 node package manager인 npm도 같이 설치된다.

따라서 아래 코드를 통해 npm도  확인할 수 있다.

 

npm -v

 

 

6. cocoapods 설치

cocoapods는 ios 개발을 할때 꼭 필요한 의존성 관리자이다.

아래 코드를 통해 설치해준다.

 

sudo gem install cocoapods

 

여기서 간혹 에러가 나는 경우가 있다.

나는 아래와 같은 에러가 났었다.

 

cocoapods error failed to build gem native extension

 

위  에러에 대해 찾아보았고, Applie Silicon M1 맥북의 경우 위 에러가 발생하는 것 같았다.

iTerm2를 Rosetta로 실행했음에도 위와 같은 에러가 나타나는 경우 아래와 같이 해결한다.

 

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install

참고 : https://github.com/CocoaPods/CocoaPods/issues/10518

 

cocoapods 설치 확인

 

pod --version

 

7. watchman 설치

Watchman은 특정 폴더나 파일을 감시하다가 변화가 일어났을 때, 특정 동작을 실행하도록 하는 역할을 한다.

react-native의 경우, 소스코드의 추가, 변경이 발생하면 다시 빌드하기 위해 Watchman을 사용한다.

아래 코드를 통해 설치한다.

 

brew install watchman

 

버전(설치) 확인

 

watchman --version

 

8. Xcode Tools 설정

위 과정들을 모두 해주었다면, Xcode 설치도 완료가 되어가고 있을 것이다.

Xcode 설치가 완료되었다면, Xcode를 열어 몇 가지 설정을 해줘야 한다.

 

Xcode를 열어서 설정하기 전, 프로젝트를 아무거나 선택하거나 프로젝트가 없으면 만들어서 아무 프로젝트나 연다.

 

Preferences를 클릭하여 설정을 시작한다.

 

에뮬레이터가 아닌, 실제 디바이스에 설치하여 개발하는 경우에는 iCloud 계정이 필요한 경우가 있다.

따라서 Accounts에서 계정을 추가해두도록 한다.

 

Locations에서 Command Line Tools가 비어있는 경우, Xcode x.x(버전명)을 선택해준다.

 

Components에서 최신 버전 iOS 시뮬레이터를 설치해준다.

 

9. React-Native 설치

마지막 단계이다.

아래 코드를 iTerm2에서 실행시켜 맥에 react-native-cli을 설치한다.

 

npm install -g react-native-cli

 

설치 확인은 아래와 같다.

 

react-native --version

 

원하는 디렉토리에서 아래 코드를 통해 프로젝트를 생성한다.

 

react-native init 생성할 프로젝트명

 

설치 후에, 아래 코드로 iOS 개발에 쓰이는 PodFile을 열어준다.

 

open 프로젝트명/ios/PodFile

 

PodFile을 열면 iOS 플랫폼 버전을 확인할 수 있다.

아래와 같이 적혀있었다.

 

platform :ios, '11.0'

 

플랫폼 버전을 위와 같이 11.0으로 맞춰줘야 한다. 10.0인 경우 나중에 에러가 나는 경우가 있다고 한다.

 

Xcode에서 이전 단계에서 만들어놓은 프로젝트를 열어 플랫폼 버전을 확인해야 한다.

프로젝트명.xcworkspace 로 프로젝트를 연다. 확장자를 잘 확인한다. .xcodeproj 이 아닌지 확인한다.

 

위와 같이 Finder로 직접열어도 된다.

 

사진이 수평으로 길어서 그런지 화질이 안좋게 나옵니다. 클릭해서 봐주세요.

왼쪽 상단에 project명을 눌러서 Deployment Target이 아까 PodFile에서 확인한 플랫폼 버전(11.0)과 동일한지 확인한다.

 

사진을 클릭해서 봐주세요.

TARGETS에서 프로젝트명을 클릭하여 Deployment Info도 11.0으로 버전을 맞춰준다.

 

실행 방법

실행 방법은 두 가지다.

1) Xcode에서 빌드해서 실행

2) iTerm2에서 프로젝트 디렉터리로 이동하여 실행

 

1)의 경우 아래 에뮬레이터 왼쪽의 실행 버튼을 클릭하여 실행할 수 있다.

사진을 클릭해서 봐주세요.

 

위 화면이 나오면 성공이다.

 

2)의 경우 iTerm2에서 프로젝트가 생성된 디렉터리로 이동하여 아래의 코드를 실행시켜준다.

 

react-native run-ios

 

많은 단계들이 있었지만 여러 블로그 글의 도움을 받아 생각보다는 쉽게 구축할 수 있었던 것 같다!

 

참조

• taese0ng.log
• INTREPIDGEEKS.COM