[React Native] #1-1. 리액트 네이티브 시작하기

728x90

리액트네이티브의 시작

여러 개발 경험을 통해 결국 수상하기 위해서는 사람에게 가장 가깝고 친숙한 기술이 필요하다고 생각하게 되었고, 이를 위해 필수적인 요소는 직관적인 UX와 UI를 갖춘 완성도 높은 애플리케이션이라고 판단했다. 기존에는 백엔드와 프론트엔드를 명확히 구분하는 개발 방식을 고수했지만, 모바일 환경에서의 최적화와 사용자 경험을 직접 개선하기 위해서는 앱 개발 전반에 대한 이해가 필수적이라고 느꼈다.

이에 따라, React Native를 선택했다. React Native는 하나의 코드베이스로 iOS와 Android에서 모두 동작하는 크로스 플랫폼 앱을 개발할 수 있어, 개발 효율성을 극대화할 수 있다. 또한, 기존의 React 기반 웹 개발 경험을 살려 JavaScript와 JSX 문법을 활용할 수 있어 학습 곡선이 상대적으로 완만하다는 장점을 가진다. 더욱이, 네이티브 모듈 연동을 통해 성능 최적화가 가능하며, 핫 리로딩(Hot Reloading) 기능을 활용해 빠르게 UI를 수정하고 테스트할 수 있다는 점도 강점이다.

이처럼 React Native는 빠른 프로토타이핑과 사용자 경험 향상을 동시에 고려해야 하는 대회 환경에서 최적의 선택이라고 판단했다.

아래의 책을 기본 공부 책으로 선정했다.

저자의 깃허브는 아래와 같다.

GitHub - Alchemist85K/hands-on-react-native: [한빛미디어] 핸즈온 리액트 네이티브

[한빛미디어] 핸즈온 리액트 네이티브. Contribute to Alchemist85K/hands-on-react-native development by creating an account on GitHub.

github.com

[1] 개발 환경 준비하기

개발환경 경로는 다음과 같다.

/Users/apple/Desktop/RN

하지만 맥북의 파일 경로 문제가 발생하여 개발이 지연되는 일이 발생했다.

문제 발생 : 맥북 파일 수정 불가

iCloud Drive는 macOS의 중요한 파일 관리 시스템으로, 데스크탑 및 문서 폴더를 클라우드와 동기화하여 여러 장치에서 데이터를 쉽게 접근할 수 있게 해준다. 그러나 파일 수정이나 이름 변경, 삭제 등의 작업이 제대로 되지 않는 상황이 발생할 수 있다. 이 경우, iCloud의 동기화 문제가 원인일 수 있다.

특히 macOS의 경우, 시스템 보호 기능(SIP, System Integrity Protection)과 iCloud 캐시 등이 이와 같은 문제를 일으킬 수 있다. 이러한 문제는 종종 iCloud에 연결된 백그라운드 프로세스나 캐시 문제에서 비롯되며, 이 문제를 해결하기 위해서는 일부 프로세스를 재시작하거나 강제 삭제를 시도해야 할 수도 있다.

해결 방법

문제의 핵심은 iCloud Drive의 로컬 캐시나 백그라운드 프로세스가 비정상적으로 동작하여 파일 수정에 영향을 미치는 경우가 많다는 것이다. 아래의 방법으로 문제를 해결할 수 있었다.

관리자 권한을 이용한 파일 수정

macOS에서는 파일 수정이나 삭제를 위해 종종 관리자 권한이 필요하다. 이를 해결하기 위해 sudo 명령어를 사용하여 강제로 파일을 삭제하고, iCloud 동기화 프로세스를 종료시키는 방법을 사용하였다.

터미널에서 관리자 권한을 부여한 후, iCloud 관련 캐시 폴더를 강제로 삭제하는 명령어를 실행하였다. 이를 통해, iCloud Drive의 로컬 캐시가 삭제되었고, 동기화가 원활하게 이루어질 수 있도록 환경을 조정하였다. 이 과정에서 사용하는 명령어는 다음과 같다.

