😩 벌레같은 오류 이제 1.5.7 버전으로 정말 멋지게 코드를 작성했고 일본어 지원까지 했으니 이제 스토어에 업로드를 해볼까... 했으나.. 아래와 같은 오류를 보았다. 아... 항상 느끼는 거지만 오류는 막기 힘들다. 아무리 코드를 잘 짜도 테스트가 없으면 확신할 수 없다는 생각이 들었다. 때문에, 테스트를 작성하려 한다. 📚 테스트 코드 작성 근데 어떻게 하지? 이 프로그램은 GPT의 도움을 많이 받았다. 고로 GPT도 메인테이너의 자격이 있다고 본다. 그러니까 GPT는 테스트 코드를 작성할 책임이 있다!(?) 아무튼 GPT의 도움을 받았다. 간단히 코드를 보여주고 유닛 테스트를 작성해 달라 요청했다. 내가 요청한 코드는 아래의 테스트 코드였고, import { getYTVideoId } from "..

🔨 content_script.js 뜯어 고치기 content_script는 웹 페이지 컨텍스트에서 실행되는 스트립트 파일이다. DOM에 직접 접근할 수 있다. 때문에 핵심 기능이 이 곳에 들어간다. 이 확장 프로그램의 content_script.js은 MutationObserver로 유튜브 DOM이 업데이트 되는 것을 탐지하고, popup.js에서 설정을 바꾸면 chrome.runtime에서 바꾼 설정값을 받는다. 이 모든게 하나의 스크립트 파일에 있다. 이번에도 분리를 잘 해서 깔끔하게 수정하고 싶다. 그리고 MutationObserver사용에 문제가 있는데, 이건 리팩토링 이후 수정해보겠다. 🧩 MVP 패턴 도입 content script는 popup과는 다르게 HTMLElement에서 입력이 들어..

🔨 popup.js 뜯어 고치기 팝업은 화면 오른쪽 상단 아이콘을 누르면 나타나는데, 메인 페이지와 별개로 동작한다. window, document 객체가 별개로 만들어진다. popup.js은 팝업 페이지에서 돌아가게 만든 스크립트 파일이다. 스크립트에서 관리하는 Element들은 9개나 된다. "색상" 에서 오른쪽 엘리먼트(두개 중 아무거나)를 누르면 color picker가 활성화된다. color picker는 iro라는 라이브러리를 적용했다. 이게 좀 골때리는게, 색상을 선택하면 아래 예시도 같이 바뀌어야 하고, 색상 오른쪽의 엘리먼트 색도 바꿔줘야 한다. 설정 언어나 크기조절을 바꿔도 예시는 변한다. 엘리먼트들의 결합도가 높은것이다. 그렇기 때문에 popup.js라는 스크립트 파일에 몰아 넣었고,..