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

**URL:** https://meta.discourse.org/t/theme-component-order-of-precedence/156615
**Category:** Development
**Created:** [7월 2, 2020, 3:13오후 UTC](https://meta.discourse.org/t/theme-component-order-of-precedence/156615 "2020-07-02T15:13:16Z")
**Posts on this page:** 1
**Showing post:** 5

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [7월 6, 2020, 8:42오전 UTC](https://meta.discourse.org/t/theme-component-order-of-precedence/156615/5 "2020-07-06T08:42:26Z")

</div>

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

![component id in the URL](https://global.discourse-cdn.com/meta/original/3X/5/0/5080f66f7f0a462bcc7dab47e7efdb5ed25afba4.png)

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

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

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

 ![active components setting](https://global.discourse-cdn.com/meta/original/3X/1/a/1a469acf4947d2f2be7460d9e0d0eeb2b4b5cdb6.png)

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

실제로 필요한 것은 이니셜라이저(initializer)의 실행 순서입니다. 코드를 [새로운 테마 JS 생성 방식](https://meta.discourse.org/t/splitting-up-theme-javascript-into-multiple-files/119369)으로 이동하지 않는 한 이를 구현할 수 없다고 생각합니다. 이 방식은 이니셜라이저에 이름과 실행 순서를 지정할 수 있게 해줍니다. 예를 들어, 다음과 같은 파일이 있다고 가정해 보겠습니다.

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

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

```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`

```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`

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

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

```

---

_[View the full topic](https://meta.discourse.org/t/theme-component-order-of-precedence/156615)._