localStorage 활용記

어느날 미국팀으로부터 이슈가 하나 넘어왔다.

두 탭을 동시에 띄워놨을 때 서로 다른 워크플로우끼리 타일 복사가 안된다는 것이다.

이 기능이 원래 있었는 지도 몰랐어서 PM팀에 확인해보니 원래 되는게 맞다고 하신다.

동시에 이전에 수정했던 이슈가 뇌리를 스쳤다.
'아 그거 때문이구나..!'

사건의 발단은 타일을 복사 후 text editor에 붙여넣기 했을 때 타일 CData가 붙여넣어진다는 이슈에서 시작되었다.

이 이슈를 나는 한 워크플로우 안에서는 타일 Copy&Paste 할 때 어차피 클립보드 데이터를 사용하지 않고 cell을 직접 복사해서 사용하니,
타일을 복사할 때 클립보드에서 데이터를 지워줌으로써 해결했었다.

this.addAction('copy', () => {
  .
  .
  .
  .
  navigator.clipboard.writeText('');
});

하지만 서로 다른 워크플로우에서 복사가 되게 하려면, 클립보드 데이터를 사용해야 한다..는 생각에 어떻게 해결해야 할지 고민을 많이 했다.

클립보드를 사용하면 이전에 해결했던 이슈가 재현될 것이고,, 사용하지 않으면 정상작동되던 기능이 먹통이 되는 것인데 양자택일을 할 수도 없는 노릇이었다.

고민 끝에 생각해 낸 것은 localStorage 였다. 브라우저의 모든 탭에서 특정 데이터를 공유한다는 특성을 이용해 보기로 했다.

this.addAction('copy', () => {
  .
  .
  .
  .
navigator.clipboard.readText().then(clipboardData => {
        localStorage.setItem('clipboardTileCData', clipboardData);
        navigator.clipboard.writeText('');
      });

pasteCells(pastedCnt) {
    return new Promise(resolve => {
      const clipboardData = localStorage.getItem('clipboardTileCData');
      .
      .
      .
      .
}

아주 잘 작동되었고 두 이슈를 모두 만족할 수 있었다.
로컬스토리지 이론으로만 알고 사용할 일은 잘 없을 줄 알았는데 이럴 때 사용하면 된다는 것을 깨달았다.

하지만 알아보니 로컬스토리지도 만능은 아니었다.
다른 브라우저끼리는 당연히 공유가 되지 않고, 다른 탭이 업데이트한 데이터를 실시간으로 감지하기 어려워 정확성과 신뢰성에 한계가 있다는 것이다.
이를 해결하려면 웹소켓을 사용해야 할거 같은데.. 원하는 동작에 있어서는 충분히 잘 작동하고 있기 때문에 이건 오버스펙이 아닐까 싶다.

이론상으로만 알던 지식을 실프로젝트에 녹일 때 쾌감 좋았다..