일골드

Front End/React-Native (7)

React-Native

Front End/React-Native 일골드 2022. 2. 13. 22:06

장점: 1. IOS, AOS 동시 개발 2. 자바스크립트만 알고 있으면 쉽게 시작 3. 구성요소(element)의 재사용 가능 4. Fast Refresh (수정>새로고침or수정>컴파일>새로고침 필요없이 즉각 반영) 5. 코드가 네이티브 엘리먼트로 전환되어 성능 향상. (코도바나 아이오닉은 웹뷰를 이용한 렌더링이라 느림) 단점: 1. 네이티브의 기능 지원이 순수 네이티브보다 적고 시간이 걸림. 2. 유지보수 (문제의 종류에 따라 원인을 찾고 문제를 해결하는 데 많은 시간) 3. 잦은 업데이트(ex.리엑트네이티브0.53->0.54 필요 리엑트16.2->16.3으로 변경됨) 동작방식: 1. 자바스크립트(javascript thread) 브릿지 네이티브(main thread(UI), shadow thread(..

Firebase - Functions

Front End/React-Native 일골드 2020. 5. 17. 22:17

Firebase 의 Fuctions 를 시작하려하면 아래와 같은 화면이 뜬다. 1. npm을 통해 firebase-tools를 설치해준다. npm install -g firebase-tools 일단 설치하면 어느 디렉토리에서도 사용가능하다. 이제 프로젝트 디렉토리로 이동해보자. 2. 이동했다면 로그인을 하자. 로그인을 먼저하고 이동해도 상관없다 ^^ firebase login 인터넷창이 켜질꺼고 로그인을 하면 완료 메시지가 나타날 것이다. 3. 프로젝트 디렉토리로 이동한 후, init명령어를 이용해 functions폴더를 만들어보자. (자바스크립 선택) firebase init functions 해당 명령어를 통해 종속된 항목들까지 설치가 되고 프로젝트에 .firebaserc 파일 firebase.jso..

React-Native-Image-Picker

Front End/React-Native 일골드 2020. 5. 4. 00:25

react-native-image-picker please show below web site. https://www.reactnativeschool.com/uploading-images-in-react-native/installing-react-native-image-picker 해당 웹사이트에 유튜브 동영상이 굉장히 도움이되어 링크를 걸겠습니다. yarn을 통한 설치만 나와있는데 npm으로도 설치 가능합니다. 저는 react-native가 0.60이상의 버전이기 때문에 설치시 별도의 작업이 필요하지 않았습니다. npm i react-native-image-picker 설치 후 재빌드가 필요합니다. 혹시 어플에 권한(permission)이 필요하다는 문구가 뜬다면 android 폴더내의 AndroidM..

react-native-firebase

Front End/React-Native 일골드 2020. 4. 5. 17:15

1. 아래 명령으로 설치 npm install --save @react-native-firebase/app npm add @react-native-firebase/auth 2. firebase 사이트로 들어가서 프로젝트를 생성하고 파일명 : google-services.json을 다운받아서 android\app\ 아래에 복사한다. 프로젝트 생성할때 패키지명을 적는데 일치해야한다. 패키지명 : android\app\src\main\AndroidManifest.xml 3. 실행을 해서 안된다면 android studio에서 build>clean Project 를 통해 정리해주고 다시 실행한다.

React-Native Redux 설치

Front End/React-Native 일골드 2020. 3. 24. 20:36

> npm install redux > npm install react-redux 설치는 굉장히 간단하다. 하지만 Redux를 처음 접한다면 상당히 어렵다. Redux를 사용하는 가장 중요한 이유는 컴포넌트들의 상태를 공유하기 위함이다. 아래는 중요한 코드만 적어두겠다. //********************************************** ******************** App.js ******************** ************************************************// ... 생략 ... import { createStore } from 'redux'; import { Provider } from 'react-redux'; const ini..

React-Navigation

Front End/React-Native 일골드 2020. 3. 15. 20:25

React Navigation 설치 공식사이트: https://reactnavigation.org/docs/getting-started 1. npm install @react-navigation/native (네비게이션) 2. npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view (관련 라이브러리) 3. android/app/build.gradle 파일에 아래 소스 추가 (for android) implementation 'androidx.appcompat:appcompat:1.1.0-r..

[React-Native] Getting Started (Windows)

Front End/React-Native 일골드 2020. 3. 3. 22:04

윈도우에서 React-Native 설치 React-Native 는 facebook에서 만든 모바일 어플리케이션 개발 라이브러리 입니다. React가 웹에서 쓰이는거와는 다르게 Native는 어플리케이션 개발에 사용됩니다. 크게 Expo(https://expo.io)와 Native 두 가지 버전이 있는데, Expo는 쉽고 빠른 개발에 좋지만 제공하는 기능 외에는 사용할 수 없어 잘 쓰이지 않습니다. native 기능들을 사용하는데는 Native 버전이 좋다! 최근에는 PWA를 지원하는 리엑트 네이티브 웹을 발표! (https://bit.ly/react-native-for-web & https://bit.ly/expo-doc-web) 1. Install Node 8.3 or newer (https://nod..

Copyright © 일골드 All Rights Reserved
Designed by JB FACTORY

티스토리툴바