내 'component'의 템플링이 깨졌어요. 어떻게 고치나요?

제가 관리하는 Discourse 인스턴스에서, 해당 인스턴스의 스폰서 로고를 푸터에 표시하는 컴포넌트가 있습니다(이전 관리자로부터 상속받은 것입니다). 이 컴포넌트는 최근까지 잘 작동했지만, 지금은 올바르게 렌더링되지 않고 있습니다. 템플릿 제어 지시문이 그대로 문자열로 표시되고 있으며, 템플릿 값 플레이스홀더도 HTML에 그대로 삽입되어 이미지 경로가 해석되지 않는 문제가 발생합니다:

이 컴포넌트는 git 저장소에서 관리되지 않으며, “관리자” → “외관” → “테마 & 컴포넌트” → “컴포넌트” 탭에서 직접 설정되어 있습니다:

사용자 정의 코드

사용자 정의 섹션:

  • 공통: CSS, Footer, JS

업로드

추가 파일

이 파일들을 보려면 테마를 내보내세요.
  • javascripts/discourse/api-initializers/theme-initializer.gjs

해당 "섹션

(여기서 “어떻게 그리고 왜”라고 한 것은: 근본적인 변경 사항이 무엇이었는지, 그리고 해당 변경에 대한 알림을 놓쳤는지 묻는 것입니다. 이 동작 변경의 원인이 된 것이 활성화된 자동 Discourse 업데이트를 통해 해당 인스턴스에 적용된 것이라 충분히 확신하지만, 근본 원인이 무엇인지 알고 싶습니다.)

콘솔에 추가 정보를 제공할 수 있는 오류나 경고가 있나요?

브라우저 콘솔에서요? 어쩌면 가능할 것 같긴 해요 — 거기에 무엇이 '정상’이고 무엇이 문제를 암시하는지 정확히 모르거든요. 내용을 여기에 그대로 붙여넣어도 될까요, 아니면 민감한 정보가 노출될 수도 있을까요?

네, 브라우저 콘솔이요 – 붙여넣으셔도 괜찮습니다 :slight_smile: 종종, 어떤 기능이 비추천(deprecated) 상태라면 콘솔에서 유용한 정보를 출력해 줍니다.

