요약 - Alex 컴포넌트는 투표, 댓글 등 동적인 컴포넌트를 말함 - 동적 컴포넌트 관리 툴인 Alex Inspector 개발 - 객체지향 프로그래밍 적용 - 북마클릿을 이용하여 만듬

서비스 소개 먼저 Alex 컴포넌트는 투표, 댓글 등 동적인 컴포넌트를 말합니다. Alex Inspector는 실 서비스에서 개발 중인 브랜치의 컴포넌트를 적용해보거나, 해당 컴포넌트의 정보를 볼 수 있는 admin 툴입니다. 예를 들어 개발 중인 브랜치에서의 댓글 컴포넌트가 실제 서비스에 적용되었을 때 어떤 모습인지 미리 적용해봄으로써, 개발의 편의성을 높일 수 있습니다. 그리고 컴포넌트의 옵션을 변경하여 적용할 수도 있습니다. 또, 해당 댓글에 대한 정보인 사용자 id, 댓글 고유번호 등을 확인할 수 있고, 관련 컴포넌트의 admin 툴로 바로 이동할 수 있는 링크도 제공합니다.

기술 Vanilla JS, Webpack

내용 - 북마클릿을 이용한 개발 북마클릿은 웹 브라우저의 북마크를 활용한 작은 애플리케이션을 말합니다. 저는 크롬 익스텐션, 북마클릿 중 어느 것으로 개발할지 고민했지만, 크롬 익스텐션을 선택할 경우 브라우저의 제한이 있으므로 북마클릿을 이용하였습니다. 따라서 북마클릿을 이용하여, 개발중인 브랜치를 실제 운영중인 사이트에 임의로 적용시켜봄으로써 개발의 편의성을 높힐 수도 있습니다. - mutationObserver를 이용 이를 구현할 때, vanillaJS, webpack, 객체지향 프로그래밍, mutationObserver 등을 활용하였습니다. 다음에 기능이 추가될 수 있으므로 객체지향 프로그래밍을 하였고, DOM element의 변화에 따라 Alex 컴포넌트의 정보를 지속해서 보여주기 위해 mutationObserver를 활용하였습니다. mutationObserver를 이용할 때는 Observing을 뒷정리하는 것이 중요하다고 느꼈습니다.