전체 글17 React Native Old Architecture 정리 React Native 가 등장한지 9년이 지났습니다. 처음에는 반신반의 했던 이 크로스플랫폼이 시간이 지남에 따라 아키텍쳐도 개선이 되고 사용자 생태계도 성숙해지는 모습이 눈에 보이는 것 같습니다. 그래서 react native에 대해서 천천히 돌아보고 있는 와중에 아직도 많은 곳에서 사용중일 구 아키텍쳐에 대해 정리해보았습니다. 간단하게, 리액트 네이티브 앱은 크게 두 부분으로 구성되어 있습니다.Javascript codeNative codeJavascript code는 세 개의 스레드에 걸쳐 동작합니다.Javascript 스레드: Javascript 엔진(JavaScriptCore)으로 JS 번들을 실행합니다.네이티브/UI 스레드: 네이티브 코드를 실행하고 렌더링이나 제스처 이벤트와 같은 모든 사용.. 2024. 6. 15. [React-Native] react-native-mmkv 사용해 앱 로컬 저장소 성능 개선하기 모바일 앱을 개발하다 보면 로컬 저장소에 데이터를 저장할 경우가 생깁니다. react-native에서는 자연스럽게 AsyncStorage라는 라이브러리를 사용해 왔습니다. 하지만 최근에 WeChat에서 개발한 react-native-mmkv라는 라이브러리를 알게되어 소개합니다. 1. 속도 mmkv 는 모든것이 C++로 작성이 되어서 기존에 있던 다른 로컬저장소보다 속도가 빠릅니다. 2. 보안 지금까지 많이 사용하던 AsyncStorage는 암호화를 지원하지 않지만 mmkv는 암호화를 지원합니다. 3. 동기식 호출 비동기처리가 완료될때까지 기다리는게 아니라 동기식으로 데이터를 받아올 수 있습니다. 설치 yarn add react-native-mmkv cd ios && pod install 인스턴스 생성 i.. 2024. 4. 15. [React-Native]react navigation 커스텀해서 drawer menu 사용하기 프로젝트 버전 react-native 0.63.2 react-navigation 4.3.9 프로젝트 버전을 설정하고 react-navigation을 이미 프로젝트에 적용했다는 가정하에 진행하도록 하겠습니다. 패키지 설치 npm install react-navigation-drawer or yarn add react-navigation-drawer DrawerBar.js 생성 자신이 원하는 drawer 메뉴를 만들어주시면 됩니다. 저는 메뉴 상단에 프로필사진과 이름 띄어놓고 밑에는 메뉴들이 나올수있게 코드를 작성하였습니다 . import React from 'react'; import { View, TouchableOpacity, Dimensions, Text, Alert, Image } from 'rea.. 2020. 8. 14. [React-Native] 리액트 네이티브 Axios로 웹서버 http 통신(요청)하기 왜 Axios 써야 하는가? react native에서 웹서버에 데이터를 요청하거나 요청한 데이터를 받아올 때 사용하는 API는 대표적으로 Fetch, Axios 가 있습니다. 먼저 두 가지 방식을 비교하며 왜 Axios를 써야 하는지 살펴보겠습니다. 1. promise API 지원 여기서 promise란 자바스크립트 비동기 처리에 사용되는 객체입니다. 또 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. 즉 axios는 비동기 통신을 지원합니다. 2. json 데이터로 자동변환 Axios는 요청을 보낼 때 자동으로 데이터를 문자열 화합니다. 그러나 Fetch()를 사용할 때는 수동으로 수행해야 합니다. 3. 광범.. 2019. 10. 19. 이전 1 2 3 4 5 다음
