1. AsyncStroage

• Key값으로 String을 저장
• 유저에 대한 정보(accessToken, refreshToken)
  • 기능을 보여줄지 말지, 마지막 접속 시간 등 임시정보 저장 등
• Cookie와 비슷한 사용 용도
  • Android : SQLite 에 저장
  • iOS : 네이티브 코드로 저장로직이 작성되어 잇음

1.1 AsyncStorage.setItem

• key값과 value값을 넘겨 값을 저장 하는것
• 저장하는 value는 string으로만 저장

1.2 AsyncStorage.getItem

• 값을 가져 오는것, string 또는 null을 리턴

1.3 AsyncStorage.removeItem

• key값에 해당하는 value를 삭제하는 것

1.4 AsyncStorage.clear

• AsyncStorage의 모든 값을 삭제

1.5 AsyncStorage.mergeItem

• Object안에서 같은 Key값이 있는 경우 한가지로 합쳐주는것
• 자주 사용하지는 않음

1.6 그외 (etc)

• multiGet, multiSet, multiMerge, multiRemove
• 각각 key값을 여러개 넘겨 한번에 받아오는것

1.7 사용시 주의점

(1) Key값 중복으로 인한 value 덮어써짐 혹은 삭제된 사례

• Unique한 문자열을 만들기 위해서 여러 노력들을 해봄
• UUID 문자열 만들어 사용 (e.g. 43833a60-cad 등)
• 화면 또는 동작을 String으로 조합함 @/화면명/액션명

(2) AsyncStorage의 모든 함수는 Promise로 제공됨

1
const result = AsyncStorage.getItem('KEY') // result is Promise
2
const result = await AsyncStorage.getItem('KEY') // result is value

(3)

• Android에서 최대 저장 사이즈는 6MB
• Android에서 한번에 가져 올 수 있는 사이즈는 2MB

2. fetch API

• RemoteURL에 있는 리소스를 가져올때 사용
• React-Native에서 새로 정의 한것이 아닌, MDN에 이미 만들어진것

2.1 HTTP

• Hyper Text Transfer Protocol의 약자
• Server에 데이터 저장, 업데이트 등을 요청하고 결과를 되받는것

2.2 Request Method

• 어떤 동작을 위한 요청인지를 미리 나타내는것
• 종류 : GET, POST, PUT, PATCH, DELETE
  • GET : 특정 리소스를 가져와야 할때 사용
    • e.g. 특정 회원의 데이터 조회, 특정 성별을 가진 회원들을 조회 등
  • POST : 어떠한 데이터의 저장해야 할때 사용
    • e.g. 회원가입, 로그인 등
  • PUT : 특정 리소스를 업데이트 할때 사용
    • e.g. 회원의 주소 데이터, 결제 데이터 등
  • PATCH : 특정 리소스 중 특정 정보만 변경할때 사용
    • e.g. 회원의 나이, 전화번호 등
  • DELETE : 리소스를 아에 삭제
    • e.g. 회원 탈퇴 등

2.3 Request 데이터 전달

데이터를 서버로 전달하는 방법 (e.g. Path parameter, Query parameter, Request Body 등)

1. Path parameter : URL Path내부에 값을 함께 넘기는것
   • e.g. /person/{:userId}/

1
/person?birthday={:date}&sort={:regeditDate}

2. Query parameter : URL 뒷부분에 ?를 붙이고 그 뒤에 key값과 value값을 넘겨주는 것
3. Request Body
   • URL에 데이터가 보이지 않고, Body에 작성해서 넘기게 됨
   • 데이터가 긴 경우 Request Body 사용이 적합 (URL 길이제한)

2.3.1 Request 데이터 전달 (항목별 사용처)

1. Path Parameter : 특정 유저 ID를 통해 정보를 가져올 때
2. Query Parameter : 이름, 성별로 검색해서 가져올때
3. Request Body : 회원가입, 게시글 등록 할때

2.4 Response status code

• 결과 처리에 대해서 숫자 형태로 서버로부터 전달받음
• 자주 사용하는 코드
  • 200 : 정상적으로 처리 됨
  • 500 : 서버에서 처리 중 에러가 발생함
  • 400 : Client에서 값을 잘못 전달함
  • 403 : 유저정보는 식별되나, 해당 URL로의 접근이 거부됨
  • 404 : URL이 존재 하지 않음

2.5 Fetch API 사용방법

1
fetch(REQUEST_URL, { method: 'POST', body: {} }).then(result => result.json())

3. redux-persist 적용

• 저장소에 마지막 Redux 상태를 저장하였다 이어서 사용 할 수 있도록 하는 것
• React-Native에서는 AsyncStorage에 저장

3.1 PersistGate

• Component형태로 작성되어있음.
• Storage로부터 데이터를 로드해 Redux를 업데이트
• 로딩하는 동안에 Loading 컴포넌트 추가 가능

3.2 BlackList, WhiteList

• BlackList : 유지 하지 않아도 되는 Redux Key값들
• WhiteList : 유지를 해야하는 key값