2023-10-29 주말 TIL

주요진행사항

- 크롬 익스텐션 개발 (velog 테마 변경)

개요

비록 tistory블로그를 작성하고 있지만, 좋은 계기로 내배캠 분들과 velog 관련 익스텐션을 개발하게 되었다.

이미 두분이서 개발하고 계신 익스텐션에 기능 하나만 추가하였다.

velog 글작성 페이지에서 테마(dark/light)모드 를 변경할 수 있는 버튼이 없다.

이전 페이지에서 적용한 테마가 적용되기 때문이다.

이러한 사소한 점을 개선하기 위해 글 작성 페이지에 테마 변경 버튼을 추가하였다.

기능

글 작성 페이지의 toolbar 부분에 테마 변경 버튼을 생성 및 테마 변경 이벤트 추가

세부내용

글 작성 페이지에 동적으로 DOM 요소를 생성하였다.

이때 toolbar를 부모요소로 지정하였다.

기본적인 class와 svg는 벨로그 메인페이지의 버튼을 참조하였으며, 클릭 시 modeChangeHandler 이벤트를 추가하였다.

modeChangeHandler 함수는 다음과 같다.

벨로그에서 테마가 변경될 때 data- 속성의 theme 가 변경 된다.

변경되는 DOM 요소를 querySelector를 통해 접근하여 해당 data-속성을 테마에 따라 dark/light로 변경하였다.

이때 버튼 svg에 animate를 지정하였으며 코드는 다음과 같다.

{ transform : [최초상태, 최종상태]}, {duration:걸리는 시간, easing:애니메이션 효과}

느낀점

사실 미리 틀을 잡아두셔서 한건 많지 않다. 그렇지만 사용만하던 익스텐션을 직접 만들어보니 감회가 새로웠다.

내가 작성한 코드 중 대단한 내용은 없었다. 사실 개발하실 수 있으셨지만 좋은 경험하게 해주신 경열님, 진호님께 감사드린다. 앞으로도 모든지 열심히 경험해보자!!