AsyncStorage는 개발자가 키-값(key-value) 저장소에 데이터를 비동기적으로 유지할 수 있도록 도와줍니다. React Native의 기본 제공 API에서, 현재는 커뮤니티 패키지로 전환되었습니다. (가장 많이 사용되는 라이브러리: react-native-async-storage/async-storage: An asynchronous, persistent, key-value storage system for React Native.)
앱에서 전역적으로 적용되는 간단한 비암호화, 비동기, 영구 키-값(key-value) 저장 시스템입니다. 사용자 환경 설정, 앱 상태 또는 캐시된 데이터와 같은 데이터를 저장하고 검색하는 데 사용할 수 있습니다.

내부적으로 비동기 스토리지는 각 플랫폼(iOS, Android, 웹)에 고유한 스토리지 엔진을 사용하여 데이터를 지속합니다. iOS에서는 데이터 유형에 따라 NSUserDefaults 또는 키체인을 사용하여 데이터를 저장합니다. Android에서는 앱 세션 전반에 걸쳐 데이터를 유지하는 키-값(key-value) 저장 시스템인 SharedPreferences를 사용합니다. 웹에서 비동기 스토리지는 localStorage API를 사용합니다.

AsyncStorage는 다음 예시와 같이 데이터 저장소와 상호 작용하는 메서드 세트를 제공합니다:

setItem(key: string, value: string, callback?: ?(error: ?Error) => void)
// 주어진 키 아래에 문자열 값을 저장합니다.

getItem(key: string, callback?: ?(error: ?Error, result: ?string) => void)
// 주어진 키에 대한 문자열 값을 검색합니다.

removeItem(key: string, callback?: ?(error: ?Error) => void)
// 주어진 키에 대한 값을 제거합니다.

mergeItem(key: string, value: string, callback?: ?(error: ?Error) => void)
// 기존 키 값 쌍을 새 값과 병합합니다.

clear(callback?: ?(error: ?Error) => void)
// AsyncStorage에서 모든 데이터를 제거합니다.

이러한 메서드는 비동기이므로 메인 스레드를 차단하지 않고 백그라운드에서 실행됩니다. 메서드가 호출되면 작업이 완료되거나 문제가 있는 경우 오류와 함께 거부하는 Promise를 반환합니다.

비동기 저장소는 암호화되지 않은 간단한 비동기식 영구 키-값(key-value) 저장소 시스템으로, React Native 앱에서 데이터를 저장하고 검색하는 데 사용할 수 있습니다. 각 플랫폼에서 서로 다른 스토리지 엔진을 사용하여 데이터를 지속하고 데이터 저장소와 비동기적으로 상호 작용하는 일련의 메서드를 제공합니다.

Known storage limits | Async Storage
async-storage/Where-data-stored.md
위 링크의 내용처럼 react-native-async-storage/async-storage 라이브러리의 AsyncStorage의 저장 용량 제한은 사용 중인 플랫폼에 따라 다를 수 있습니다. 문서에 따르면 iOS의 경우 1024 문자열 길이 미만인 경우 manifest.json 파일에 저장되며, 이를 초과하는 경우 개별 파일로 저장됩니다. Android의 경우 SQLite를 이용하여 저장되지만 기본 제한이 6MB로 설정되어 있습니다. 웹 플랫폼의 경우 내부적으로 localStorage API를 사용하기 때문에 5MB 입니다.
너무 큰 크기를 저장하고 불러오는 경우 성능 저하가 발생 할 수 있기 때문에 저장 데이터의 크기를 비교적 작게 유지하는 것이 좋습니다.

 

GitHub - react-native-async-storage/async-storage: An asynchronous, persistent, key-value storage system for React Native.

An asynchronous, persistent, key-value storage system for React Native. - GitHub - react-native-async-storage/async-storage: An asynchronous, persistent, key-value storage system for React Native.

github.com

 

Known storage limits | Async Storage

Android

react-native-async-storage.github.io

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0 

Posted by cipleee

주목할 만한 변경 사항

엑스포 이미지 출시

엑스포 이미지는 React Native의 컴포넌트의 후속 컴포넌트이자 react-native-fast-image의 대안이 될 것입니다. 이미지를 로드하고 렌더링하는 크로스 플랫폼 React 컴포넌트로써 속도를 위해 설계되었으며 최신 이미지 형식을 지원합니다. 또한 플레이스홀더, 트랜지션, 블러해시 지원 등이 포함되어 있습니다.

엑스포 라우터 출시

엑스포는 최근 React Navigation을 기반으로 구축된 파일 시스템 기반 라우팅 API인 엑스포 라우터 v1 rc를 출시했습니다. 이 새로운 기능은 SDK 48의 탭 프로젝트 템플릿에 대한 기본 라우팅 시스템으로 설정됩니다. 모바일 앱 라우팅에 대한 이 혁신적인 접근 방식은 많은 앱 유형의 개발 및 유지 관리 경험을 크게 향상시킬 것으로 기대되지만, 아직 모든 사용 사례에 적합하지 않을 수 있습니다. 따라서 개발자는 테스트해보고 피드백을 제공하여 시스템을 더욱 개선하는 데 도움을 줄 수 있습니다. 범용 파일 시스템 기반 라우팅 솔루션을 구축하기 위해 함께 노력합시다!

