클라우딩 어플리케이션 엔지니어링 TIL Day 54 - React Native 개요

오늘부터 드디어 React Native에 대해서 배우는 날이다

웹개발 경험만 있었기 때문에 이번 앱 강의를 통해 앱개발 역량을 기르는 것이 목표이다

RN 공부도 화이팅!

---

# React Native History

# 모바일 앱 개발의 초기 역사

1. PDA의 등장

Personal Digital Assistant

팜톱(Palm Top)

1990년대 후반, 모바일 기기가 처음으로 등장했다

태초의 모바일 앱들은 주로 간단한 기능만 제공했다

여러 기능을 제공하는 것보다는 기기간 호환성과 효율적인 성능을 제공하는 것에 초점이 맞춰져 있던 시기였다

 

2. 피처폰

각종 피처폰의 유행(2G폰)의 시작!

우리나라는 정부 주도로 만들어진 폐쇄된 플랫폼 WIPI가 존재했다

WIPI란?
하나의 콘텐츠를 여러 통신사에 서비스 하기 위한 플랫폼

2G가 시작되면서부터 디지털로의 전환이 이루어지고 다양한 기능이 제공되기 시작했다

WIPI를 개발하기 위해서는 언어별로 차이가 있었다

C언어 : Clet

Java : Jlet 

를 사용해서 WIPI 플랫폼 동작 컨텐츠 개발이 진행되었던 시기이다

 

3. 스마트폰 시대의 도래

앱 개발의 패러다임이 변화한 중요한 시기이다

Android, IOS 에 따라 개발 언어가 달랐고 개발 환경도 달랐다

 

4. 크로스 플랫폼 개발 도구 등장

크로스 플랫폼 개발 도구가 등장하면서부터 기존 Android, IOS 별로 상이한 설정을 해주던 것에서 하나의 프로그램으로 각기 다른 플랫폼 개발이 가능해졌다

▶웹앱, 하이브리드 앱

웹뷰에 웹 페이지를 띄워 구동시키는 방식이다

운영체제 위에 또 하나의 단계가 있다

웹앱, 하이브리드 앱 예시

▶ 크로스 플랫폼

네이티브 코드로 변환하기 때문에 더욱 편리하고 기능이 향상되었다

크로스 플랫폼 예시

 

# React Native의 탄생

2015년 3월 페이스북 F8 컨퍼런스에서 공식 발표되면서 React Native가 등장했다

초기 버전은 IOS 지원에 초점이 맞춰져있었지만 이후 Android 지원이 추가되었다

출시 이후 많은 대기업에서 사용하며 더욱 상용화되었다

▶ 주요 개발 변경점

- FastRefresh

앱 재실행 없이 즉시 화면 업데이트

생산성 향상

- Auto Link

ios, Android 라이브러리를 각 네이티브 설정 없이 적용 가능

---

# React Native ABC

# React Native 기본 원리

Javascript로 동작하며 앱 내에서 Javascript Engine 이 작동한다

 

# 대표적인 특징 3가지

1. One Source Multi Use

하나의 코드로 여러 플랫폼을 지원

2. Hot Reloading

앱을 다시 빌드하거나 재시작할 필요 없이 변경 사항 즉시 반영

3. React

선언적 UI

앱의 상태에 따라 UI가 어떻게 보여야 하는지 선언

상태 변화가 있을 때 자동으로 UI가 업데이트

 

# 브릿지 시스템

RN의 핵심 기능이다

자바스크립트 런타임과 네이티브 간의 상호작용을 담당한다

자바스크립트 런타임에서 네이티브 모듈에 접근하여 동작을 요청하거나, 네이티브에서 자바스크립트 콜백 함수를 호출하여 결과를 전달하는 역할을 수행한다

▶ 핵심 기능 3가지

- 비동기 통신

- JSON 메시지 교환

- 이벤트 기반 통신

---

# React Native 개발환경 구성

React Native를 시작하기에 앞서 각 운영체제에 맞는 개발환경을 구성해보자

https://reactnative.dev/

React Native · Learn once, write anywhere

공식 사이트에는 여러 운영체제와 IOS, Android 여부에 따른 개발 환경 구성 문서를 제공한다

React Native 프로젝트를 생성할 때는 2가지 방법이 있다

# Expo Go

아무런 네이티브 지식 없이도 앱을 개발할 수 있게 해주는 도구이다

빠른 개발 가능하지만 깊이 있는 개발, 복잡하고 다양한 기능 개발은 어렵다

때문에 간단한 교육 학습용으로 사용된다

 

# Expo Go 실습

공식 문서에 나와있는대로 명령어를 입력해서 프로젝트를 만들어보자

npx create-expo-app AwesomeProject

expo go 프로젝트 생성 중