sudo rm -rf ~/Library/Application\ Support/CloudDocs
sudo rm -rf ~/Library/Caches/CloudKit sudo killall bird

각 명령어의 의미는 다음과 같다.

sudo는 관리자 권한을 사용하여 명령어를 실행하는 데 사용된다.
rm -rf는 강제 삭제 명령어로, 폴더 내부의 파일을 포함하여 재귀적으로 삭제한다.
killall bird는 iCloud 동기화를 담당하는 프로세스 bird를 종료시키는 명령어이다.

이 명령어들을 사용하여 문제를 해결할 수 있었으며, 이후 iCloud Drive의 동기화가 정상적으로 이루어졌다.

SIP(System Integrity Protection) 확인 및 비활성화

시스템 보호 기능(SIP) 때문에 특정 시스템 파일이나 폴더를 수정하지 못하는 경우가 발생할 수 있다. 이 문제를 해결하기 위해서는 SIP를 일시적으로 비활성화해야 할 수도 있다. SIP 비활성화 방법은 다음과 같다.

Mac을 복구 모드로 재부팅한다. (Intel Mac의 경우, ⌘ + R을 눌러 재부팅)
복구 모드에서 터미널을 실행한다.
터미널에서 다음 명령어를 입력하여 SIP를 비활성화한다.

csrutil disable

Mac을 재부팅한 후, 다시 한 번 파일 삭제 명령어를 실행한다.

sudo rm -rf ~/Library/Application\ Support/CloudDocs sudo rm -rf ~/Library/Caches/CloudKit

작업이 끝난 후, 복구 모드로 재부팅하여 SIP를 다시 활성화한다.

csrutil enable

이 방법을 통해 파일 수정 문제를 해결할 수 있었으며, iCloud 동기화 문제도 정상적으로 해결되었다.

결론

iCloud Drive에서 파일 수정, 삭제, 이름 변경 등이 제대로 이루어지지 않는 문제는 종종 iCloud 캐시 문제나 동기화 프로세스의 비정상적인 동작에서 비롯된다. 이를 해결하기 위해서는 관리자 권한을 사용하여 강제로 파일을 삭제하거나, iCloud 동기화 프로세스를 종료하고, 필요 시 SIP를 비활성화하여 시스템 보호를 해제하는 방법이 효과적이다.

이 과정에서 터미널 명령어를 통해 시스템의 동기화 프로세스를 제어하고, 클라우드와 로컬 간의 파일 동기화를 안정적으로 유지할 수 있었다. 이후 iCloud Drive의 동기화가 원활하게 이루어졌고, 이 문제를 해결한 경험은 향후 비슷한 상황에서 유용하게 활용할 수 있을 것이다.

1-1. 개발 환경 준비하기

Mac에서 NVM을 이용한 Node.js 설치 및 React Native에서의 필요성

Node.js는 React Native 개발 환경에서 필수적인 역할을 한다. 특히, JavaScript 기반의 모바일 애플리케이션을 개발할 때 패키지 관리와 빌드 프로세스를 처리하는 데 사용된다. 이때 Node.js는 브라우저가 아닌 곳에서 자바스크립트를 사용할 수 있게해주는 Chrome V8 자바스크립트 엔진으로 빌드 된 자바스크립트 런타임이다.

Node.js를 설치하면 패키지를 관리하는 npm이 함께 설치된다.

맥 환경에서는 nvm(Node Version Manager)을 이용하면 손쉽게 Node.js를 설치하고 버전 관리를 할 수 있다.

Node.js가 React Native에서 필요한 이유

React Native CLI 및 Metro Bundler 실행
React Native 프로젝트를 생성하고 실행하기 위해 react-native-cli 및 Metro Bundler가 필요하다. 이들은 Node.js 환경에서 동작하는 JavaScript 도구이므로 반드시 설치해야 한다.
패키지 관리 및 의존성 설치
Node.js는 npm(Node Package Manager) 또는 yarn을 제공하여 프로젝트의 의존성을 관리한다. React Native는 다양한 라이브러리를 활용하기 때문에, npm을 통해 패키지를 설치하고 관리할 필요가 있다.
JavaScript 실행 환경 제공
React Native는 JavaScript를 기반으로 하므로, Node.js가 브라우저가 아닌 환경에서도 JavaScript 코드를 실행할 수 있도록 해준다.

NVM이란?

nvm(Node Version Manager)은 여러 버전의 Node.js를 관리할 수 있도록 해주는 도구이다. 프로젝트별로 특정 버전의 Node.js를 요구할 수 있기 때문에, 하나의 시스템에서 여러 버전을 쉽게 전환할 수 있도록 돕는다.

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

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

github.com

1-2. Mac에서 NVM을 이용한 Node.js 설치 방법

Homebrew를 이용하여 nvm 설치

먼저, Homebrew가 설치되어 있지 않다면 아래 명령어를 실행하여 설치한다.Homebrew가 설치되어 있다면 아래 명령어로 최신 버전으로 업데이트한다.이제 Homebrew를 이용해 nvm을 설치한다.

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

NVM 환경 설정
설치가 완료되면 nvm을 사용하기 위해 환경 변수를 설정해야 한다.만약 bash를 사용 중이라면 .zshrc 대신 .bashrc 또는 .bash_profile을 수정한다.

mkdir ~/.nvm echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc echo '[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"' >> ~/.zshrc echo '[ -s "/opt/homebrew/opt/nvm/etc/bash_completion" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion"' >> ~/.zshrc source ~/.zshrc

Node.js 설치 및 활성화
nvm을 이용해 Node.js 최신 LTS(Long-Term Support) 버전을 설치한다.

설치된 Node.js를 기본으로 설정하려면 아래 명령어를 실행한다. 특정 버전의 Node.js를 설치하려면 버전을 명시할 수 있다.

nvm install 18.17.1 nvm use 18.17.1
nvm use --lts nvm alias default node
nvm install --lts

설치 확인
Node.js와 npm이 정상적으로 설치되었는지 확인한다.

node -v npm -v

공식 GitHub를 이용하여 NVM 설치하는 방법