EAS 빌드 M1 워커

EAS 빌드 M1 워커는 SDK 48 프로젝트의 iOS 빌드에 기본으로 제공됩니다.

헤르메스 기본 자바스크립트 엔진 활용

SDK 47에서 발표한 바와 같이, SDK 48에서는 JavaScriptCore(JSC) 대신 Hermes가 기본 JavaScript 엔진으로 사용됩니다.

Configure JS engines - Expo Documentation

app.json 파일에서 jsEngine 값을 변경하여 기존 jsc방식을 프로젝트에 반영 할 수 있습니다.

{
  "expo": {
    "jsEngine": "jsc"
  }
}

베타 릴리스를 사용해 보는 방법

  1. SDK 48 베타로 새 프로젝트를 초기화하기

npm: npx create-expo-app --template blank@beta
yarn: yarn create expo-app --template blank@beta

create-expo-app는 npx를 사용하는 경우 npm을, yarn을 사용하는 경우 yarn을 사용하여 설치 과정을 진행해야 합니다.

 

  1. 기존 프로젝트에서 업그레이드 설치하기

엑스포 패키지의 베타 버전을 설치합니다

npm install expo@next 또는 yarn add expo@next

모든 종속성을 SDK 48과 일치하도록 업그레이드합니다:

npx expo install --fix

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0

Posted by cipleee

KeyboardAvoidingView · React Native

 

KeyboardAvoidingView · React Native

This component will automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed.

reactnative.dev

키보드 어보이딩 뷰(KeyboardAvoidingView)는 키보드가 나타날 때 키보드를 피하기 위해 뷰의 높이를 조정하는 React Native의 내장 컴포넌트입니다. 이 컴포넌트는 사용자가 키보드를 통해 정보를 입력해야 하는데 키보드로 인해 일부 콘텐츠가 가려질 수 있을 때 특히 유용합니다.

키보드 어보이딩 뷰(KeyboardAvoidingView)는 iOS와 Android 기기에서 서로 다른 키보드 동작에 적응해야 하므로 플랫폼마다 다르게 작동합니다. iOS에서는 키보드가 나타나면 기본적으로 컴포넌트의 높이가 조정되어 콘텐츠가 키보드에 가려지지 않도록 위로 이동합니다. Android에서는 컴포넌트가 키보드가 표시될 때 스크롤이 가능하도록 스크롤뷰 컴포넌트 안에 콘텐츠를 래핑합니다.

iOS에서 키보드 어보이딩 뷰(KeyboardAvoidingView)에는 패딩(padding)과 포지션(position)이라는 두 가지 동작이 있습니다. 패딩(padding) 동작은 키보드가 나타날 때 뷰 하단에 패딩(padding)을 추가하고, 포지션(position) 동작은 키보드와 함께 뷰를 위로 이동합니다. 패딩(padding) 동작은 뷰가 키보드에 가려지는 것을 방지하고 컴포넌트를 다시 렌더링하지 않도록 하므로 대부분의 사용 사례에 권장됩니다. 그러나 특정 레이아웃이나 애니메이션에는 포지션(position) 동작이 더 선호될 수 있습니다.

키보드 어보이딩 뷰(KeyboardAvoidingView)의 동작을 지정하기 위해 개발자는 키보드 수직 오프셋 프로퍼티를 사용할 수 있습니다. 이 프로퍼티를 사용하면 개발자가 키보드와 뷰 사이의 거리를 지정하여 뷰가 키보드를 피할 수 있도록 올바르게 배치할 수 있습니다. 각 플랫폼에 맞는 동작을 사용하면 개발자는 iOS 및 Android 기기 모두에서 앱이 사용자 친화적이고 접근하기 쉬운지 확인할 수 있습니다.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0

Posted by cipleee

Expo Router(엑스포 라우터) v1은 네이티브 내비게이션의 미래를 현재로 가져온 혁신적인 솔루션입니다. 이제 개발자는 파일 기반 라우팅의 강력한 기능을 활용하여 전례 없이 쉽고 빠르게 진정한 네이티브 iOS 및 Android 앱을 빌드할 수 있습니다.

모바일 앱을 구축하는 기존의 접근 방식에는 많은 상용구 코드와 복잡한 설정이 필요합니다. 개발자는 각 화면과 탐색 경로를 수동으로 구성해야 하므로 지루한 작업과 디버깅에 많은 시간이 소요됩니다. 하지만 Expo Router(엑스포 라우터) v1을 사용하면 이 과정이 완전히 간소화됩니다. 프로젝트에 파일을 생성하기만 하면 각 파일이 자동으로 앱의 페이지가 됩니다. 간단합니다!

