Day 39

김정동·2021년 12월 23일

front end react native 모바일 배포 모바일과 웹의 차이 웹과 모바입웹, 웹앱, 크로스플랫폼앱, 네이티브앱

코드캠프와 달려보자

목록 보기

34/35

모바일과 웹의 차이

모바일과 웹의 가장 큰 차이는?
1. 주소의 유무
웹 : 주소가 있음 그래서 웹은 내가 원하는 페이지를 그냥 주소를 쳐서 들어갈 수 있다
앱 : 앱은 주소가 보이지 않음 못감(조금 더 어려움) 하지만 주소처럼 자동으로 넘어가서 원하는 페이지를 보이게는 할 수 있다.

주소만 치면 접속
웹 : 배포가 되면 24시간 실행되기 때문에 주소만 치면 브라우저에서 접속할 수 있음
앱 : 접속하려면 다운로드가 필요하다. 그럼 앱이 더 좋은거아닌가? 하면 유명한 앱들이야 유리하다
(맨날 쓰는 앱만 쓰기 때문) 하지만 스타트업들의 경우 다운로드받게 하기가 쉽지 않음
그래서 앱이 마케팅비용도 더 비싸다
속도
앱 : 페이지 간 이동이 부드럽고 빠름
웹 : 한페이지가 아니고 페이지마다 넘어다님, 비슷하게 하기위해서 SPA(Single Page Application)이 나옴, 이렇게하면 앱과 같은 경험을 할 수 있게 됨
이전에는 jQuery를 사용했기 때문에 페이지 이동 시 마다 새로고침을 해야했음

--> 웹이 앱을 닮아가고 있음 앱의 기능들을 가져오는 중 그래서 앱애서만 됐던 기능들이 웹으로까지 넘어오는중임. 예로들면 녹음기능이나 영상촬영기능, 위치인식기능(앱과 연동해서 핸드폰의 기본 기능을 사용하는 것들) 하다못해 앱에서 보는 푸쉬알림같은것도 거의 다 됨 HTML5로 넘어오면서부터 됐다고 보면 된다.

PWA, Progressive Web App이 푸쉬알림을 가져오게함, 심지어는 웹이 앱처럼 바탕화면에서 앱처럼 깔아줄 수 있음, 심지어 이건 react위에 올릴 수 있는 기능임
--> 근데 안드로이드는 다 적용되는데 IOS는 좀 폐쇄적이라 이런 건너가는 것을에 대해서 좀 덜 관대한편

웹개발자는 PWA를 배우는 것이 좋을듯?

웹과 모바입웹, 웹앱, 크로스플랫폼앱, 네이티브앱

웹과 모바일웹
둘다 주소가 있고 어디서 여냐만 다름, 반응형 처리만 한것, 다운로드는 안됨

웹앱
이 내용을 그냥 앱에 가져오면 웹뷰(iframe)으로 앱이긴 앱이지만 안에서는 빈 박스를 통해서 브라우저를 송출 하고 있는것
얘는 다운로드도 가능
여기까지가 React로 할 수 있는 부분임

크로스플랫폼앱
하나만 만들어놓으면 안드/애플 둘다 됨 대표적으로 리액트 네이티브, 플러터가 있음
근데 걍 하나 만들어놓으면 되는게 아니라 안드나 ios에서만 되는 기능들을 껐다 키면서 조정해야함
그래도 하나의 소스코드로 배포할 수 있는 장점이 있음

크로스플랫폼앱에는 두가지 구별이 또 있음
네이티브(Android, IOS)가 있음
여기는 각각에 맞는 개발도구를 써야함

==> 먼저 React로 웹, 모바일웹, 웹앱으로 먼저 하다가 한계점을 느낌(앱에서만 있는 기능이 필요할 때, ex:지문인식, 패턴 등등) 크로스 플랫폼앱으로 감 , react에서 조금 더 공부하면 native로 넘어갈 수 있음 ->

==> 근데 여기서 react-native에서 성능상에 한계나 그에 대한 한계점이 느껴지면 네이티브앱으로 건너가게됨

근데 네이티브까지 가려면 회사의 규모가 아주아주 커져야함. 그러니까 웹을 기반으로 공부하면서 native까지 알아두고, 웹과 앱의 차이점이나 기능들을 알고 있으면 좀 더 스펙상에서 경쟁력이 있음 + 앞서 봤던 PWA, Service Worker까지 하면 굿굿이겠쬬

근데 여기서 이제 또 React 이전이 또 있음 영상, 스트리밍이면 webRTC, 3D나 그래픽을 하고싶다 그러면 webGL 을 하면 됨

React-Native의 동작구조

