프로젝트: Copy Stack

아이디어 배경 자료조사를 하다 보면 웹사이트에서 좋은 내용을 스크랩할 때가 종종 있습니다. 그런데 스크랩을 하다 보면 클립보드가 조금 부족하게 느껴집니다. 다른 스크랩을 생성하려다 이전에 클립보드에 복사해둔 내용 때문에 메모장이나 노션을 켜서 적어놓고 그제야 새로 스크

앞서 적은 기능들을 실제 구현 가능한지 간단하게 동작하는 앱을 만들어서 테스트를 먼저 해보려 합니다. text selection을 만든 뒤 Ctrl + C 를 통해 복사본을 생성한다.text selection을 만든 뒤 우클릭 -> context menu에서 “Copy

기본적으로 manifest.json 파일을 만들어줘야합니다. 프로젝트 폴더 최상단에 manifest.json 파일을 만들어줍니다.manifest에서 중요한건 action,content_scripts,background 세 가지 입니다.https://develo

페이지에서 복사한 내용을 background로 전송할 수 있는지 확인해보겠습니다. popup,background,content 간의 통신 popup, background, content 간의 직접적인 통신은 불가능하다고 했습니다. 따라서 chrome이 제공하는 me

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onInstalled익스텐션이 처음 설치될 때, 익스텐션이 새 버전으로 업데이트 될 때, 브라우저가 새 버전으로

chrome.contextMenus를 통해 context menu를 추가하고 리스너를 등록할 수 있습니다. 이미지나 텍스트에 대해 context menu를 생성하고 데이터를 받아올 수 있게 해봅시다.context menu를 사용하는 것은 권한을 필요로합니다. manif

앞서 copy이벤트와 context menu를 통해 받아온 데이터를 indexed DB에 저장해보는 작업을 할 겁니다.indexed DB를 사용하기 위해선 먼저 DB를 열고 object store(일종의 테이블)를 생성해야합니다.DB는 indexedDB.open 을 통

indexed DB에 저장한 내용을 불러와서 클립보드에 저장하는 부분까지 작성해보겠습니다.web component를 사용해 각 copy를 view에 대응시켜보겠습니다.처음 popup이 생성되면 background로 GET_CONTENT_LIST 요청을 보내고 backg

앞서 적은 요구사항을 토대로 어떤 책임이 생길지 분류해봅시다.유저가 브라우저 내에서 복사한 데이터를 Copy라고 부르겠습니다. Copy는 핵심 자료구조입니다. Copy는 저장하고 불러와지며 유저에게 보여지고, clipboard의 상태를 변경하는데 사용됩니다. 여러 개의

Lit 단순한 앱이라 React,Vue 등 다양한 프레임워크중 어느걸 선택해도 문제는 없겠지만, 이러한 프레임워크를 끌어 쓰는게 불필요하게 무겁다고 생각되었습니다. 하지만 웹컴포넌트를 이용해 바닐라 자바스크립트로 구현하자니 template이나 css 들을 별도로 관리

그러고나면 아래같은 에러가 뜹니다.관련해서 찾아보니 tsconfig.node.json 에 "target":"esnext" 를 추가해주면 해결된다고 합니다.여기 참고 https://github.com/microsoft/vscode/issues/168420Vite

https://storybook.js.org/docs/web-components/builders/vitestorybook 공식 사이트에서 하라는대로 합시다.웹 컴포넌트 단위로 UI를 확인하고 개발하기 위해 스토리북을 설치합니다.

https://jestjs.io/docs/getting-started#using-typescript 의존성을 설치합니다. 타입스크립트 세팅을 위해 babel의 typescript preset도 받아줍니다. babel.config.json 파일을 만들고 아래 내용을

https://www.npmjs.com/package/huskyprepare 스크립트를 추가합니다..husky 폴더가 루트에 추가됩니다.npx husky add 로 pre-commit, 혹은 pre-push 훅을 추가합니다.commit을 만들기 전에 jest를

