[Self Study] React Native를 이용한, 간단한 TODO APP 만들기 (1)

패스트캠퍼스 강의를 수강하기 전에, 

다양한 방식으로 공부 & 스터디를 진행하고 있다.

 

모르는 부분의 경우에는 스터디를 이용해서 

서로 오류를 잡아주는 코드리뷰로 유용하게 활용중!

 

<React Native로 심플 APP 만들기 프로젝트>

 

우선 정보를 찾고, 필요한 개발환경을 구성하느라 어제를 다 보냈다.

어떤 APP을 만들지, 

어떤 도구를 활용할지 등등

 

기준은 이렇게 정했다.

---

1. 비전공자이자 간단한 언어를 다루는 수준에서,  부담스럽지 않고 재밌게 만들 수 있어야 한다.

 

2. 언어를  처음부터 배워야 하는 경우 제외한다. 

 

3.  누군가에게 보여줄 수 있을만큼으로는 만들어야 한다.

 

 

 간단한 app을 만드는 데에는 4가지의 방식이 있는데,

1.     네이티브 앱을 만드는 방법
2.     하이브리드 앱을 만드는 방법
3.     웹뷰를 이용한 앱을 만드는 방법
4.     기타 툴을 이용한 방법
 
첫번째 네이티브 앱을 만드는 것은 Android 혹은 iOS 환경에 맞추어 직접 각각의 앱을 개발하는 것인데요. Android 앱을 만들기 위해서는 Java 혹은 Kotlin 언어를 이용해서 Android Stuido로 앱을 만들 수 있고, 아이폰용 iOS 앱을 만들기 위해서는 Obective-C 혹은 Swift 언어를 이용해서 X-Code에서 만들 수 있습니다.
네이티브 앱은 각각의 OS에 맞게 개발하는 것이라 가장 성능이 뛰어나지만 내가 만든 앱을 모든 스토어에 출시하려면 각각의 언어에 대한 학습을 해야하는 부담이 있고 컴퓨터 관련 전공이 아닌이상 초보자가 직접 네이티브 앱을 만드려면 조금 난이도가 있을 수 있습니다.
 
두번째 방법으로는 하이브리드 앱을 만드는 것인데요. 하나의 언어로 두가지 버전의 앱을 동시에 만드는 것을 의미합니다. 대표적으로 React Native 프레임워크를 이용하면 JavaScript 언어로 2가지 버전의 앱을 동시에 개발할 수 있구요, 또는 최근 인기가 있는 Google에서 만든 Flutter 프레임워크를 이용하면 Dart라는 언어로 마찬가지로 2가지 버전의 앱을 동시에 개발할 수 있습니다. 웹을 공부하셔서 JavaScript에 익숙하신 분이라면 네이티브 앱보다 조금은 더 쉽게 접근하실 수 있을 거라 생각합니다.
 
세번째 방법으로 웹뷰를 이용한 앱을 만들 수 있습니다. 웹 뷰란 그냥 앱 화면에 웹 url 주소를 띄우는 방식으로 앱은 그냥 껍데기일 뿐이고 웹사이트가 돌아가는 형태입니다. 지금까지 제 영상을 보셔서 웹을 어느정도 이해하고 계시다면 가장 쉽게 만들 수 있는 앱의 형태입니다.
 
이런 방법 외에도 정말 간단히 앱을 만드려면 App Inventors 등 MIT에서 만든 교육용 안드로이드앱 제작 도구를 이용하거나 Swing2App, 스마트메이커 등 Drag & Drop 방식의 툴을 이용하여 앱을 만들 수도 있겠습니다.
게임을 만드신다면 Unity 와 같은 도구로 C#, JavaScript를 이용해 게임 앱을 만들어 Android, iOS 혹은 그 외에도 다양한 플랫폼으로 출시 할 수도 있습니다.

출처 : https://developerdk.tistory.com/38

 

그 중에서 유의미하면서 비전공자로 접근하기 용이해보이는 2,3번을 놓고 고민을 했다.

그러나 3번 방식의 경우 기준에 덜 부합하다고 느껴져서,

2번 하이브리드 앱 방식을 고르게 되었다. 

 

 

그리고 자료를 찾아보던 중 
웹 프로젝트를 통해서 java scripts는 다뤄본 경험이 있으니

react native를 다루는 게 더 낫겠다고 판단,

이를 활용해서 앱을 만들기로 하였다.

 

---

필요한 단계

리액트 네이티브로 앱을 개발한다는 것은 

