Lit
단순한 앱이라 React, Vue 등 다양한 프레임워크 중 어느 걸 선택해도 문제는 없겠지만, 이러한 프레임워크를 끌어 쓰는 게 불필요하게 무겁다고 생각되었습니다. 하지만 웹 컴포넌트를 이용해 바닐라 자바스크립트로 구현하자니 template이나 css 들을 별도로 관리하면 가독성이 떨어지고 생산성도 떨어질 듯합니다.
따라서 최종적으로 Lit 을 사용하기로 결정했습니다.
사실 웹 컴포넌트를 이용하는 라이브러리라는 점에서 전부터 관심 있게 보고 있었는데, 마침 써볼 수 있겠네요. Lit으로 만든 컴포넌트는 다른 프레임워크에서도 사용할 수 있기 때문에 나중에 익스텐션에서 앱 등으로 확장하는 경우 이점을 누릴 수 있을 것 같습니다.
Typescript
Lit에 Typescript를 적용하면 데코레이터를 이용할 수 있다는 점. 그리고 프로젝트 전반적으로 객체지향을 따라 개발하려 하고 있으므로 타입스크립트를 사용하려 합니다.
사실 타입스크립트가 자바스크립트에서 잡지 못하는 타입 에러등을 신경 쓸 수 있다는 장점도 있지만 그것보다 다양한 객체지향 문법들(implements, abstract 등)을 지원한다는 점, 그리고 동적으로 타입을 생성할 수 있다는 점이 압도적으로 좋은 점이라 생각합니다. (타입 에러는 jsdoc으로 어느 정도 방지할 수도 있고요)
Storybook
독립적인 웹 컴포넌트 개발을 위해 스토리북을 사용해 보려 합니다. 가능하면 스냅샷 테스트까지 해보고 싶은데, 그건 봐서 해야 할 듯합니다.
Jest
구상한 아키텍처를 수행하고 유닛 테스트를 자동화할 수 있게 jest를 사용합니다. chrome extension 환경을 구현하기 위해 jest-chrome을 사용할 겁니다.
참고로 jest-chrome은 jest@29.3.1버전과는 의존성 문제가 있는 듯 합니다. (ERESOLVE unable to resolve dependency tree 에러가 발생함)
따라서 npm install jest-chrome -D --legacy-peer-deps 로 설치해야합니다.
https://github.com/extend-chrome/jest-chrome/issues/19
위글 참조
