[ReactNative] 개발 환경 - 윈도우&맥

<윈도우>

- Node.js 설치

: Node.js를 설치하면 노드 매니저 패키지인 npm도 함께 설치됨. npm을 통해 개발자들이 만든 패키지를 설치하고 사용 가능.

다운로드 | Node.js

: 위 사이트에서 환경에 맞는 파일 다운로드 후 실행(설치)

node --version

: 버전 확인

 

- 파이썬 설치

: 리액트 네이티브는 빌드할 때 파이썬 2 버전 필요

Python Release Python 2.7.18

 

- JDK 설치

: 안드로이드 개발을 위해 안드로이드 개발 언어인 자바 개발 도구 JDK 설치 필요

https://www.oracle.com/java/technologies/javase-jdk16-downloads.html

 

다운로드 파일을 실행 후 설치가 완료되면 환경변수 설정.

변수 이름: JAVA_HOME
변수 값: jdk 경로

: '시스템 > 고급 시스템 설정 > 환경 변수 > 시스템 변수 > 새로 만들기'

%JAVA_HOME%\bin

: '시스템 변수 > Path 선택 > 편집 > 새로 만들기'

java -version
javac -version

: 확인 버튼을 눌러 저장 후 버전 확인

 

- 안드로이드 스튜디오 설치

: 안드로이드르 개발하기 위한 공식 IDE

Download Android Studio and SDK tools  |  Android 스튜디오

Install Type 선택 화면에서 Custom 선택.

SDK Conponents Setup 화면에서 Android SDK, Android SDK Platform, Performance(Intel R HAXM), Android Virtual Device 선택.

: Cofigure > SDK Manager

: SDK-Platforms 오른쪽 하단의 Show Package Details 체크.

Android SDK Platform 29, Intell x86 Atom_64 System Image 또는 Google APIs Intel x86 Atom System Image 선택

: SDK Tools 오른쪽 하단의 Show Package Details 체크.

Android SDK Build-Tools 29.0.2 선택.

설치

변수 이름: ANDROID_HOME
변수 값: 안드로이드 SDK의 위치

: '시스템 > 고급 시스템 설정 > 환경 변수 >  사용자 변수 > 새로 만들기'

안드로이드 SDK의 위치는 SDK Manager의 Android SDK Location에서 확인 가능.

%LOCALAPPDATA%\Android\Sdk\platform-tools

: '시스템 변수 > Path 선택 > 편집 > 새로 만들기'

adb --version

: 버전 확인

 

- 애뮬레이터

Configure > AVD Manager > Create Virtual Device

 

- 에디터 설치

: VS Code 등 원하는 에디터 설치

 

---

 

<맥>

- 왓치맨 설치

: 소스코드의 변화를 감지하고 자동으로 빌드하여 화면에 업로드하는 역할

Homebrew

 

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

: 홈브류 설치

brew --version

: 버전 확인

brew install watchman

: 홈브류를 이용해 와치맨 설치

watchman --version

: 버전 확인

 

- Node.js 설치

: Node.js를 설치하면 노드 매니저 패키지인 npm도 함께 설치됨. npm을 통해 개발자들이 만든 패키지를 설치하고 사용 가능.

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

: nvm 설치

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

: .zshrc 파일을 열어서 위의 코드를 추가

nvm --version

: 터미널 재시작 후 버전 확인

nvm install --lts

: nvm을 이용하여 Node.js 설치

node --version

: 버전 확인

 

- Xcode 설치

: 애플 앱 스토어에서 Xcode 설치. iOS 시뮬레이터 및 iOS 앱을 빌드하는 데 필요한 모든 도구가 함께 설치됨.

설치 후 Xcode를 실행하여 'Preferences > Locations'에서 Command Line Tools의 가장 최신 버전 선택.

 

- 코코아팟 설치

: 맥이나 iOS 개발에 사용되는 라이브러리를 관리해주는 도구

sudo gem install cocoapods

: 코코아팟 설치

pod --version

: 버전 설치

 

- 시뮬레이터

: 가상기기에서 테스트 진행을 위함.

1) Xcode 메뉴 > Open Developer Tool > Simulator

2) 맥의 Spotlight 검색 기능 > Simulator.app 실행

 

- JDK 설치

: 안드로이드 개발을 위해 안드로이드 개발 언어인 자바 개발 도구 JDK 설치 필요

brew cask install adoptopenjdk/openjdk/adoptopenjdk8

: 홈브류로 JDK 설치

java -version
javac -version

: 버전 확인

 

- 안드로이드 스튜디오 설치

: 안드로이드르 개발하기 위한 공식 IDE

Download Android Studio and SDK tools  |  Android 스튜디오

Install Type 선택 화면에서 Custom 선택.

SDK Conponents Setup 화면에서 Android SDK, Android SDK Platform, Performance(Intel R HAXM), Android Virtual Device 선택.

: Cofigure > SDK Manager

: SDK-Platforms 오른쪽 하단의 Show Package Details 체크.

Android SDK Platform 29, Intell x86 Atom_64 System Image 또는 Google APIs Intel x86 Atom System Image 선택

: SDK Tools 오른쪽 하단의 Show Package Details 체크.

Android SDK Build-Tools 29.0.2 선택.

설치

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

: .zshrc 파일에 위의 내용 추가. 첫 줄의 위치는 안드로이드 SDK의 위치와 동일해야 함. 위치는 SDK Manager의 Android SDK Location에서 확인 가능.

echo $HOME/Library/Android/sdk

: 첫 줄의 내용을 확인하는 명령어

adb --version

: 두 경로가 동일할 경우 버전 확인.

 

- 에디터 설치

: VS Code 등 원하는 에디터 설치