“컴포넌트가 gjs로 작성되었습니다” - 하지만 실제로는 아닙니다

개발
1

Stable 버전, 3.4.1을 사용 중입니다.

플러그인에 다음 파일이 있습니다:

/assets/javascripts/discourse/controllers/user-feedback.js

그리고
/assets/javascripts/discourse/templates/user-feedback.hbs 파일에는 다음 내용이 포함되어 있습니다:

{{feedback-stream stream=this.model}}

그리고 다음 파일들이 있습니다:

/assets/javascripts/discourse/components/feedback-stream.js
/assets/javascripts/discourse/templates/components/feedback-stream.hbs

브라우저 콘솔에서 발생하는 오류는 다음과 같습니다.

/discourse/templates/components/feedback-stream] feedback-stream은 gjs로 작성되었으므로 템플릿을 오버라이드할 수 없습니다. 오버라이드를 무시합니다. 템플릿 오버라이드의 향후 방향에 대한 자세한 내용은 https://meta.discourse.org/t/247487을 참조하세요. 하지만, 확인하실 수 있듯이 gjs로 작성된 것이 아닙니다.

그런데 이 오류를 일단 무시하고 플러그인 현대화를 계속 진행하기로 결정했습니다. 템플릿을 colocate(컴포넌트와 같은 위치에 배치)한 직후(즉, mv templates/components/* components 명령을 실행한 후) 오류는 사라졌습니다. 하지만 템플릿은 여전히 무시되고 있습니다.

2

음, 퍼즐 조각들이 맞춰지는 것 같네요.

해당 컴포넌트는

export default class FeedbackStream extends UserStream {

으로 정의되어 있고, UserStream은 gjs로 작성되어 있습니다.

잘못된 오류 메시지 문제는 차치하고, 이 코드를 현대화하고 다시 작동하게 하려면 어떻게 진행해야 할까요?

3

변경 사항의 목적은 무엇인가요? 맥락을 이해할 수 있도록 알려주세요.

gjs에서는 플러그인 아웃렛에만 의존할 수 있다고 생각합니다. :thinking:

4

현재 변경 사항의 목적은 플러그인이 최신 안정 버전에서 다시 작동하도록 하는 것입니다 :slight_smile:

이 플러그인의 특정 부분의 목적은 기존 컴포넌트를 대거 재사용하면서 사용자 프로필 페이지에 피드백을 표시하는 것입니다.

5

피드백 스트림(FeedbackStream)에 gjs를 사용하신다면 동작할 것 같습니다. 즉, 다음과 같은 형태가 될 것입니다.

export default class FeedbackStream extends UserStream {
  <template>
    Your custom template here 
  </template>
}

같은 컴포넌트 상속 체인에서 hbs와 gjs를 혼합하는 것은 제대로 동작하지 않을 가능성이 높다고 생각합니다.

6

참고로 @Arkshine 님, :exploding_head: 이모지를 봤습니다. 여기서 명확히 하고자 합니다. 템플릿 오버라이드는 원래 작성 형식과 관계없이 비권장(deprecated)되었습니다. 몇 달 안에 이를 완전히 제거할 예정입니다. 해당 경우를 위해 @Arkshine 님의 말씀처럼 플러그인 아웃렛(Plugin Outlets)이 해결책이라는 점에 100% 동의합니다.

하지만 @RGJ 님이 여기서 하고 있는 것은 템플릿 오버라이드가 아니라, Ember의 컴포넌트 상속 시스템을 활용하는 것입니다. 다음과 같이

class Foo extends Component

대신 다음과 같이 작성할 수 있습니다.

class Foo extends SomeOtherComponent

이 경우, 해당 컴포넌트는 SomeOtherComponent의 템플릿을 상속받게 되며, 원할 경우 직접 템플릿을 대체할 수도 있습니다. 이 템플릿 대체는 Foo에만 적용되며, 상위 컴포넌트인 SomeOtherComponent에는 영향을 미치지 않습니다.

이러한 형태의 상속은 비교적 드물게 사용되는 기능입니다. 우리는 대신 템플릿 내에서 컴포넌트를 서로 감싸는 “구성(composition)” 방식을 권장합니다. (예: DModal 사용 방식)

7

아, 알겠습니다! 설명해 주셔서 감사합니다. 여기서 상속이 있다는 걸 놓치고 있었네요. 이제 이해가 됩니다.

8

빠른 도움과 명확한 설명을 주셔서 감사합니다, 데이비드!