간단하게 목업을 만듭니다. 목업 작업은 Figma로 했습니다.디자인은 전체적으로 Material Design 3 가이드를 따랐습니다. 텍스트 복사본 카드이미지 복사본 카드Copy에 대한 미리보기가 Card 형태로 제공되고 Copy 버튼을 누르면 복사가, Delete 버

https://www.npmjs.com/package/fake-indexeddbvite 버전과 충돌을 일으켜서 --legacy-peer-deps 옵션을 주어 설치했습니다.test 파일 상단에 import "fake-indexeddb/auto 를 추가하면 됩니다

스토리북을 실행하는데 대충 이런 에러가 떴다. 찾아보니 node 16v 이상에서 충돌이 있는듯 하다. 현재 node LTS 버전이 18.12.1인데, 좀 당황스럽다.혹시 싶어서 storybook을 6.5.15 버전으로 업그레이드 했는데, 에러가 늘었다참고로 depend

공통되는 css 변수를 부여하는 경우에 대한 글입니다.예시는 아래와 같습니다.위와 같이 단순히 div로 감싼 slot을 가진 lit-element를 작성했습니다. 다음 static styles 속성을 통해 css를 적용하는데, 공통 테마로 작성한 css 변수 --sur

lit-element에서 스토어를 사용하는 경우 스토리북에서 스토어를 mocking하는 방법입니다.storybook을 쓰다가 특정 상황에 컴포넌트가 어떻게 보여지는지 작성하고 싶을 때가 있습니다. 보통은 args 파라미터값을 줘서 element의 attribute를 준

보통 반응형을 지원하는 상태관리 라이브러리의 동작 방식 pub/sub 패턴을 사용하며 다음과 같습니다.view가 store를 구독한다.유저가 view를 통해 이벤트(액션)을 발생시킨다.store의 state가 갱신된다.store가 view에게 갱신을 알린다.view는

Broadcastable interface Radio - action을 받아 BroadcastingStation에게 브로드캐스팅 BroadcastingStation - newState를 받아 Radio들에게 브로드캐스팅 Radio와 BroadcastingStatio

앞서 만든 Radio-BroadcastingStation에 사용할 스토어를 직접 구현합니다. 인터페이스 스토어는

다음의 상태를 관리하고 렌더링에 사용해봅시다. store 생성 stores/copyStore.ts 파일을 만들어줍니다. background 구현 background에서 store를 불러와 BroadcastingStation을 만들어줍니다. view(CopyList

지금까지 만든 Broadcast 모듈을 별도의 레포로 분리시켜 Copy Stack의 관심사에서 제거하려고 합니다.세팅 등의 내용은 건너 띄고 tsconfig,vite,package.json 세팅만 간단하게 봅시다.declaration, declarationMap, ou

테스트를 자동화하는 것까지는 개인 프로젝트 치고 너무 규모가 커지는 것 같아서 손수 테스트해주기로 했습니다. 테스트 방식은 아래와 같이 작성했습니다. 먼저 프로젝트를 시작할 때 작성했던 요구사항입니다. 따라서 작성해볼 케이스들은 다음과 같습니다.

저번 글에서 동작 테스트를 하면서 발견된 문제가 있었는데, 바로 앱을 켜놓은 상태에서 서비스 워커가 비활성화되며 기능이 작동하지 않는 문제였습니다.처음에 문제를 관찰하기 위해 얼만큼의 시간이 지나면 비활성화 되는지 시간을 재보았는데요. 정확히 30초가 지나면 서비스 워

사실 배포는 별거 없긴 합니다. 공식 문서들이 워낙 잘나와있어서 잘 따라하면 됩니다.빌드한 앱의 zip 파일을 만들어야합니다. 매번 dist를 zip으로 압축하는 것은 귀찮으니 빌드시 zip을 만들어주는 vite 플러그인을 설치해서 사용하겠습니다.https:/

https://github.com/dev2820/copy-stack/releases/tag/v1.1.01.1.0 버전을 업데이트 했습니다. 사실 업데이트를 별도의 글로 작성하는게 좋을지 고민을 좀 했는데 중간 이상 규모의 기능 업데이트가 있으면 문서를 남기는게