study: 리네다기 | 1장 - React Native란, OS 별 구동 설정

Lumpen·2023년 4월 9일

Study

목록 보기

33/92

리액트 네이티브는 디바이스에 국한되지 않고 앱을 개발할 수 있지만
주로 모바일 개발에 사용

자바스크립트로 네이티브 앱을 만들 수 있다
하지만 자바스크립트 코드가 네이티브 코드로 변환되지는 않는다
JavaScriptCore 라는 자바스크립트 엔진 사용
리액트 네이티브의 특별혼 컴포넌트들은 각 OS 에 맞게 변환되어 화면을 구성한다
문법은 JSX 문법이지만 리액트 네이티브만의 컴포넌트를 사용한다
리액트 네이티브 앱 안에 내장된 스레드에서 JSX 코드를 인식해 컴포넌트 연산 후 화면을 그려준다

리액트 네이티브는 네이티브 플랫폼의 API 를 자바스크립트로 호출할 수 있도록 한다
리애트 네이티브 앱에서는 주로 서드 파티 라이브러리를 설치해 기능 구현을 한다
생태계가 꽤나 성숙하기 때문에 많은 서드 파티 라이브브러리가 오픈 소스로 공개되어 있다
때로는 네이티브 코드를 전혀 작성하지 않고 앱을 만들기도 가능

하지만 특정 기능을 구현하기 위해서는 자바나 Object-C 언어를 사용해야할 수도 있음

리액트 네이티브의 가장 큰 장점은 크로스 플랫픔이라는 점
하지만 iOS 개발을 해야한다면 맥OS 를 꼭 사용해야만 한다
다른 운영체제에서는 iOS 앱을 컴파일 할 수 없기 때문이다

macincloud 같은 서비스로 개발도 가능하지만 비추천하는 방법
시뮬레이터로도 충분히 확인할 수는 있지만
개발 시 실제 기기를 기종별로 가지고 있는 편이 좋다
실제 기기에서는 제대로 작동하지 않는 상황이 발생할 수 있고 개발하는 컴퓨터 자원을 적게 사용하기 떄문

실행 환경 구성

1. Node.js 와 npm (or yarn) 설치

2. Java Development Kit (JDK) 설치

3. Watchman 설치 - 페이스북이 만든 파일 모니터링 도구 (macOS 에서만 지원), 필수는 아니지만 좋다

4. 안드로이드 스튜디오 설치, 안드로이드 환경 변수 설정

환경 변수 설정
$HOME/.zshrc 파일을 수정하여 환경 변수 설정
vim $HOME/.zshrc

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

5. Xcode, CocoaPods 설치

리액트 네이티브 프로젝트 만들기

새로운 프로젝트를 만들 때 다음과 같은 명령어 사용

npx react-native init [디렉토리 명]

package.json 파일의 scripts 에 다음과 같이 설정되어 있다

"scripts": {
  "android": "react-native run-android",
  "ios": "react-native run-ios",
  "start": "react-native start",
  "test": "jest",
  "lint": "eslint ."
},

npm run start - Metro 서버 구동 (RN 을 위한 자바스크립트 번들러)
npm run ios - iOS 환경에서 앱 구동
npm run android - android 환경에서 앱 구동

안드로이드 구동 설정

안드로이드 스튜디오에서 Open an existing Android Studio project 클릭
위에서 만든 프로젝트 안에 android 디렉토리 선택
우측 상단에 폰 모양의 아이콘 클릭 (AVD Manager - 안드로이드 시뮬레이터 관리 도구)
Create Virtual Device 클릭하여 디바이스 생성
하드웨어 선택 (주로 픽셀 2 이용중)
Recommended 탭에서 맨 위의 시스템 이미지 Download (최신 안드로이드 버전)
finish 를 누르면 가상 디바이스가 생성되고 AVD Manager 화면에 목록이 나타남 (재생 아이콘 클릭 시 실행됨)

Android SDK Platform 29를 수동으로 설치하지 않았다면 맨 처음 이 명령어를 실행할 때 다음과 같은 오류 발생


error Failed to install the app. Please accept all necessary Android SDK licenses using Android SDK Manager: "$ANDROID_HOME/tools/bin/sdkmanager --licenses". Run CLI with --verbose flag for more details.

위 오류 메시지에서 굵게 표시된 명령어를 터미널에 입력 후 약관 동의를 하면 실행이 가능하다

$ANDROID_HOME/tools/bin/sdkmanager --licenses