← 글 목록

notes

개발환경 설정 (Mac ~ React Native)

7 min read

Mac에서 React Native 개발환경을 설치·구성하는 단계와 확인 항목.

Kim mr.

프론트엔드 · 기술 블로그

0. Mac 기본 설정

  • 애플 계정 입력 등 기본 설정에 대한 설명은 생략합니다.

1. Homebrew 설치

  • command + space 클릭 후 terminal을 실행합니다.

  • 터미널에 다음 코드를 입력합니다.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  • 설치가 완료된 후에, 다음을 입력합니다.
brew --version
> Homebrew 3.6.20

오류 해결 방법

  • 터미널에 다음 코드를 입력합니다.
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/{사용자이름}/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
  • {사용자이름} 은 whoami 명령어를 실행해 확인할 수 있습니다.

2. iterm2 설치

  • 터미널에 다음 코드를 입력합니다.
brew install --cask iterm2

3. Oh-My-Zsh 설치

  • 터미널에 다음 코드를 입력합니다.
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

터미널 설정은 다음을 참고하세요.

4. Visual Studio Code 설치

  • 터미널에 다음 코드를 입력합니다.
brew install --cask visual-studio-code

5. Node JS 개발환경 세팅

1. NVM 설치

  • 터미널에 다음 코드를 입력합니다.
brew install nvm

  • 환경변수를 설정합니다.

    a. 터미널에 다음 코드를 입력합니다. 

    mkdir ~/.nvm

    b. 터미널에 다음 명령어를 실행합니다. (실행 결과를 복사합니다.)

    brew info nvm
    export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

    c. 터미널에 다음 코드를 입력합니다. (.zshrc 파일 맨 아래에 위의 내용을 추가합니다.)

    vi ~/.zshrc

# .zshrc 파일 맨 아래에 위의 내용을 추가

# ESC + :wq! 를 입력해 내용을 저장

    d. 터미널에 다음 코드를 입력합니다.

    source ~/.zshrc

    e. 터미널에 다음 코드를 입력합니다. (nvm이 제대로 설치되었는지 확인합니다.)

    nvm -v

2. Node.js 설치

  • 터미널에 다음 코드를 입력합니다. (Node.js 설치)
nvm install 16.17.1

  • 터미널에 다음 코드를 입력합니다.
node -v

3. npm 설치

  • 터미널에 다음 코드를 입력합니다.
npm i -g npm@latest

  • 터미널에 다음 코드를 입력합니다. (버전 확인)
npm -v

4. yarn 설치

  • 자바스크립트 패키지 매니저로, npm 대신 사용 가능합니다.

  • 터미널에 다음 코드를 입력합니다.
npm i -g yarn

  • 터미널에 다음 코드를 입력합니다. (버전 확인)
yarn -v

6. React Native 개발환경 세팅

  • React Native 프레임워크를 이용하면, Android와 iOS를 동시에 빠르게 개발할 수 있습니다.

1. Rosetta2 설치

  • 터미널에 다음 코드를 입력합니다.
# Rosetta2 설치
softwareupdate --install-rosetta

# Type A and press return to agree:
A

2. Xcode 설치

  • AppStore에서 Xcode를 설치합니다.

3. watchman 설치

  • 터미널에 다음 코드를 입력합니다.
brew install watchman

7. Android 개발환경 세팅

1. SDKMAN! 설치

  • 터미널에 다음 코드를 입력합니다.
curl -s "https://get.sdkman.io" | bash
  • 터미널에 다음 코드를 입력합니다.
source "$HOME/.sdkman/bin/sdkman-init.sh"

  • 터미널에 다음 코드를 입력합니다.
sdk version

2. Zulu 11.0.15 Java SDK 설치

  • 터미널에 다음 코드를 입력합니다.
sdk install java 11.0.15-zulu

3. Android Studio 설치

  • 응용 프로그램 → Android Studio 실행

  • Do not import settings 체크 → OK 클릭

  • 사진을 참고하여 설치를 진행합니다.

  • Android Studio 실행 → SDK Manager 클릭

  • 다음을 참고하여 SDK Platforms를 선택합니다.
  • 다음을 참고하여 SDK Tools를 선택합니다.

  • (위의 사진에서) OK 클릭 → OK 클릭 → Finish 클릭

  • Android Studio 실행 → SDK Manager 클릭 → Android SDK Location 확인

  • 터미널에 다음 코드를 입력합니다.
vi ~/.zshrc

# 다음 코드를 추가합니다.
export ANDROID_SDK_ROOT= Android SDK Location (위의 사진 참고)
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

# ESC + :wq! 를 입력해 내용을 저장
  • Android Studio 실행 → Virtual Device Manager 클릭

12. Create device 클릭 → 사진을 참고하여 설치 진행

8. iOS 개발환경 세팅

1. Xcode 설정

  • Xcode 실행 → Xcode 클릭 → Settings 클릭 → Locations 클릭 → Command Line Tools선택

2. CocoaPods 설치

  • 터미널에 다음 코드를 입력합니다.
sudo gem install cocoapods

  • 터미널에 다음 코드를 입력합니다. (ffi 설치)
sudo arch -x86_64 gem install ffi

9. 프로젝트 빌드

  • 테스트 프로젝트를 통해 개발환경 세팅이 정상적으로 진행되었는지 확인합니다.

  • 터미널에 다음 코드를 입력합니다.
npx react-native init TestProject

1. Android 에뮬레이터 실행

  • 터미널에 다음 코드를 입력합니다.
# TestProject에서 다음을 실행합니다.
yarn
yarn android

2. iOS 시뮬레이터 실행

  • 터미널에 다음 코드를 입력합니다.
# TestProject에서 다음을 실행합니다.
yarn
cd ios
arch -x86_64 pod install
cd ..
yarn ios