앱에서는 브라우저 저장소를 어떻게 사용하나요? React Native로 개발하는 방법! Async-Storage, Debugging Tool

Async-Storage

모바일 앱에는 당연히 브라우저 저장소가 없겠죠? 모바일 개발환경에는 대신에 AsyncStorage가 LocalStorage 대신 사용됩니다.

기존에는 react-native에서 Async Storage를 가져올 수 있었는데요. 현재는 deprecated 되었습니다.

사용을 해도 되지만, 앞으로 업데이트 될 예정이 없다는 뜻입니다.

때문에 react-native docs를 읽어보시면 community package를 사용하라고 되어있는데요.

이 community package 안에 **@react-native-async-storage/async-storage**가 있습니다.

이 패키지는 npm에서도 확인할 수 있습니다.

Installation

# npm
npm install @reat-native-async-storage/async-storage

# yarn
yarn add @react-native-async-storage/async-storage

# Expo
expo install @react-native-async-storage/async-storage

Usage

데이터 저장

const storeData = async (value) => {
  try {
    await AsyncStorage.setItem('@storage_Key', value)
  } catch (e) {
    // saving error
  }
}

데이터 읽기

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key')
    if(value !== null) {
      // value previously stored
    }
  } catch(e) {
    // error reading value
  }
}

이것을 이용해서 우리가 localstorage를 이용해서 구현했던 기능들을 사용해줄 수 있겠죠? AsyncStorage에는 보여드린 메서드 이 외에도 다양한 메서드들이 있습니다. AsyncStorage Docs를 확인해보세요!

---

Debugging Tool

debugging은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미합니다.

웹에서는 개발자 도구에서 콘솔이나 네트워크를 통해서 에러를 찾고 디버깅을 하는데 모바일은 개발자 도구가 없기 때문에 디버깅이 쉽지 않습니다.

그래서 여러분이 사용할 수 있는 React Native Debugging Tool을 몇 가지 소개해드리고자 합니다.

Chrome Debugger

리액트 네이티브에서도 웹에서 하는 것처럼 개발 가능합니다.

# Remote Debugging 실행
1. 디바이스에서 Ctrl+M
2. Remote JS Debugging
3. 크롬에서 아래 주소로 디버그 창이 실행됩니다.
	<http://10.2.2:8081/debugger-ui>
4. 디버깅 터미널 보기: Ctrl+Shift+J

일반적으로 내 컴퓨터는 localhost 였는데 앱에서는 localhost가 아니라 10.0.2.2가 됩니다. 내 컴퓨터의 브라우저를 찾는게 아니라 내 컴퓨터에서 디바이스의 주소를 찾아와야하기 때문이겠죠?

Flipper

모바일 개발 환경에서는 console tab과 Network tab을 한 번에 볼 수 없고 심지어 Network 통신은 우리가 확인할 수 없기도 합니다. 이것을 편하게 만들어주기 위해 Facebook에서 만든 것이 Flipper 입니다.

Flipper 설치 링크

Android

Flipper Desktop App을 실행하고 yarn android를 하면 리액트 네이티브 프로젝트가 Flipper에 표시됩니다.

iOS

프로젝트 디렉토리/ios 에서 pod install을 실행하고 yarn ios를 하면 Flipper에 프로젝트가 표시됩니다.