[React Native] Mac CLI 개발 환경 설정

Lemon·2022년 6월 26일
0

React Native

목록 보기
2/4
post-thumbnail

🥲 초기셋팅만 1주일 걸린다는 얘기를 들었을 때는 남의 일인줄 알았다.. 하루면 뚝딱 끝날 줄 알았는데.. 윈도우로 꾸역꾸역 해보려다가 안돼서 친구 찬스로 맥북을 빌렸다.
1주일 꼬박 걸려서 초기셋팅을 완성했다. React Native 하실 분들은 왠만하면 Mac북으로 하시길
다음에 또 React Native를 셋팅할 때 참고하려고 적는 글이다.

1. 홈브류 설치

간단 설명 : 맥용 패키지 매니져, 맥에 필요한 패키지를 쉽고 간단하게 설치 관리할 수 있다.

1-1. 설치

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

1-2. 설치확인

brew --version
Homebrew 3.5.2
Homebrew/homebrew-core (git revision 91535cc3f5b; last commit 2022-06-23)
Homebrew/homebrew-cask (git revision 338777881a; last commit 2022-06-23)

2. watchman 설치

2-1. 설치

brew install watchman

2-2. 설치확인

watchman --version
2022.06.13.00

2-2-1. 👿 발생 오류

설치 확인 중 version이 0.0.0으로 뜨는 오류 발생

watchman --version
0.0.0

2-2-2. 해결 과정

  1. watchman 경로 찾기
which watchman
/opt/local/bin/watchman
  1. watchman 디렉토리 이동 후 수동 삭제 후 버전확인
watchman --version

2022.06.13.00

3. node 설치

3-1. 설치

https://nodejs.org/ko/
LTS 버전 다운로드 (안정적인 지원 제공)

3-2. 설치 확인

node -v

v16.15.1

4. yarn 설치

yarn -v
1.22.19

5. JDK 설치

5-1. cask 설치

brew install cask

5-2. jdk 설치

brew install --cask adoptopenjdk8

5-3. 설치 확인

5-3-1. Java

java -version
openjdk version "11.0.15" 2022-04-19 LTS
OpenJDK Runtime Environment Zulu11.56+19-CA (build 11.0.15+10-LTS)
OpenJDK 64-Bit Server VM Zulu11.56+19-CA (build 11.0.15+10-LTS, mixed mode)

5-3-2. JavaC

javac -version
javac 11.0.15

6. 코코아팟 설치

6-2. 설치

sudo gem install cocoapods

6-3. 설치 확인

pod --version
1.11.3

7. 환경 변수 설정

7-1. .zshrc 파일 열기

vim ~/.zshrc

macOS Catalina (version 10.15)부터 zsh이 기본 터미널로 지정.
zsh을 사용한다면 ~/.zshrc 파일
bash를 사용한다면 ~/.bash_profile 파일에 작성

7-2. 맥환경 저장

i 눌러서 편집 👉🏻 아래내용 복붙 👉🏻 esc 누르고 :wq 작성 후 엔터

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

8. Xcode 설치

8-1. 설치

애플 앱 스토어 👉 Xcode 검색 👉 설치
약 2시간 소요 (엄청 느림)

iOS 시뮬레이터 및 iOS 앱을 빌드하는데 필요한 모든 도구 함께 설치

8-2. Command Line Tools 설정

(xcode 실행하고 상단 메뉴에 보면 있다.)

Preferences 👉 Locations 👉 Command Line Tools 가장 최신 버전 선택


9. 안드로이드 스튜디오 설치

안드로이드 스튜디오

자세한 설명은 공식문서 참고하기


10. react native 설치

10-1. 설치

yarn add react-native
npx react-native init AwesomeTSProject --template react-native-template-typescript

🎉 성공!

프로젝트 열고 빌드

yarn run ios
yarn rnu android

첫번째 시도

Error : 바탕화면에 프로젝트 폴더 생성 후 실행하면 빌드 오류

폴더 이동 : 데스크탑 X → Macintosh HD → Users → Seona.lee → jooyoung

cd /Users/Seona.lee/jooyoung

npx react-native init Test --template react-native-template-typescript

참고 깃허브

  • yarn add babel-plugin-module-resolveryarn uninstall babel-plugin-module-resolver
  • rm -rf node_modules
  • yarn install
  • cd ios
  • pod install


윈도우로 2일만 삽질하고 넘어온게 신의 한수였다.. 더 했으면 답도 없었을 듯 하다ㅠㅠ 맥북으로 옮기고 나서는 2일정도 걸려서 성공했다! 설치하는 내내 답답하고 이러다가 일주일이 지나도 안될 것 같다고 생각할 쯤 되서 너무 기뻤던 기억이... 다음 설치는 금방 해치울 수 있을 것 같다😇

profile
프론트엔드 개발자 가보자고~!!

0개의 댓글