browsing assist2 하이라이트 복원 기능 성능 개선 안녕하세요! Browsing Assist 크롬 익스텐션을 개발하면서 겪었던 하이라이트 복원 성능 문제를 해결한 방법을 공유하려고 합니다. 서론하이라이트 복원이 무엇일까요? 위 GIF를 보면, 해당 뉴스 페이지에 접속할 때 기존에 하이라이트한 정보를 다시 복원하는 것을 확인할 수 있습니다. 즉, 이전에 하이라이트한 내용을 해당 페이지에 복원하는 기능입니다. 주요 성능 이슈먼저, 하이라이트 복원 작업을 개발하면서 직면했던 여러가지 성능 문제를 소개하겠습니다. 느린 API 속도 랜선 연결이 아닌 WIFI와 같은 원활한 무선 인터넷 환경에서 하이라이트 생성, 수정, 삭제 시 반영이 느려지는 현상이 발생하였습니다. 최악의 시나리오에서 하이라이트 복원작업이 느려지는 현상 페이지 전체 본문에 하이라이.. 2025. 2. 19. Vanilla JS 그리고 리팩토링 안녕하세요! 최근 진행했던 Browsing Assist 크롬 익스텐션의 리팩토링 과정을 공유하고자 합니다. 모듈화크롬 익스텐션은 다른 프레임워크와는 다르게 바로 모듈화를 할 수 없다는 점에서 많은 문제점이 발생합니다. 모듈화가 되어있지 않아 전역 변수로 상태를 관리하다보니 중복된 식별자 문제가 발생했고, 순서에 의존적인 구조가 되었고, 결국 잦은 버그가 발생하였습니다. 이러한 문제를 해결할 수 있는 방법은웹팩(webpack)클로저(closure) (채택)가 있습니다. 웹팩은 강력한 모듈화 도구이지만, 프로젝트 규모가 크지 않은 경우에는 클로저를 활용하여 간단하게 모듈화를 구현할 수 있다고 생각하여 클로저를 사용하였습니다. 클로저는 함수 안에 내부 함수를 정의하고, 그 내부 함수를 반환합니다... 2025. 2. 18. 이전 1 다음
