# 테마 컴포넌트/플러그인(JavaScript)의 공통 import 목록

**URL:** https://meta.discourse.org/t/common-list-of-imports-for-theme-components-plugins-js/382493
**Category:** Developers
**Created:** [9월 13, 2025, 3:13오전 UTC](https://meta.discourse.org/t/common-list-of-imports-for-theme-components-plugins-js/382493 "2025-09-13T03:13:05Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [9월 13, 2025, 3:13오전 UTC](https://meta.discourse.org/t/common-list-of-imports-for-theme-components-plugins-js/382493/1 "2025-09-13T03:13:05Z")

</div>

테마 컴포넌트를 만들 때 다양한 항목에 대한 import를 찾아 헤매는 경우가 많아서, 이들을 정리해서 여기에 올렸습니다.

## Ember 관련

| 이름 | Import | 사용법 |
| --- | --- | --- |
| Component | `import Component from "@glimmer/component";` | `export default class MyComponentClass extends Component {}` |
| Action 데코레이터 | `import { action } from "@ember/object";` | `@action` |
| Tracked 데코레이터 | `import { tracked } from "@glimmer/tracking";` | `@tracked myTrackedVar` |
| Service 데코레이터 | `import { service } from "@ember/service";` | `@service modal` |
| (Glimmer 템플릿) on | `import { on } from "@ember/modifier";` | `<p {{on "click" this.someAction}}>Click me!</p>`\[1\] |

## Discourse 관련

| 이름 | Import | 사용법 |
| --- | --- | --- |
| apiInitializer | `import { apiInitializer } from "discourse/lib/api";` | `export default apiInitializer((api) => {})` |
| withPluginApi | `import { withPluginApi } from "discourse/lib/plugin-api";` | `withPluginApi((api) => {})`\[2\]\[3\] |
| ConditionalLoadingSpinner | `import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner";` | `<ConditionalLoadingSpinner @condition={{this.loading}} />` |
| DButton | `import DButton from "discourse/ui-kit/d-button";` | `<DButton @icon="..." @action={{this.someAction}} />` |
| ajax | `import { ajax } from "discourse/lib/ajax";` | `ajax("/path/here")`\[4\] |
| i18n | `import { i18n } from "discourse-i18n";` | `{{i18n "locale_key"}}`\[5\] |
| (Glimmer 템플릿) Equals, not equals, greater than, greater than or equals, less than, less than or equals, or, not, and, has, includes | `import { eq, and, ... } from "truth-helpers";` | `{{#if (eq this.something this.something2)}}`\[6\] |

tracked 변수를 `ConditionalLoadingSpinner`의 조건으로 사용하거나, `DButton`의 액션으로 사용하는 등 조합해서 사용하는 경우도 볼 수 있습니다.

도움이 되셨으면 좋겠습니다!

전문가는 아니므로, 부정확한 부분이 보이면 수정해 주시거나 지적해 주시면 감사하겠습니다 🙂.

* * *

1. `input`, `mousedown`, `focusin` 등의 이벤트도 사용할 수 있습니다 

2. [discourse/app/assets/javascripts/discourse/app/instance-initializers/enable-emoji.js at 99ace1be120b928f6c694d0118959d745cc4bdbe · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/99ace1be120b928f6c694d0118959d745cc4bdbe/app/assets/javascripts/discourse/app/instance-initializers/enable-emoji.js#L14) 참조 

3. `apiInitializer` 사용을 권장하는 것 같습니다. 이건 구버전인 것 같네요? 

4. `fetch()`와 유사하게 동작합니다. `async` 함수 안에서 `await` 키워드와 함께 사용하세요. 

5. 코어 저장소에서 로케일을 가져오는 경우, 예: user.summary.stats 

6. `and`, `or` 같은 경우 2개 이상의 인자를 가질 수 있습니다

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [12월 26, 2025, 12:19오후 UTC](https://meta.discourse.org/t/common-list-of-imports-for-theme-components-plugins-js/382493/2 "2025-12-26T12:19:50Z")

</div>

하, 이건 정말 좋네요! 저도 같은 현상이 있는데, VS Code의 AI/자동완성이 종종 경로를 헛발로 만들어내더라고요 😉