[회고] DayDo 하이라이터 회고

DayDo 하이라이터 회고

팀원들과 사이드 프로젝트로 DayDo라는 크롬 익스텐션 사이드 프로젝트를 진행하고 있습니다.

프로젝트 소개

DayDo 크롬 익스텐션은 해야 하는 일을 관리할 수 있는 간단한 앱입니다. 익스텐션 팝업에서 해야 하는 일을 빠르게 추가 / 제거 할 수 있으며, 제공하는 TODO 페이지에서 캘린더와 함께 해야 하는 일의 진척도를 확인할 수 있습니다.

DayDo Popup

DayDo Page

12월 13일 0.1.0 버전이 공개되었으며, 이번 업데이트로 하이라이터 관련 기능이 추가되었습니다.

사용한 기술

이번에는 popup과 optional page의 작업 비중이 크게 줄어들고, contents, background script 의 비중이 크게 늘어나면서 TypeScript와 rollup을 사용했습니다.

하이라이터를 구현하기 위해 다음 기술을 사용하였습니다.

• XPath: Range 객체 내에 있는 Container를 저장하기 위해 XPath를 사용했습니다.
• Selection, Range: 현재 선택되어 있는 텍스트의 정보를 가져옵니다.

프로젝트를 진행하면서

프로젝트를 진행하면서 아쉬움이 많이 남았습니다.

구조 설계

구조 설계를 하는 과정에서 조금 더 가독서이 쉽게 재사용성이 높게 구조를 설계하는 방법이 없을까? 생각하게 되었고, 규모가 점점 커져감에 따라 기존에 작성된 코드의 구조를 다시 작성하는 등 여러 번 갈아엎게 되었으며 구조 설계 및 디자인 패턴 공부의 필요성을 다시 한번 느끼게 되었습니다.

또한, 내가 설계한 구조임에도 규모가 너무 커지고 잦은 수정이 발생하다보니 플로우가 이게 맞나..? 하는 생각이 들어서 개발하면서 생각하는 습관을 잠시 내려두고 설계를 우선으로 하면서 정리를 해야하지 않을까? 하고 다시 한번 느꼈습니다.

외부 라이브러리 사용 불가능

개발을 진행하면서 가장 힘들었던 점은 contents, background 부분에서 외부 라이브러리 사용을 하지 못했다는 점입니다.

rollup 설정이 잘못 되어서 이런 일이 발생한 건가 싶기도 하였지만, async await 또는 spread 연산자를 사용할 때 타입스크립트에서 tslib를 추가하도록 지정되는데, chrome extension에서 require을 인식하지 못하는 것을 보고 chrome 익스텐션에서 외부 라이브러리를 사용할 수 없게끔 막아놓은 게 아닌가 하는 생각도 들었습니다.

이 부분은 CRA Webpack 설정 이슈로 인해 rollup으로 분리되면서 build 환경에 두 개로 나뉘어서 생긴 게 아닐까 하는 생각이 제일 큰데, '어차피 외부 라이브러리 사용이 불가하다면 빌드 관리라도 조금 더 편하게 하자'라는 생각으로 CRA Webpack 설정으로 통합시킬 예정입니다.

언제 진행될 지는 모르겠지만..

Chrome Storage의 불편함

데이터를 저장하기 위해 Chrome Storage를 사용했는데, 정말 많이 불편했습니다.

다른 사람들이 데이터를 저장하기 위해 사용하는 방식을 보니 Chrome Storage가 아닌 PouchDB 등과 같은 로컬 DB 라이브러리를 사용하기도 하였는데, 이 부분에 대해서 Chrome Storage는 DB 데이터를 동기화하는 용도로만 사용하고 실 데이터 저장은 로컬 DB에서 하는 것도 나쁘지 않겠다고 생각하게 되었습니다.

728x90

개발 결과물

DayDo Highlighter

개발하면서 가장 많은 부분을 쏟았던 부분은 여러 태그에 걸친 값을 온전히 하이라이팅하는 것이었습니다.

선택한 텍스트가 하나의 태그 내에 들있는 텍스트라면 그냥 선택된 부분에 mark 태그를 씌우면 해결될 일인데, 여러 태그에 걸쳐 있는 경우 태그를 씌우고 또 하이라이팅된 텍스트를 제거할 때 어떻게 연결되어 있는 하이라이팅 값을 모두 제거할 수 있을지에 대한 고민이 제일 컸습니다.

전자는 열심히 값이 비어있는지 재귀와 유사항 방식으로 체크해서 태그를 씌우고, 후자는 mark 태그를 생성할 때 dataset 값을 지정해서 해당 dataset 값으로 연결되어 있는 하이라이터를 찾고 제거하는 링크드 리스트와 유사한 방법을 사용해 해결하였습니다.

// 연결되어 있는 Highlight Element를 찾는 로직

while (true) {
  const nextPrivateId = (elements[elements.length - 1] as any).dataset[Highlighter.DATASET_KEY.NEXT_PRIVATE_ID];
  const nextElement =
    (nextPrivateId && this.document.querySelector(`[${privateIdAttributeName}="${nextPrivateId}"]`)) || null;

  if (!nextElement) break;
  elements.push(nextElement);
}

검수 과정

21년 1월 9일 검수 신청을 하였는데.. 문제 없이 한번에 통과되면 좋겠네요