바로 실행시킨다고 JS가 돌아가진 않는다
Main, Native Bridge 가 있음
JS가 Native Bridge로 가고 Main 으로 보내는 것

근데 이런 과정이 미리 이루어지는게 아니고 버튼을 누르거나 필요할때마다 실행됨

React-native 설치

https://reactnative.dev/
일단 시간이 많이걸리니까 다운로드를 받아두자

구글검색으로 react native 하고나서 get started를 하면 이렇게 된다.
여기서 환경설정 으로 가보면 된다.

위에서부터 자신의 OS에 맞게 설치하면된다.

React native의 돌아가는 과정

시작
vscode에서 yarn dev를 하면 브라우저에서 돌아가게된다.
근데 앱은 브라우저가 아니고 안드로이드는 안드로이드 에뮬레이터에서 돌아가게된다.
코드는 여전이 vscode지만 yarn dev나 build대신 react-natvie start를 하게됨

그럼 dev를 했던것처럼 서버를 킨다.

접속
브라우저에서는 localhost:3000
안드로이드 에뮬레이터에서는
react-native run-android 이렇게한다

-> 브라우저는 우리가 이미 쓰고있어서 문제가 없었지만
안드로이드 에뮬레이터는 없었음
그니까 안드로이드 에뮬레이터가 있는 안드로이드 스튜디오를 깔아야함

(이런느낌)

그후 스튜디오에서
react-native init myproject하면됨

https://developer.android.com/studio?hl=ko
안드로이드 스튜디오에서 자신에 맞는 설치파일을 깔자(나는 인텔칩 ios)

node와 watchman을 터미널에서 깔아보자

자바 개발 키트도 필요하단다.

(알아서 막 깔리는중)

react-native의 독스에서는 android SDk, android SDK Platform, Andrioid Virtual Device가 필요하다니 혹시 모르니까

안드로이드 스튜디오를 설치할 때 커스텀설치로 해서 확인하자(근데 다 골라져있음)

r그리고 Android 10(q)가 필요한데 메인화면에서 찾을수 없으니
안드로이드 스튜디오의 세팅 -> Preferences - Appearance & Behavior - System Settings 에서 찾아보자

설치는 꽤 오래걸린다

하나 빼먹었는데 아까 선택하는 화면에서 SDK tools부분까지 들어가서 Android SDK Build-Tools 부분이 29.0.2인지 확인하고 확인을 누르자

이후 설정을 해야함 터미널을 열고
ls-al 을 해보면

$HOME/.bash_profile 이나 $HOME/.bashrc .bash_profile로 들어단다
나는 .bash_profile이 있어서 열음
vi .bash_profile로 그걸 수정해보자
i를 눌러 수정모드로 들어가서

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

이부분을 넣어주고 esc를 눌러서 수정모드를 끝내고 shift + :wq (저장하고 종료) 를 시킨다.

위치는 중요하지 않고 이 내용이 있으면된다.
이후 수정한 파일을 cat + 파일이름, 나같은 경우는 cat .bash_profile

수정된걸 볼 수 있다.

그리고나서 소스를 등록해야한다.
source + 파일이름
source .bash_profile

이러면 소스가 등록이 완료된 것.

확인은 echo $ANDROID_HOME 을 했을 때

이렇게나오면 된다.

안드로이드 스튜디오에서 more actions -> AVD manager -> create virtual device, 크기는 상관없지만 이미지는 아까 정했던 29, Q로 해야되는데(아까 받았는데 없다고나오니까 다시 받는다)

(없으면 다시 받을 수 있음)

vs코드에서도 하나 새로 만들어야된다.

npx react-native init freeboard_mobile

이렇게 뜬다.

android, ios는 그 os에 맞게 조절해주는 부분이다.
지금은웹앱이기 때문에 app.js를 조절해보자

view가 박스, text가 내용물로 채운다고 생각하면 된다. 그럼 원래 react에서 했던 div를 활용한 글쓰기 처럼 쓰 수있게 된다. 나머지 스타일이나 react의 함수 기능들은 똑같고 이렇게 태그들이 조금 다르다.
onClick 도 onPress(터치에 반응) 으로 바뀜 , 이버튼도 이쁘지 않기 때문에 버튼 대신 투명한 버튼 <TouchableOpacity 를 사용한다.

FlatList를 쓰면 모바일에서 기본적으로 무한스크롤이 기본임

React-native 실행

yuarn add react-native-webview를 써보자

그리고 app.js를 기본세팅만 해보자

import React from 'react';
import type {Node} from 'react';
import {WebView} from 'react-native-webview';

const App: () => Node = () => {
 return <WebView source={{uri: 'https://naver.com'}}> </WebView>;
};

export default App;