https://www.geowebforum.ch/c/feedback/2 로딩 시 브라우저 콘솔 전체 내용
ℹ️ Discourse v2026.3.0-latest — https://github.com/discourse/discourse/commits/38ad2acd2c — Ember v6.6.0 chunk.f47b6dc1cc59c827db42.d41d8cd9.js:275:35231
[PLUGIN discourse-weekly-newsletter] 테스트에서 오류를 방지하려면 `modifyClass` 호출에 `pluginId` 키를 추가하세요. 이렇게 하면 수정 사항이 한 번만 적용되도록 보장됩니다. chunk.f47b6dc1cc59c827db42.d41d8cd9.js:209:136918
DEPRECATION NOTICE: registerConnectorClass를 통한 커넥터 클래스 정의는 더 이상 권장되지 않습니다. 더 현대적인 패턴에 대한 자세한 내용은 https://meta.discourse.org/t/32727을 참조하세요. [deprecation id: discourse.register-connector-class-legacy] chunk.f47b6dc1cc59c827db42.d41d8cd9.js:134:74065
‘-webkit-text-size-adjust’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:1:800
‘-moz-text-size-adjust’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:1:827
알 수 없는 속성 ‘text-size-adjust’. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:1:849
알 수 없는 의사 클래스 또는 의사 요소 ‘-moz-focus-inner’. 잘못된 셀렉터로 인해 규칙 집합이 무시되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:1:1615
‘none’, URL 또는 필터 함수가 기대되었으나 ‘alpha(’를 발견했습니다. ‘filter’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:622
잘못된 셀렉터로 인해 규칙 집합이 무시되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:36117
‘justify-content’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:181379
‘text-wrap’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:205516
‘image-rendering’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:264428
‘-webkit-text-size-adjust’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:268491
‘-moz-text-size-adjust’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:268518
알 수 없는 속성 ‘text-size-adjust’. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:268540
‘font-size’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:298136
‘none’, URL 또는 필터 함수가 기대되었으나 ‘alpha(’를 발견했습니다. ‘filter’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:447258
‘none’, URL 또는 필터 함수가 기대되었으나 ‘alpha(’를 발견했습니다. ‘filter’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:4:447681
‘none’, URL 또는 필터 함수가 기대되었으나 ‘alpha(’를 발견했습니다. ‘filter’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:6:33799
‘text-wrap’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:6:105390
‘text-wrap’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:6:105471
‘padding’ 값 파싱 오류. 선언이 제거되었습니다. common_6dfc7bba61f3a7b80a86f119f30594abc84aaa6d.css:6:257744

Using Plugin Outlet Connectors from a Theme or Plugin 살펴봐야 할 것 같습니다.

자, registerConnectorClasssetupComponent는 비추천(deprecated) 상태인 것 같습니다. 에러 로그를 확인해 보세요:

DEPRECATION NOTICE: Defining connector classes via registerConnectorClass is deprecated. See https://meta.discourse.org/t/32727 for more modern patterns. [deprecation id: discourse.register-connector-class-legacy] chunk.f47b6dc1cc59c827db42.d41d8cd9.js:134:74065

그리고 푸터 컴포넌트처럼 원시 HTML(raw html)을 여전히 허용하는지도 확실하지 않습니다.

따라서 이 컴포넌트는 현대적인 패턴으로 리팩토링되어야 하며, 현재 Admin 아래에 있는 위치 대신 적절한 컴포넌트로 이동하는 것을 권장합니다.

질문하신 다른 사항에 대해 답변 드리자면

이는 Discourse의 현대화 작업과 Glimmer 컴포넌트를 활용한 새로운 현대적 표준으로의 전환 과정 때문입니다.

생 HTML(또는 템플릿)이 아니라면, https://www.geowebforum.ch/admin/customize/themes/3/common/footer/edit 의 예상 콘텐츠는 무엇인가요? 사용자가 제공한 콘텐츠처럼 마크다운인가요?

이 작업을 수행하는 방법에 대한 가이드라인을 알려주실 수 있을까요? Discourse 문서가 메타 포럼 여기저기에 흩어져 있는 것 같아 다소 혼란스럽습니다.

이를 위해 "export"를 추출하여 Git 저장소에 커밋하면 될까요?

내 컴포넌트가 export에 *.gjs 파일이 있다면 이미 Glimmer 컴포넌트인가요? 아니면 이것이 실제로 문제의 일부인가요? – 즉, 코드적으로는 아직 Glimmer 컴포넌트가 아니지만, 현재 Discourse가 내 컴포넌트를 Glimmer 컴포넌트로 오인하여(그 파일 이름으로) export하는 것인가요?

(무지를 용서해 주십시오. 저는 웹 개발자가 아니며, Ember와 Glimmer에 대해 거의 아는 바가 없습니다.)

제가 의도한 것은: 최신 버전에서는 원시 HTML이 더 이상 올바르게 파싱되지 않아, 렌더링된 결과가 아니라 HTML 덤프가 그대로 보이는 상태라는 것입니다.

네, .gjs 파일은 실제로 glimmer 컴포넌트를 나타냈지만, 거기서 사용된 registerConnectorClass 메서드는 (더 이상) 작동하지 않습니다.

이것은 충분히 이해할 수 있습니다. Using Plugin Outlet Connectors from a Theme or Plugin 의 핵심은, registerConnectorClass 메서드를 사용하여 footer.html 파일이 하던 것처럼 페이지 어딘가에 정보를 렌더링하려면, 이제 플러그인 아웃렛(plugin outlet)이라고 하는 특정 요소를 사용해야 한다는 것입니다. 푸터의 경우 above-footer 아웃렛이 잘 작동할 것입니다.

Beginner's guide to using Discourse ThemesDeveloping Discourse Themes & Theme Components 을 읽어보는 것이 좋은 아이디어일 것입니다.

구조를 이해하기 위해 간단한 테마 컴포넌트를 살펴보는 것도 도움이 될 수 있습니다. 예를 들어: GitHub - discourse/discourse-minimal-footer · GitHub

마지막으로, Discourse 봇이 큰 도움이 될 수 있습니다: 봇은 Discourse 패턴을 잘 알고 있으므로, 현재 코드를 제공하고 문제를 설명한 후 리팩토링을 도와달라고 요청할 수 있습니다.

만약 정말로 직접 만져보고 싶지 않다면, 마지막 옵션은 #marketplace에서 유료 도움을 요청하는 것입니다.

하지만 실제로는 매우 작은 컴포넌트이므로, 저는 개인적으로 템플릿을 통해 새 컴포넌트를 설정하고 봇의 도움을 받아 해결해 나가는 것을 권장합니다.

@discobot을 말씀하시는 건가요?

아니요, ask.discourse.com입니다.

여기 제시된 포인터, 추가 질문에 대한 답변, 그리고 ask.discourse.com 봇의 도움 덕분에 작동하도록 만들었습니다:

  • discourse_theme CLI가 생성한 코드 위에 적용된 관련 커밋입니다.

모두 감사합니다, 특히 @chapoi님께!

(관심 있으신 분이라면 https://gitlab.com/geowebforum/discourse-tc-geowebforum-sponsors의 리뷰를 환영합니다. :slightly_smiling_face:)

별말씀을요, 잘 해결되어서 기쁩니다.

참고: 만약 어떤 답변이 도움이 되었다면, 자신의 답변이 아니라 그 답변을 해결책으로 표시하는 것이 더 좋습니다. :wink:

참고: 만약 어떤 답글이 도움이 되었다면, 그 답글을 해결책으로 표시하는 것이 더 좋습니다 :wink:

해당 해결책으로 꼽을 수 있는 답글이 하나만 있는 것은 아니어서, 새로운 답글을 작성하여 작동하는 결과물에 대한 링크를 달고 그것을 "해결책"으로 표시하는 것이 더 유용할 것 같았습니다.[1] :slight_smile: 여기에서 실제로 해결책에 더 가까이 다가가게 해주거나 문제를 이해하는 데 관련 있는 맥락을 제공해준 모든 답글에 대한 공로를 빼앗으려는 의도는 전혀 없습니다. :sweat_smile:


  1. 비슷한 문제에 부딪혀 이 주제를 찾는 다른 사람들을 위한 향후 참고를 위해 ↩︎

전혀 그렇게 생각하지 않았습니다! 말씀하시는 뜻을 잘 알고 있습니다. 다만 일반적으로 그런 방식이 더 예의라고 생각하고, 이 포럼에서는 그 원칙을 따르려고 노력하고 있습니다.

다행입니다 :hugs: