[Recoil] Persist 데이터 구조가 도중에 바뀌면 어떻게 해야 할까?

안녕하세요 :)

저는 사용자의 편의성을 위해 데이터를 로컬 스토리지에 남겨두어 사용자가 재방문하거나 일시적으로 인터넷이 끊겨도 불편하지 않도록 어플을 만드는 편입니다. 이렇게 되면 데이터 구조를 짜고 업데이트하는 등 추가적인 작업이 많아지지만 결과적으로는 서버의 통신 부하를 줄이고 더 빠른 사용자 경험을 제공할 수 있어서 단점보다는 장점이 많다고 생각합니다.

오늘은 사이드 프로젝트를 진행하다 아래와 같은 에러 창이 뜨는 것을 보았습니다.

 

오잉? 하던 와중에 생각해 보니 로컬 스토리지 데이터 구조를 바꾸었던 것이 생각났습니다. 

 

현재 저의 로컬 스토리지에는 기존의 데이터가 남아있기 때문에 자바스크립트 코드가 기존의 데이터를 사용하면 프로토타입이 달라져 발생하는 문제였습니다. 사용자가 아무도 없는 서비스라면 단순히 로컬 스토리지를 삭제하고 새로고침 하면 그만이지만 문제는 일반 사용자입니다. 

 

사용자들은 로컬 데이터를 어떻게 삭제해야 하는지 모를 뿐만아니라 일반 사용자들이 로컬 데이터를 삭제한다는 건 말이 안 되죠.

 

따라서, 오래된 데이터를 로컬에 저장하고 있는 유저가 만약 웹어플을 이용할 때 오래된 데이터인지 여부를 체크하고 데이터를 삭제할 수 있는 로직을 추가해야 했습니다. 

 

다행히 Recoil에는 해당 로직을 쉽게 짤 수 있도록 해두었습니다.

const { persistAtom } = recoilPersist({
  key: 'teams',
  storage: localStorage,
});

// Custom effect to migrate old data structure
const migrateOldDataEffect = ({ setSelf }: { setSelf: any }) => {
  setSelf((prevValue: any) => {
    if (!Array.isArray(prevValue)) {
      return [];
    }
  });
};

export const teamsState = atom<TeamDto[]>({
  key: 'teams',
  default: [],
  effects_UNSTABLE: [persistAtom, migrateOldDataEffect],
});

 

위와 같이 effects_UNSTABLE 배열 안에 데이터를 체크하는 로직을 넣은 함수를 넣어주면 유저가 웹어플에 들어올 때마다 데이터를 체킹 하게 됩니다.