Expo Router(엑스포 라우터) v1은 iOS와 안드로이드 모두에서 진정한 네이티브 내비게이션을 가능하게 하는 높은 평가를 받고 있는 React Navigation 제품군을 기반으로 구축되었습니다. 딥링킹 시스템도 실시간으로 자동 생성되므로 사용자는 앱의 모든 경로에 대한 링크를 쉽게 공유할 수 있습니다. 따라서 개발 프로세스가 훨씬 간소화되어 개발자는 페이지 구성 방법에 대해 걱정할 필요 없이 페이지 콘텐츠 구축에만 집중할 수 있습니다.

Expo Router(엑스포 라우터) v1은 모바일 앱 개발을 그 어느 때보다 빠르고, 쉽고, 직관적으로 만들어주는 획기적인 혁신입니다. 파일 기반 라우팅, 네이티브 탐색, 자동 딥링킹 기능을 갖춘 Expo Router(엑스포 라우터) v1은 차세대 모바일 앱을 구축하려는 개발자에게 큰 인기를 끌 것입니다.

파일 기반 라우팅 규칙을 통해 개발자는 논리적이고 직관적인 방식으로 앱을 구조화할 수 있습니다. Expo Router(엑스포 라우터)는 이 규칙을 사용하여 네이티브 딥 링크와 웹 경로를 자동으로 생성하여 앱을 최적화합니다.

이 규칙은 여러 하위 항목에 걸쳐 탭 바 및 헤더와 같은 공유 UI 요소를 생성하기 위해 서로 내부에 경로를 중첩하는 개념을 기반으로 합니다. 이 형식은 React 개발자에게 친숙하게 느껴질 것입니다.

파일 기반 라우팅을 사용하면 앱의 모든 페이지에 URL을 사용할 수 있습니다. 모든 경로는 루트 앱/디렉토리 내에 생성해야 합니다. 이 디렉토리 내에서 경로 이름을 사용하여 파일을 정의하여 경로를 생성할 수 있습니다.

 


본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0 

Posted by cipleee

디자인 시스템이란?

디자인 시스템은 일관된 사용자 인터페이스를 구축하는 데 사용되는 지침, 원칙 및 재사용 가능한 구성 요소의 모음입니다. 디자이너, 개발자 및 기타 이해관계자가 여러 플랫폼과 디바이스에서 디자인과 사용자 경험의 일관성을 보장할 수 있는 단일 소스 역할을 합니다. 디자인 시스템은 개발 프로세스를 간소화하고 협업을 개선하며 브랜드 아이덴티티를 유지하는 데 도움이 됩니다.
React Native에서 디자인 시스템은 애플리케이션 전체에서 사용할 수 있는 미리 디자인되고 재사용 가능한 컴포넌트 세트를 제공함으로써 개발 프로세스를 간소화할 수 있습니다. 이를 통해 개별 컴포넌트를 처음부터 설계하고 개발하는 데 드는 많은 시간과 노력을 절약할 수 있습니다.

  • 일관성: 디자인 시스템은 누가 작업하든 애플리케이션 전체에 걸쳐 시각적 디자인과 사용자 경험의 일관성을 보장할 수 있습니다.
  • 효율성: 디자인 시스템은 미리 디자인되고 재사용 가능한 컴포넌트를 제공함으로써 개발자의 시간과 노력을 절약하여 개발 프로세스를 보다 효율적으로 수행할 수 있도록 도와줍니다.
  • 확장성: 애플리케이션이 성장하고 새로운 기능이 추가됨에 따라 디자인 시스템은 사용자 경험을 일관성 있고 확장 가능한 상태로 유지할 수 있습니다.
  • 브랜딩: 디자인 시스템은 브랜드의 시각적 아이덴티티와 일관성을 유지하여 애플리케이션이 전체 브랜드 이미지와 일치하도록 보장할 수 있습니다.
  • 접근성: 개발자는 디자인 시스템에 접근성 가이드라인과 모범 사례를 포함함으로써 능력에 관계없이 모든 사용자가 애플리케이션에 액세스할 수 있도록 보장할 수 있습니다.

머티리얼 디자인이란?

머티리얼 디자인은 여러 플랫폼과 기기에서 일관된 룩앤필을 제공하는 Google에서 개발한 디자인 언어입니다. 고전적인 그래픽 디자인의 원칙과 최신 기술 및 혁신을 통합하여 현대적이고 직관적이며 시각적으로 매력적인 인터페이스를 만듭니다. 머티리얼 디자인은 단순함, 미니멀리즘, 빛, 그림자, 깊이를 사용하여 위계와 중요도를 만드는 데 중점을 둡니다.

React Native Paper는 머티리얼 디자인 시스템을 기반으로 미리 빌드된 컴포넌트와 스타일링을 제공하는 React Native용 UI 라이브러리입니다. 여기에는 버튼, 카드, 다이얼로그, 툴바 등의 컴포넌트가 포함되어 있으며 색상, 타이포그래피 및 간격에 대한 사용자 정의 옵션이 있습니다. 접근성, 반응성, 사용성에 대한 머티리얼 디자인 가이드라인을 따르는 React Native Paper는 개발자가 고품질의 일관된 UI를 쉽게 제작할 수 있도록 지원합니다.

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0

Posted by cipleee