.get, .set

• .get과 .set을 통해 api로부터 불러온 데이터를 background.js의 변수에 저장하는 작업을 수행하려 했는데, .get과 .set이 완료되기 전에 다음으로 넘어가 버려서(즉, 비동기로 동작해서) 문제가 생겼다.

• 꽤 오랜시간 고생했는데, 알고보니(문서를 잘 읽어보니) .get과 .set은 콜백함수를 지정해주지 않으면 Promise를 리턴하는 비동기 함수였다. 그런데 나는 예제만 보고 콜백으로 작성을 하려고 하다보니 원하는대로 코드를 작성할 수가 없었다.

  • 내가 아직 여전히 비동기 개념에 대해 헷갈리고 있었다는 사실을 알 수 있었고, 또 Promise객체(또는 Promise 객체를 리턴하는 함수)에 대해서는 async await이 가능하다는 사실에도 익숙하지 않았어서 문서를 읽고도 Promise를 리턴할 수 있다는 사실을 쉽게 놓쳤던거 같다.

• 특히 .get은 Promise<object>형태의 Promise객체를 리턴하기 때문에, 다음과 같이 async/await을 사용해서 코드를 짤 수 있었고, 앞으로도 더 쉽게 코드를 짤 수 있을거 같다.

  const storageObj = await chrome.storage.local.get(null); 
  // null을 넘기면 storage전체를 불러올 수 있다. 
  const videoData = await chrome.storage.local.get(video_id);
  // video_id가 key인 item을 불러오는 모습. 
  

.set 에서 storage item의 key를 변수를 통해 설정하는 방법

const video_id = 'jaksdlfdjkl';
chrome.storage.local.set({ video_id : 'video data' });
// 위와 같이 코드를 짰더니, storage에는 { 'video_id' : 'video data' } 와 같이 
// 내가 의도한 바와 다르게 'video_id' 자체가 키로 저장이 되어서 버그가 발생했었다. 

// 이를 해결하기 위해서는 아래처럼 코드를 짜거나, 
var video_id = "jaksdlfdjkl";
var obj = {};
obj[video_id] = 'video data';
chrome.storage.local.set(obj); 

// 내가 사용한 방법으로, ES6에서는 다음과 같이 할 수 있다고 한다. 
chrome.storage.local.set({ [video_id] : 'video data' });
// 어쩐지, 이런 예제가 있더라고. 괜히 []를 감싸는게 아니었어. 

computed property name(ES6) 참고

chrome.storage의 저장 용량