테마 컴포넌트 우선순위 순서

개발
5

테마 또는 컴포넌트를 생성/설치할 때마다 Discourse는 해당 항목에 id를 부여합니다. 해당 컴포넌트의 페이지를 방문하면 URL에서(끝부분의 숫자) 그 id를 확인할 수 있습니다.

component id in the URL

해당 컴포넌트가 테마에 추가되면, 실행 순서는 기본적으로 id를 기준으로 결정되는 것 같습니다(디퍼링 없이 콘솔 로그를 출력하는 매우 기본적인 수준에서). 즉, 233은 234보다 먼저 실행되는 식입니다.

이 방식은 대부분의 경우 잘 작동합니다. 후속 변경 사항들은 보통 새로운 컴포넌트로 추가되므로 자연스럽게 순서가 정해지기 때문입니다.

장기적으로는 테마에 추가한 컴포넌트 목록의 순서를 따르는 방식으로 변경될 수 있습니다.

active components setting
active components setting985×141 13.8 KB

하지만 현재로서는 로드맵에 포함되어 있지 않습니다.

실제로 필요한 것은 이니셜라이저(initializer)의 실행 순서입니다. 코드를 새로운 테마 JS 생성 방식으로 이동하지 않는 한 이를 구현할 수 없다고 생각합니다. 이 방식은 이니셜라이저에 이름과 실행 순서를 지정할 수 있게 해줍니다. 예를 들어, 다음과 같은 파일이 있다고 가정해 보겠습니다.

/javascripts/discourse/initializers/initialize-for-foo.js

그 내용이 다음과 같다고 합시다.

import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: "foo",
  initialize() {
    withPluginApi("0.8.7", api => {
      console.log("foo")
    });
  }
}

그리고 다음과 같이 생긴 다른 이니셜라이저가 있다고 가정해 보겠습니다.

/javascripts/discourse/initializers/initialize-for-bar.js

import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: "bar",
  initialize() {
    withPluginApi("0.8.7", api => {
      console.log("bar")
    });
  }
}

bar가 foo보다 나중에 실행되도록 하려면 after: 인수를 추가할 수 있습니다. 이렇게 하면 해당 인수로 전달한 이니셜라이저 이름의 코드보다 나중에 실행되도록 보장됩니다. 따라서 bar가 foo보다 나중에 실행되려면 다음 파일에서 이렇게 하면 됩니다.

/javascripts/discourse/initializers/initialize-for-bar.js

import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: "bar",
+ after: "foo",
  initialize() {
    withPluginApi("0.8.7", api => {
      console.log("bar");
    });
  }
};