Electron+React 프로그램에서 최근 작업 목록 보여주는 기능 구현

안녕하세요:) 개발자 우디입니다! 아래 내용 관련하여 작업 중이신 분들께 도움이되길 바라며 글을 공유하니 참고 부탁드립니다😊
(이번에 벨로그로 이사오면서 예전 글을 옮겨적었습니다. 이 점 양해 부탁드립니다!)

작업 시점: 2021년 9월

배경

• 최근에 작업했던 프로젝트 목록 정보를 보여주고, 클릭하면 해당 프로젝트가 열리도록 구현 필요

생각 및 고민

• 최근에 작업했던 프로젝트 목록을 어떻게 보여주지?
  • 사용자의 localStorage에서 최근 작업 목록 정보를 관리하기
    • localStorage와 sessionStorage
      • 웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줌
      • 이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있음
      • localStorage의 주요 기능은 다음과 같음
        • 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유됨
        • 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않음
      • sessionStorage 객체는 localStorage에 비해 자주 사용되진 않는데, 이는 제공하는 프로퍼티와 메서드는 같지만, 훨씬 제한적이기 때문임.
        • sessionStorage는 현재 떠 있는 탭 내에서만 유지됨 - 쉽게 말하자면 현재의 세션에서만 데이터가 유지된다고 보면 됨.
        • 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장됨.
        • 하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유됨.
        • 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않지만, 탭을 닫고 새로 열 때는 사라짐.
  • 프로젝트를 수정했던 시점 순서대로 목록을 보여주는 것이니까, 프로젝트를 저장할 때마다 사용자의 localStorage에 저장되어 있는 최근 작업 목록 정보를 수정해주면 될 것임
  • 프로젝트 수정 후 저장 시에만 잘 처리된다면, 최근 작업 목록 정보를 불러와서 보여주기만 하면 됨

프로젝트 저장 시 처리

if (recentTaskListFromLocalStorage) {
  const thisProjectIdxInLocalStorage = recentTaskListFromLocalStorage.findIndex(
    project => project.path === filePath,
  );
  if (thisProjectIdxInLocalStorage !== -1) {
    recentTaskListFromLocalStorage[thisProjectIdxInLocalStorage].modifiedAt = new Date();
  } else {
    recentTaskListFromLocalStorage.sort((a, b) => {
      return new Date(b.modifiedAt) - new Date(a.modifiedAt); // 최근 수정된 프로젝트 제일 앞으로
    });
    if (recentTaskListFromLocalStorage.length >= 10) recentTaskListFromLocalStorage.pop();
    recentTaskListFromLocalStorage.unshift(thisProject);
  }

  localStorage.setItem('recentTaskList', JSON.stringify(recentTaskListFromLocalStorage));
} else {
  localStorage.setItem('recentTaskList', JSON.stringify([thisProject]));
}

• localStorage에 기존의 최근 작업 목록 정보가 있을 경우
  • 방금 수정했던 프로젝트가 기존 최근 작업 목록 정보에 포함되어 있는 경우 (thisProjectIdxInLocalStorage !== -1)
    • 현재 프로젝트 정보의 최근 수정일을 현재 시각으로 변경한 후 다시 setItem 해줌.
  • 방금 수정했던 프로젝트가 기존 최근 작업 목록 정보에 포함되어 있지 않는 경우
    • 현재 프로젝트를 최근 작업 록록 정보의 맨 처음에(unshift) 넣어주고, 변경된 정보를 다시 setItem 해줌
    • 단, 이때 최근 작업 목록 정보의 개수가 10개를 넘어갈 경우 마지막 것을 제거(pop)한 후에 setItem 해줌.
• localStorage에 기존의 최근 작업 목록 정보가 없을 경우
  • 현재 프로젝트로 정보를 새로 만든 후에 setItem 해줌.
• 중간에 발생한 이슈
  • 처음에는 localStorage에 작업 목록들을 저장할 때 프로젝트의 모든 context 정보들을 저장해야 하나 싶었음 → 하지만 그렇게 될 경우 너무 저장할 데이터가 많아짐.
    • 어차피 사용자의 컴퓨터에 프로젝트 파일들이 저장되어 있을 것임 → localStorage에는 파일 경로와, 수정된 시각, 생성된 시각 정보만을 저장하도록 구현함.

최근 작업 목록 보여주기 위해 불러오기

  getRecentTaskList = () => {
    const thisRecentTaskList = JSON.parse(localStorage.getItem('recentTaskList'));
    if (thisRecentTaskList) {
      thisRecentTaskList.sort((a, b) => {
        return new Date(b.modifiedAt) - new Date(a.modifiedAt); // 최근 수정된 프로젝트 제일 앞으로
      });
      thisRecentTaskList.map((e, idx) => {
        fs.access(e.path, fs.constants.F_OK, err => {
          // fs.constants.F_OK 는 파일 존재 여부 확인을 위한 mode 값
          if (err) {
            thisRecentTaskList.splice(idx, 1);
            localStorage.setItem('recentTaskList', JSON.stringify(thisRecentTaskList));
          }
        });
      });
      this.recentTaskList = thisRecentTaskList;
    }
  };

• 받아온 최근 작업 목록의 프로젝트들이 실제로 해당 경로에 파일로 존재하는지 여부를 검사
  • 만약 존재하지 않는 프로젝트의 경우, 해당 프로젝트를 삭제 후 setItem 해줌.

배우고 느낀 점

• 항상 더 나은 방법이 있다면 무엇일까 생각을 하면서 코드 작성하기
• 코드 작성 시 최대한 다양한 경우를 고려하기