직딩 개발기-환경설정

직딩을 처음 실행하면 여러가지를 물어보는데요.(지금은 아니지만).

앱을 재실행 했을 때 다시 물어보지 않으려면 앱에 저장을 해야 합니다. 이전 글에서 Realm으로 했지만 단순 속성 저장에는 적합하지 않아 AsyncStorage를 쓰는게 좋다고 생각해서 GPT에 물었고 GPT도 동의했어요. 😏

그래서 react-native에도 내장된 AsyncStorage를 import 하려고 했더니 Deprecated 되었대요. 😭

대신 @react-native-community/async-storage를 설치하고,

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

이 AsyncStorage는 모든걸 string로 저장하기 때문에 JSON을 쉽게 가져오기 위해 확장을 만들었어요.

String.prototype.parseJSON = function <T>() {
  return JSON.parse(this.valueOf()) as T
}

StorageService

그리고 Storage를 사용하는 곳에서 직접 접근하지 않고 쉽게 사용할 수 있도록 Service로 wrapping 했죠.

export const StorageService = {
  get: async <T>(key: string): Promise<T | undefined> => {
    const storageValue = await AsyncStorage.getItem(key)

    return storageValue?.parseJSON<T>()
  },
  set: async <T>(key: string, value: T): Promise<void> => {
    const storageValue = JSON.stringify(value)

    return AsyncStorage.setItem(key, storageValue)
  },
}

마지막으로 각 설정 항목에 대한 Key를 선언하고

SettingService

export type UserSettings = {
  nickname?: string
  companyName: string
  companyJoinDate: Date
  companyCreateDay: Date
  isCompanyCreateHoliday: false
}

설정 변경 Service에서 선언한 Key로만 설정 값을 제어할 수 있도록 했는데,

export type SettingKey = keyof UserSettings

export const SettingService = {
  get: <K extends SettingKey>(key: K): Promise<UserSettings[K] | undefined> => {
    return StorageService.get<UserSettings[K]>(key)
  },
  set: <K extends SettingKey>(key: K, value: UserSettings[K]): Promise<void> => {
    return StorageService.set<UserSettings[K]>(key, value)
  },
}

이렇게 하면 Date Type은 제대로 변환되지 않아 별도로 메소드를 추가 했어야 했습니다. 😓

getDate: async (key: string): Promise<Date | undefined> => {
  const stringValue = await THIS.get<string>(key)
  if (stringValue === undefined) return undefined

  const value = new Date(stringValue)

  return value
},

문제해결

Error: Invalid or missing Date prop. Must be a Date object.

Date를 JSON하면 2023–03–26T06:37:42.897Z

get: async <K extends SettingKey>(key: K): Promise<UserSettings[K] | undefined> => {
    switch (key) {
      case 'companyJoinDate':
        const stringValue = await StorageService.get<string>(key)
        if (stringValue === undefined) return undefined

        const value = new Date(stringValue)

        //@ts-ignore
        return value
    }
    return StorageService.get<UserSettings[K]>(key)
  },