#1. React Native 소개

Inkyung·2022년 10월 31일
0

모바일프로그래밍

목록 보기
1/12
post-thumbnail

ReactNative

페이스북이 만든 오픈소스 모바일 애플리케이션 프레임워크
Javascript로 iOS와 Android를 동시에 개발할 수 있다.

  • 보통은 OS에 맞는 언어로 개발- iOS는 SwiftObjective-C, Android는 Kotlin, Java

  • 하나의 서비스를 위해 iOS와 Android를 따로 개발하면 유지보수 비용과 시간이 많이 필요하다. 이를 해결하기 위해 하이브리드 웹앱, RN, 하이브리드 앱 등 등장

ios/android 소스가 다르면 양쪽이 다 잘 돌아가는지 점검해야함 - 한쪽만 되는 경우 왕왕
양쪽을 다 할 수 있는 언어를 만들자! → React Native!

React Native · Learn once, write anywhere

오픈소스 - 신뢰성, 상용화 가능? / 오픈소스의 라이선스가 무엇인지 확인해야함

ReactNative의 장점

  • 컴포넌트 기반으로 재사용성이 뛰어나다
  • 리액트 기반이기 때문에 러닝커브가 적다.
  • 크로스플랫폼으로 개발하기 때문에 생산성이 좋다.
  • 모바일 앱 디버깅이 아닌 자바스크립트 디버깅을 사용한다.
  • 따라서, Hot Reloading을 사용할 수 있기 때문에 소스코드 수정 후 다시 빌드해서 확인하는 네이티브 앱 방식과 다르게 실시간으로 확인이 가능하다.

ReactNative의 단점

  • 아무래도 네이티브 앱보다는 성능이 떨어질 수밖에 없다.
  • 네이티브 브릿지를 통해 자바스크립트 스레드와 연결해서 동작하더라도, 네이티브 방식보다는 성능이 떨어진다.
  • 자바스크립트 스레드와 네이티브 스레드는 5ms주기로 네이티브 브릿지를 통해 통신한다.
  • 5ms이상 시간이 걸리는 처리를 할 떄는 성능 저하를 경험할 수 있다.

Expo

리액트 네이티브를 베이스로 ios, aos, 웹 등을 개발하고 쉽게 빌드, 배포할 수 있게 도와주는 프레임워크!

Expo Documentation

Expo의 장점

  • xcode나 안드로이드 스튜디오를 따로 배우지 않고 expo만으로도 앱 개발이 가능. expo가 이 두가지보다 상위버전 이기에, 내부적으로 두가지의 작업을 해낼 수 있다.
  • 양쪽 소프트웨어(안드로이드/ios)를 오픈할 필요도, 각기 다른 플랫폼들에서 테스트를 거칠 필요도 없다.
  • 윈도우에서 ios 앱을 빌드하는 것이 가능
    -> 이는 서버로 데이터를 보내고, 서버에서 파일을 가지고 응답할 수 있다는 것@!
    앱 하나로 양쪽 소프트웨어를 사용하는 디바이스에서 실행이 가능
  • ' over the air updates ' : 앱을 자바스크립트로 작업하고, 내용을 변경할 때 따로 앱스토어에 승인을 요청할 필요가 없음
    -> 보통 앱 개발 시에는 new버젼을 만들어 앱스토어에 퍼블리쉬 한 후, 인증을 받는 과정을 거쳐야 하지만 expo를 사용할 경우엔 생략됨.
  • 또한 자바스크립트로 작업되어 내부적으로 자동 업데이트가 이뤄지기 때문에 직접 수정하고 에러를 고치는 시간을 단축할 수 있음!

Expo 시작하기

  • nodejs.org → 들어가서 설치
    • node -v 버전 확인
  • create a snack → expo go 에서 qr로 확인

- expo 설치
$ npm install expo-cli --global
뭔가 설치가 안돼서 애먹었는데 앞에 $ sudo 붙여서 실행하니까 해결됐음

- 프로젝트 생성
expo init 프로젝트이름 blank 선택하고 enter

- expo 실행
해당 폴더 안에 들어가서 expo start --tunnel

  • tunnel : 외부 네트워크에서도 캐스트 가능 (와이파이, 5G 등)
  • expo start --web : 웹에서도 변동사항 확인 가능

vscode에서 react ES7 설치
폴더 선택

터미널 명령어

ls - 폴더 촤라락 보여줌

cd 폴더명 → 해당 폴더로 이동 / cd.. 상위 폴더로 이동 / cd 폴더명 앞글자 + Tab

pwd 현재 폴더 위치

mkdir

shift + 오른쪽 마우스 열기 → 터미널 열기

0개의 댓글