공식 GitHub 페이지(https://github.com/nvm-sh/nvm)에서는 curl 또는 wget을 이용해 직접 설치하는 방법을 안내하고 있다. Homebrew를 이용한 방법도 있지만, GitHub의 공식 설치 스크립트를 사용하는 것이 가장 신뢰할 수 있는 방식이다.

1. NVM 공식 설치 스크립트 다운로드

NVM을 설치하기 위해 아래 명령어 중 하나를 실행한다.

아래 명령어는 GitHub의 최신 버전 설치 스크립트를 다운로드하고 실행하는 과정이다.

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

또는

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash

작업 경로가 /Users/apple/Desktop/RN일 때라도 명령어를 실행하는 위치는 상관없다.

NVM은 사용자 홈 디렉토리에 설치됨

위 명령어를 실행하면 NVM은 기본적으로 $HOME/.nvm 디렉토리에 설치된다.

즉, 현재 작업 경로가 어디든지 NVM은 /Users/apple/.nvm에 설치된다.

설치 후 .zshrc, .bashrc, .bash_profile 등의 쉘 설정 파일에 NVM 환경 변수를 추가해야 한다.

설치 스크립트가 자동으로 이를 설정하지만, 만약 적용되지 않는다면 명령어를 실행하여 환경 변수를 적용할 수 있다.

환경 변수 설정이 필요함

이후 터미널을 다시 열거나 source ~/.zshrc를 실행하면 적용된다.

어디서든 nvm 사용 가능

설치가 완료되면 nvm 명령어는 전역적으로 사용할 수 있다.

즉, 현재 작업 디렉토리가 /Users/apple/Desktop/RN이든 /Users/apple/Documents이든 상관없이 nvm을 사용할 수 있다.

NVM이 정상적으로 설치되었는지 확인하려면 다음 명령어를 실행하면 된다 : command -v nvm

출력이 nvm이면 정상적으로 설치된 것이다.

또한, NVM의 버전을 확인하려면 다음 명령어를 입력하면 된다 : nvm --version

이때 터미널을 한 번 껐다가 켜야한다.

출력이 0.40.1(설치한 버전)과 같이 나오면 정상적으로 설치된 것이다.

이후, Node.js가 정상적으로 설치되고 동작하는지 확인하려면 아래 명령어를 실행한다.

2. 설치 후 설정

설치 확인이 되면 다음 명령어를 이용해 Node.js를 설치한다 : nvm install --lts

LTS 버전은 장기 지원되는 버전으로, 안정성이 보장되며 보안 업데이트와 버그 수정이 정기적으로 제공된다. 일반적으로 프로덕션 환경에서 Node.js를 사용할 경우, 최신 버전보다는 LTS 버전을 설치하는 것이 안정적이다.

설치가 완료되었다면 다음 명령어를 통해 버전을 확인한다. : node --version

추가적인 명령어는 다음과 같다.

NVM을 이용해 최신 LTS 버전의 Node.js를 설치하려면 다음 명령어를 입력한다 : nvm install --lts
특정 버전을 설치하려면 다음과 같이 실행한다 : nvm install 18.17.1
설치된 Node.js 버전을 기본값으로 설정하려면 다음과 같이 실행한다 : nvm alias default 18.17.1
설치된 Node.js 버전을 확인하려면 다음과 같이 실행한다 : nvm list
특정 버전의 Node.js를 사용하려면 다음과 같이 실행한다 : nvm use 18.17.1
설치된 모든 버전을 확인하려면 다음 명령어를 입력한다 : nvm ls-remote

NVM을 사용하는 이유

프로젝트별 Node.js 버전 관리
프로젝트마다 요구하는 Node.js 버전이 다를 수 있기 때문에, nvm을 사용하면 여러 버전을 설치하고 손쉽게 전환할 수 있다.
업데이트가 용이함
최신 버전 또는 특정 버전의 Node.js를 쉽게 설치하고 변경할 수 있다.
시스템 전체에 영향을 주지 않음
nvm을 사용하면 시스템 기본 Node.js를 변경하지 않고, 사용자 디렉토리 내에서만 Node.js를 관리할 수 있다.

brew를 이용한 Watchman 설치 방법

React Native 개발 환경에서 Watchman은 파일 시스템을 감시하고 변경 사항을 빠르게 감지하는 역할을 한다. 특히 Metro Bundler가 소스 코드 변경을 감지하고, 자동으로 앱을 다시 빌드하는 데 필수적이다. Mac 환경에서는 brew(Homebrew의 대체 패키지 관리자)를 이용해 Watchman을 설치할 수 있다.

먼저 터미널에서 다음 명령어를 실행하여 brew가 설치되어 있는지 확인한다 : command -v brew

만약 아무 결과도 출력되지 않는다면 brew가 설치되지 않은 상태이다.

이 경우 다음 명령어를 실행하여 설치한다:

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

설치가 완료되면 터미널을 다시 시작한 후 brew 명령어가 정상적으로 실행되는지 확인한다.

==> Next steps:
- Run these commands in your terminal to add Homebrew to your PATH:
echo >> /Users/apple/.zprofile
echo 'eval "$(/usr/local/bin/brew shellenv)"' >> /Users/apple/.zprofile
eval "$(/usr/local/bin/brew shellenv)"
- Run brew help to get started
- Further documentation:
https://docs.brew.sh

위와 같은 출력이 이루어지면 정상적으로 설치된 것이다.

brew를 이용한 Watchman 설치

brew를 이용해 Watchman을 설치하려면 다음 명령어를 실행한다.

이 명령어를 실행하면 최신 버전의 Watchman이 다운로드되고, 자동으로 설치된다.

brew install watchman

설치 확인

설치가 완료된 후 아래 명령어를 실행하여 Watchman이 정상적으로 동작하는지 확인한다.

정상적으로 설치되었다면 Watchman의 버전이 출력된다. 이때도 마찬가지로 터미널을 재실행한다.

watchman --version

Watchman을 React Native에서 사용하는 이유는 다음과 같다.

파일 변경 감지 : 소스 코드 변경을 실시간으로 감지하고 Metro Bundler에서 빠르게 반영할 수 있도록 한다.
핫 리로딩 지원 : React Native의 핫 리로딩 기능이 정상적으로 작동하려면 Watchman이 필요하다.
빌드 속도 최적화 : 변경된 파일만 다시 빌드하여 전체 빌드 시간을 단축한다.
Metro Bundler 안정성 향상 : Watchman이 없으면 Metro Bundler 실행 시 오류가 발생할 가능성이 높다.

이로서 가상 기기를 사용하지 않고 실물 기기를 사용해서 테스트 할 경우, 개발 환경 준비가 모두 완료되었다.

이후 내용은 가상 기기를 사용해 테스트하기 위한 환경 설정이다.

ios 개발 환경 설정하기

MAC OS 환경에서만 가능하다.

React Native로 iOS 앱을 개발하려면 Xcode, iOS 시뮬레이터, JDK가 필요하다.

iOS 앱을 개발하려면 Xcode가 필수적이다. Xcode는 Apple에서 제공하는 공식 개발 도구이며, iOS 시뮬레이터와 함께 제공된다.

가장 간단한 방법은 Mac App Store를 이용하는 것이다.

App Store 실행
검색창에 Xcode 입력
Xcode를 선택하고 설치 버튼 클릭

설치가 완료되면 Xcode를 실행하고, 초기 설정을 진행한다. 만약 터미널에서 설치하려면 Xcode Command Line Tools만 설치할 수도 있다.

설치가 완료되면 Xcode가 정상적으로 설치되었는지 확인한다 : xcodebuild -version

출력이 다음과 유사하면 정상적으로 설치된 것이다 : Xcode 15.2 Build version 15C500b

설치가 완료되면 Xcode Command Line Tools를 가장 최신 버전으로 설정해야한다.

Xcode 실행 > Perference > Settings > Command Line Tools

시뮬레이터 실행하기

Xcode 실행 > Open Developer Tool > Simulator

시뮬레이터가 실행되면 상단 메뉴에서 File > Open Device 메뉴에서 원하는 기기를 선택할 수 있다.

JDK(Java Development Kit) 설치하기

React Native에서 Android 환경을 사용하려면 JDK가 필요하다. 하지만 iOS 앱 개발에서도 일부 패키지 설치 과정에서 JDK가 필요할 수 있으므로 미리 설치해두는 것이 좋다.

이때 JDK(Java Development Kit)는 Java 애플리케이션을 개발하고 실행하기 위한 필수 도구 모음이다. Java 프로그램을 컴파일하고 실행하려면 JDK가 필요하며, 이는 JRE(Java Runtime Environment)와 Java 컴파일러, 개발 도구를 포함한다.

구성 요소	설명
JRE (Java Runtime Environment)	Java 프로그램을 실행할 수 있는 환경
JVM (Java Virtual Machine)	Java 바이트코드를 실행하는 가상 머신
Java 컴파일러 (javac)	Java 소스 코드를 바이트코드(.class)로 변환
Java 디버거 (jdb)	Java 프로그램을 디버깅할 수 있는 도구
Java API 라이브러리	기본적인 Java 클래스 및 패키지 모음

JDK는 단순히 Java 프로그램을 실행하는 것이 아니라, 개발자가 코드를 작성하고 빌드할 수 있도록 하는 기능을 제공한다.

Java 기반 도구 실행

• Android Studio, Gradle과 같은 Java 기반 도구를 실행할 때 JDK가 필요하다.

• React Native에서 Android 앱을 빌드할 때도 JDK가 필수적이다.

Java 프로그램 컴파일 및 실행

• javac(Java Compiler)를 이용해 .java 파일을 .class 바이트코드로 변환할 수 있다.

• 이후 JVM에서 실행하여 프로그램을 구동할 수 있다.

Android 개발 및 React Native 지원

• React Native에서 Android 앱을 빌드할 때 내부적으로 Gradle(Java 기반 빌드 시스템)이 사용된다.

• 따라서 Android 환경에서 React Native를 실행하려면 JDK가 필수적이다.

JDK (Java Development Kit)	Java 개발 및 실행을 위한 전체 패키지
JRE (Java Runtime Environment)	Java 애플리케이션 실행 환경
JVM (Java Virtual Machine)	Java 바이트코드를 실행하는 가상 머신

Homebrew를 이용한 JDK 설치

brew install openjdk

설치가 완료되면 JDK가 정상적으로 설치되었는지 확인한다.

java -version

출력 예시는 다음과 같다.

openjdk 21.0.1 2023-10-17 OpenJDK Runtime Environment (build 21.0.1+12-39) OpenJDK 64-Bit Server VM (build 21.0.1+12-39, mixed mode, sharing)

안드로이드 스튜디오 설치하기

아래 링크를 통해 다운로드한다.

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

최근 Android 스튜디오는 개발자들의 생산성을 높이기 위해 Gemini라는 AI 기반 코딩 어시스턴트를 도입하였다. Gemini는 자연어를 이해하고, Android 개발 관련 질문에 답변하여 개발 과정을 더욱 효율적으로 만들어준다.

Gemini의 주요 기능:

• AI 지원 코딩: 자연어로 질문을 입력하면 관련 코드를 생성하거나, 기존 코드에 대한 설명을 제공한다.

• 리팩터링 및 문서화: 코드의 리팩터링 제안과 함께 문서화를 돕는다.

• Compose용 AI 지원: Jetpack Compose를 사용하는 개발자들에게 특화된 지원을 제공한다.

Gemini 사용 방법:

• 최신 Android 스튜디오 설치: Gemini는 현재 Canary 버전에서 제공되므로, 최신 버전을 설치해야 한다.

• Gemini 실행: 프로젝트를 열고 상단 메뉴에서 View > Tool Windows > Gemini를 선택한다.

• 로그인: 처음 사용 시 Google 계정으로 로그인하라는 메시지가 표시된다. 로그인 후 Gemini의 대화형 인터페이스를 사용할 수 있다.

설치 중에 설치 타입을 정하는 화면이 나타나면 Custom을 선택한다.

이때 SDK Components Setup은 중요한데, 아래 3가지 항목을 반드시 선택한 후 설치한다.

Android SDK
Android SDK Platform
Android Virtual Device

Android SDK 설치 여부 확인

1. Android Studio 실행

2. 상단 메뉴에서 Preferences (또는 Settings) 선택

3. Appearance & Behavior > System Settings > Android SDK 로 이동

- Android SDK Location이 표시되는지 확인

- SDK가 정상적으로 설치되었다면 해당 경로가 표시됨

- 만약 SDK Tools 탭에서 Android SDK가 비활성화되어 있다면 설치 필요

Android SDK Platform 설치 여부 확인

1. Android Studio 실행

2. Preferences > Appearance & Behavior > System Settings > Android SDK 로 이동

3. SDK Platforms 탭에서 설치된 Android 버전 목록 확인

4. 특정 버전(예: Android 13, API Level 33)이 체크되어 있으면 해당 버전의 SDK Platform이 설치된 상태

Android Virtual Device(AVD) 설치 여부 확인

1. Android Studio 실행

2. Tools > Device Manager 선택

3. AVD 목록에 생성된 가상 장치가 표시되면 정상적으로 설치됨

4. 혹은 터미널 명령어 이용:

~/Library/Android/sdk/emulator/emulator -list-avds

Android Studio 설치 후 설정

설치가 완료된 후 More Action > SDK Manager 메뉴를 클릭하면 아래와 같은 창이 열린다.

이때 Android SDK 메뉴의 SDK Platforms 탭에서 오른쪽 아래의 Show Package Details를 체크하고 다음 항목을 체크한다.

Android SDK Platfrom 30
Intel X86 Atom_64 System Image
Google APIs Intel X86 Atom System Image

필자는 Android 15.0을 사용했다.

이후 SDK Tools 탭에서도 Show Package Details을 체크하고, Android SDK Build-Tools에서 30.0.2를 체크한다.

필자는 Android SDK Build-Tools > 35.0.2 로 설정되어있다.

Android Studio 환경 변수 설정

React Native 또는 Android 개발을 위해 Android SDK 경로를 환경 변수로 설정해야 한다. Mac에서는 ~/.zshrc 또는 ~/.zprofile 파일을 수정하여 이를 설정할 수 있다.

~/.zshrc

터미널에서만 실행되는 설정 파일
새로운 터미널 창을 열 때마다 실행됨
PATH 설정, alias(단축 명령어), 프롬프트 설정 등을 정의하는 데 사용됨
source ~/.zshrc를 실행하면 즉시 변경 사항 적용 가능

예제 (~/.zshrc 설정 예시)

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator alias ll='ls -al'

~/.zprofile

로그인할 때 한 번만 실행되는 설정 파일
터미널뿐만 아니라 **GUI 애플리케이션(Android Studio, VS Code 등)**에서도 환경 변수를 인식하도록 설정할 때 사용됨
~/.zshrc와 같은 환경 변수를 설정할 수도 있지만, 로그인 후 실행되므로 터미널을 열 때마다 적용되지 않음

예제 (~/.zprofile 설정 예시)

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

~/.zshrc vs ~/.zprofile 차이점

파일명	실행 시점	적용 대상	용도	추천 사용 사례
~/.zshrc	새로운 터미널 창을 열 때	터미널에서 실행되는 모든 세션	터미널에서만 필요한 환경 변수 및 설정 적용	PATH 설정, alias, prompt 설정 등
~/.zprofile	로그인 시 1회 실행	터미널 + GUI 애플리케이션	로그인 시 적용해야 하는 환경 변수 설정	GUI 애플리케이션에서 환경 변수 인식 필요할 때

Vim 이용 수정하기

Vim은 Unix 및 Linux 기반 시스템에서 사용되는 강력한 텍스트 편집기이다. 기본적으로 CLI(명령줄 인터페이스)에서 동작하며, 코드 작성, 설정 파일 수정, 시스템 관리 등 다양한 용도로 사용된다.

Vim은 Vi(Visual Editor)의 확장판으로, 더 강력한 기능과 확장성을 제공한다. 터미널 기반으로 동작하기 때문에 GUI 환경이 없어도 빠르고 효율적으로 텍스트를 편집할 수 있다.

파일을 열려면 터미널에서 다음 명령어를 입력한다 : vim ~/.zshrc

주요 모드 전환 방법은 다음과 같다.

모드	설명	전환 방법
일반 모드 (Normal mode)	기본 모드 (커서 이동 및 명령 실행 가능)	Esc
입력 모드 (Insert mode)	텍스트 입력 가능	i (커서 앞 삽입), a (커서 뒤 삽입)
명령 모드 (Command mode)	파일 저장, 종료, 검색 등 명령 실행	: (콜론 입력 후 명령어 입력)

주요 명령어는 다음과 같다.

명령어	설명
i	입력 모드 진입 (커서 앞 삽입)
a	입력 모드 진입 (커서 뒤 삽입)
Esc	입력 모드 종료 (일반 모드로 전환)
:w	파일 저장
:q	Vim 종료
:wq	저장 후 종료
:q!	저장 없이 강제 종료
dd	한 줄 삭제
yy	한 줄 복사
p	붙여넣기

Vim을 사용하는 이유

빠른 파일 편집: 키보드만으로 빠르게 코드 및 설정 파일 수정 가능
경량 텍스트 편집기: GUI 없이도 실행 가능하며, 리소스 사용량이 적음
강력한 커스터마이징: 플러그인 추가 및 개인화 가능

Vim을 익숙하게 사용하면 터미널에서 효율적으로 작업할 수 있으며, 시스템 관리 및 개발 환경 설정에도 유용하다.

GUI 에디터(TextEdit)로 수정하기

터미널에서 open 명령어를 실행하면 GUI 기반의 TextEdit 앱에서 편집할 수 있다.

open ~/.zshrc

파일이 열리면 아래 내용을 추가한 후 저장한다.

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

저장한 후 터미널에서 아래 명령어를 실행하여 적용한다 : source ~/.zshrc

~/.zshrc 파일에서 Android SDK 환경 변수 삽입 위치

환경 변수는 다른 설정보다 먼저 적용되어야 하므로 보통 파일 상단 또는 사용자 설정이 시작되는 부분에 삽입하는 것이 좋다.

현재 ~/.zshrc 파일의 구조를 보면 source $ZSH/oh-my-zsh.sh 이후에 사용자 설정이 시작된다.
따라서 아래 두 가지 위치 중 하나에 환경 변수를 추가하면 된다.

Oh My Zsh 로딩 이후 삽입 (추천)

source $ZSH/oh-my-zsh.sh 바로 아래에 추가
Zsh 및 플러그인 로딩이 완료된 후 Android SDK 경로가 정상적으로 설정됨

source $ZSH/oh-my-zsh.sh
# Android SDK 환경 변수 설정
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

파일 맨 위에 삽입 (최우선 적용)

export ZSH="$HOME/.oh-my-zsh" 위쪽에 추가
터미널 시작과 동시에 적용됨 하지만 Oh My Zsh 플러그인 설정보다 먼저 실행될 수 있음

# Android SDK 환경 변수 설정
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools export ZSH="$HOME/.oh-my-zsh"

설정 저장 및 적용 방법

vim ~/.zshrc 또는 open ~/.zshrc를 실행하여 파일을 편집한다.

위에서 설명한 위치에 환경 변수를 추가하고 파일 저장 후 터미널에서 다음 명령어 실행한다 : source ~/.zshrc

정상적으로 적용되었는지 확인 : echo $ANDROID_SDK_ROOT

출력값이 /Users/apple/Library/Android/sdk와 같이 나오면 정상적으로 설정된 것이다.

Android 에뮬레이터 실행 방법

안드로이드 에뮬레이터를 실행하려면 Android Studio의 Device Manager에서 가상 기기를 생성해야 한다. 먼저 Android Studio를 실행한 후, More Actions > Virtual Device Manager를 선택하면 Device Manager 창이 나타난다.

가상 기기를 생성하려면 Device Manager 창에서 "Create Device" 버튼을 클릭한다. 그러면 Select Hardware 창이 나타나며, 여기에서 원하는 기기를 선택할 수 있다. 예를 들어, Pixel 4를 선택한 후 Next 버튼을 클릭하여 다음 단계로 이동한다.

다음으로, System Image 창에서 최신 API 버전의 시스템 이미지를 다운로드해야 한다. Recommended 탭에 있는 최신 버전을 선택하고 Download 버튼을 클릭한다. 다운로드가 완료되면 Next 버튼이 활성화되므로 클릭하여 진행한다.

이제 Android Virtual Device(AVD) 창에서 가상 기기의 이름을 설정한다. 기본값을 그대로 사용하거나 원하는 이름을 입력한 후 Finish 버튼을 클릭하면 가상 기기가 생성된다. 다시 Device Manager 창으로 돌아가면, 방금 추가한 가상 기기가 목록에 표시된다. 오른쪽 끝에 있는 플레이 아이콘(▶️)을 클릭하면 에뮬레이터가 실행된다.

에뮬레이터가 정상적으로 실행되면 Android 홈 화면이 나타나며, React Native 앱을 실행할 수 있는 상태가 된다. 이제 에뮬레이터를 이용하여 앱을 테스트할 수 있다.