위젯 임베드 코드를 리팩터링한 방법: 8줄의 JavaScript에서 단일 Data Attribute로

Source: Dev.to

원본 임베드 코드

document.addEventListener('DOMContentLoaded', function () {
  init('da0a042d-78b7-4b0b-98b6-bc05a8c119c4');
});

임베드는 두 부분으로 구성되었습니다:

• 외부 리소스 로더

• 초기화 스니펫

document.addEventListener(‘DOMContentLoaded’, function () { init(‘da0a042d-78b7-4b0b-98b6-bc05a8c119c4’); });

기능적으로는 동작했지만, 이 방식은 두 개의 별도 `<script>` 블록을 붙여야 했습니다.

## 간소화된 위젯 구현

최소한의 `widget.js`는 `init` 함수를 노출할 수 있습니다:

```js
(function () {
window.init = function (x) {
  const container = document.createElement('div');
  container.textContent = x;
  document.body.appendChild(container);
};
})();

init 함수는 식별자를 받아 해당 값을 가진 <div>를 생성하고 페이지에 추가합니다. 실제 위젯에서는 이 ID를 사용해 백엔드에서 설정(색상, 위치 등)을 가져옵니다.

해결책: 자동 초기화

단일 태그 임베드를 가능하게 하기 위해, 스크립트는 자신의 <script> 요소에서 data-id 속성을 읽고 자동으로 init을 호출합니다.

function autoInit() {
  const scriptTag = document.querySelector('script[src*="widget.js"][data-id]');
  if (scriptTag) {
    window.init(scriptTag.dataset.id);
  }
}
document.addEventListener('DOMContentLoaded', autoInit);

이 로직을 사용하면 임베드는 다음과 같이 됩니다:

최종 widget.js

(function () {
  window.init = function (x) {
    const container = document.createElement('div');
    container.textContent = x;
    document.body.appendChild(container);
  };

  function autoInit() {
    const scriptTag = document.querySelector('script[src*="widget.js"][data-id]');
    if (scriptTag) {
      window.init(scriptTag.dataset.id);
    }
  }

  document.addEventListener('DOMContentLoaded', autoInit);
})();

결론

임베드를 data-id 속성을 가진 단일 <script> 태그로 통합함으로써 구현이 더 깔끔하고 사용자 친화적으로 바뀝니다. 이제 사용자는 한 줄의 코드만 추가하면 되므로 복잡성이 줄어들고 오류 가능성이 감소하며, 위젯이 다른 널리 사용되는 서드파티 솔루션처럼 보다 세련되고 전문적인 느낌을 줍니다.