C:\Users\aldls>npx create-expo-app AwesomeProject
Need to install the following packages:
create-expo-app@2.1.1
Ok to proceed? (y) y
√ Downloaded and extracted project files.
> npm install
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated @babel/plugin-proposal-optional-catch-binding@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
npm WARN deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm WARN deprecated @babel/plugin-proposal-logical-assignment-operators@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead.
npm WARN deprecated @babel/plugin-proposal-async-generator-functions@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.

added 1163 packages, and audited 1164 packages in 1m

65 packages are looking for funding
  run `npm fund` for details

5 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- cd AwesomeProject
- npm run android
- npm run ios # you need to use macOS to build the iOS project - use the Expo app if you need to do iOS development without a Mac
- npm run web

성공적으로 프로젝트가 생성 되었으면 AwesomeProject 파일로 이동해서 실행시킨다

npm run android

으로 실행해보자

 

# 에러 해결 기록

1. No Android connected 에러 발생

Android와 연결해 줄 장치가 없고 이뮬레이터도 없어서 오류가 발생했다

https://docs.expo.dev/workflow/android-studio-emulator/

Android Studio Emulator

위의 사이트를 보고 애뮬레이터를 설정해서 에러를 해결했다

애뮬레이터 설정 후 다시 한번 npm run android 입력해보자!

 

2. adb.exe : device offline 에러

애뮬레이터를 설정했지만 또 다른 오류가 발생했다

[ADB] Couldn't reverse port 8081: adb.exe: error: device offline
› Opening exp://192.168.219.104:8081 on Pixel_8_API_33
Error: adb.exe: device offline

검색해보니 adb 서버 종료를 시켜야 한다고 한다

1. nvm 설치

2. Node 버전 다운그레이드 - 16버전

3. adb 환경 변수 설정

의 방법을 통해서 해결했다

구글링해보면 자세하게 설명해놓은 글이 많아 그것을 보고 참고해서 고쳤다..!

 

3. ExpoMetroConfig.loadAsync is not a function 에러

adb 관련해서 구글링을 통해서 설정을 변경해주었는데 이번에는 또 다른 에러가 발생했다..!

역시 구글링을 통해서 검색해보니 expo 버전에 따른 에러였다

npm install @expo/config@8.1.1
npm install @expo/metro-config@0.10.0

 

로 버전을 변경해주니 드디어...!

실행됐다!

 

4. Vitual Device 버전 에러

위의 과정을 다 거치고 open Android 로 실행했는데 또 adb 관련 에러가 발생했다

Couldn't start project on Android: Error running adb: adb.exe: device offline

adb 서버를 종료도 해보고 나와있는 방법을 적용해보았지만 Android 로 실행하는데 문제가 발생했다

Couldn't adb reverse: adb.exe: error: device offline
› Opening exp://192.168.219.104:19000 on Pixel_8_API_33
Couldn't start project on Android: Error running adb: adb.exe: device offline

위의 오류가 계속 반복해서 발생했고 혹시 몰라 안드로이드 스튜디오 Virtual Device에서

기존에 설치한 Pixel의 가장 낮은 버전을 설치해서 연결해보니까 잘 된다!

 

아마도 Pixel 버전에 따른 문제였던 것 같다

처음으로 실행된 모습

이렇게 Expo Go로 실행에 성공했다

 

# React Native CLI 

다양하고 복잡한 기능 개발이 가능한 React Native의 개발 환경이다

실제 복잡한 서비스에 대한 React Native 앱을 구현할 때는 CLI를 사용해야 한다

MacBook을 사용한다면 큰 문제없이 사용할 수 있지만

Windows를 사용하는 경우 React Native CLI를 설치하면 엄청나게 많은 에러를 마주하게 된다..!

 

나는 현재 Macbook이 없다 ㅠㅠ

Windows를 사용하고 있기 때문에 아쉽지만 앞으로 개발은 Expo를 사용해서 개발해볼 것이다...!

이렇게 험난했던 Windows에서 RN 초기 설정 완료...!

---

# 새로 알게 된 점

React Native라는 새로운 기술스택을 사용해보기도 전에 여러 에러들을 마주했다

처음보는 에러들도 있고 버전에 따른 문제가 많이 발생하기 때문에 한참을 헤맸다

알고보니 Virtual Device를 너무 높은 버전을 설치해놓고 실행시키려고 해서 발생했던 오류인데

정확한 이유는 아직 파악하지 못했다

버전이 조금만 차이가 나도 쉽게 에러가 일어나는 것일까?

아무튼

Windows라 CLI를 사용하지 못하는 것이 아쉽지만 일단 기초를 배우는 과정에서는

Expo를 사용해서 앞으로의 실습을 잘 진행해봐야겠다