레퍼런스 조사

• ‣
• Sider

요구 사항 분석

1. 처음에는 chrome.storage를 사용한다.
2. 필요 시, 로그인 + Supabase Database저장을 하여 데이터를 반영구적으로 보존할 수 있도록 한다.
   • 사용자에게 알림으로 가입을 권장한다. (영구 저장에 대한 장점을 소개하며)
   • 최초 로그인 시, chrome.storage에서 supbase database로 일괄 데이터를 마이그레이션한다.
     • 그 이후에 데이터 저장 시 supabase database에 데이터가 저장이 된다.

데이터 저장 시 주의사항

1. 저장할 때, url은 unique하며, 이미 url이 있다면, 해당 url의 내용을 업데이트해야한다.

   1. getMemo를 하여, 기존 리스트에서 url을 체크한다.

   2. 동일한 url이 있다면, 해당 데이터의 id값을 가져온다.

      update 시 피룡한 값은 id이다.

      const { data, error } = await supabase
        .from('memo')
        .update({ name: 'Australia' })
        .eq('id', 1)
      

   3. insert가 아니라 update한다.

2. 혹은 eq()를 id가 아니라 url로 사용한다면 api횟수를 줄일 수 있지 않을까?

   1. update할 대 비교를 url로 한다.

      const { data, error } = await supabase
        .from('memo')
        .update({ name: 'Australia' })
        .eq('url', '..')
      

   2. 만약 update에 실패한다면 && 에러 메시지가 특정 메시지라면 insert한다.

3. 혹은, 캐싱된 데이터가 있다면 api 요청을 최소화할 수 있는 방법이다.
   • 대표적인 방법은 react-query를 도입하는 것이다.

기존 storage에서 데이터 마이그레이션하기

최초 로그인한 사용자는 모든 storage의 데이터를 supabase로 마이그레이션해야한다.

최초 로그인 사용자라는 것을 어떻게 알 수 있을까?

이어서 : ‣

가장 쉬운 구현은 옵션 페이지에서 직접 마이그레이션 버튼을 눌러 하는 것이다.

마이그레이션 로직