Node.js로 자바스크립트 개발 환경을 구축하고, 
NPM으로 필요한 자바스크립트 앱 개발 도구들을 가져와 사용하는 것이다. 

1) 따라서 먼저 node.js를 12 LTS 이상으로 설치한다. (노드가 없는 경우)

https://nodejs.org/en/

 

 

2) 그리고 EXPO CLI를 선택하여 다운로드 한다. 

(나는 VScode에서 설치했는데, 터미널에서 해도 된다.)

Node.js

npm install -g expo-cli  

처음에는 npm으로 설치하고, 추후에 yarn을 설치하여 사용하였다.

 

3) Expo가 설치되었는지 확인하기

expo-cli --version

 

4) 지금은 expo가 자동으로 web을 보여주지 않으므로, 

npx expo install react-native-web@~0.18.7 react-dom@18.0.0 @expo/webpack-config@^0.17.0

이 패키지를 설치해서 w를 누르면 웹을 볼 수 있게 된다.

 

---

프로젝트를 하나 만들어보자.

npx create-expo-app 프로젝트이름

 

그리고 templates는 보통 첫번째 blank로 많이 설치하는 것 같아 동일하게 진행했다.

그 다음, 

cd 프로젝트

로 이동해서 

npm start

를 해주면 개발환경 세팅이 완료되었다.

그러나 그전에 선행되어야 할것은 expo 홈페이지 가입하기!

https://expo.dev/

Expo

 

---

TIP🤖 프로젝트를 핸드폰으로 확인하기 위해서는? 

expo go 라는 어플을 핸드폰을 설치 후, 

ios의 경우 camera로 화면에 뜬 QR 코드를 갖다대면 그 어플로 바로 연동이 된다. 

 

설치가 시작되고나서, app.js 부분의 text를 수정해보면
어플에서는 개발하는 웹페이지를 띄워준다는 것을 확인할 수 있다. 

---

React Native CLI 와 Expo CLI 비교

리액트 네이티브(React-Native) 장점

1. React-Native CLI
- 모듈을 사용하는 패키지를 링크하고 네이티브 언어로 작성된 네이티브 모듈을 연결할 수 있다.
- Expo 패키지를 이용할 수 있지만 설정이 필요하다.
- 자유도가 높아 뭐든지 할 수 있다.
- 빌드의 제어가 가능

2. Expo CLI
- 클라우드에서 앱을 손쉽게 만들기 가능
- 클라우드에서 앱을 손쉽게 Build 가능
- 클라우드에서 Android Studio(Android용) 또는 XCode(iOS용)를 설치하지 않고도 개발 중에 프로젝트를 실행 수 있어 QR 코드를 통해 아이폰이나 안드로이드 폰 어느 것이나 개발이 가능 
- 클라우드에서 모바일 스토어에 앱을 제출 가능
- 개발이 편할 수 있도록 많은 API 지원을 해준다.


리액트 네이티브(React-Native) 단점

1. React-Native CLI
- 프로젝트 설정하는 데 상당한 시간이 걸린다.
- 모든 라이브러리들을 한땀 한땀 설치 
- Android Studio(Android용) 및 XCode(iOS용)를 설치해야 한다. 
(필수는 아닌 것 같으나,
실제로 앱 구동방식을 보려면 expo와 달리 qr 로 접근이 불가하다면 반드시 필요한 부분인 듯 했다.)

2. Expo CLI
- 제공되는 API만 사용가능하여 Objective-C, Swift, Java, Kotlin으로 작성된 네이티브 모듈은 추가할 수 없다.
- linking이 요구되는 네이티브 언어로 만들어진 패키지를 사용할 수 없다.
- 빌드 시간 10분 ~ 30 분 정도 
- 링크가 필요한 모국어로 된 패키지는 사용할 수 없다.
- 앱은 사용하지 않더라도 모든 Expo SDK 솔루션으로 빌드되어 큰 크기를 갖습니다. APP의 크기는 15 ~ 25MB
(진짜 앱 무거워서, git 아닌 일반적인 공유는 어려웠다. 오류도 걸리고 cloud로 다운받아도 오래 걸린다.)
- 테스트 중에는 Expo 클라이언트에서 모든 것이 잘 작동하지만 독립 실행형 앱에서는 특정 문제가 발생할 수 있다.

출처 : https://ssilook.tistory.com/entry/REACT-NATIVE-React-Native%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-vs-Expo-%EB%B9%84%EA%B5%90