토픽 목록 항목의 style 속성을 동적으로 수정하기

개발
1

면책 조항: 현재 진행 방향에 매우 만족하며, 새 시스템에 상당한 기능이 포함되어 있어 지금까지의 노력에 감사드립니다. 다만, 기존과 동등한 기능들을 유지할 수 있도록 확인이 필요합니다. …

제 Component(TLP)에서는 현재 Topic List Item 외부 태그의 style 속성을 동적으로 설정하고 있습니다:

  • 이미지의 우세한 색상과 일치하도록 background: 색상을 고유한 RGB 값으로 설정합니다. 이상적으로는 Ember 루프 내에서 처리되어야 합니다.

또한 grid-row-end를 설정하여 마스노리(masonry) 요소의 크기를 빠르게 결정하고 있습니다. 이는 매우 빠르고 효율적이며 많은 JavaScript 코드를 피할 수 있습니다. 하지만 이 부분은 DOM의 최종 크기에 의존하기 때문에 JavaScript를 사용해야 합니다.

현재 이 두 가지 방식은 문제없이 공존하고 있습니다.

image

<tr style="background: rgb(56, 10, 58); grid-row-end: span 48;" data-topic-id="23321" id="ember168" class="topic-list-item category-uncategorized tag-inforunners visited white-text has-thumbnail tiles-grid-item ember-view" data-is-last-viewed-topic="true">

이 두 가지는 Theme Component에 있어 필수적인 커스터마이징이며, 없이는 유지보수가 불가능합니다.

첫 번째 style 수정은 현재 modifyClass를 통한 직접적인 style 속성 바인딩으로 이루어지고 있으며, 이는 비추천(deprecated)되는 방법임을 알고 있습니다.

새로운 환경에서 이를 위한 API를 제공해 주실 수 있을까요?

아니면 기존에 이 문제를 해결할 수 있는 방법을 놓치고 있는 걸까요?

하지만 이것은 클래스로는 구현할 수 없다고 생각합니다.

2

그렇습니까? :confused: 네이티브 클래스 문법으로 업데이트하는 것만으로 충분한 것이 아닌가요?

3

이 내용을 기준으로 하고 있습니다.

4

아, 그렇군요. 그 말이 이 업그레이드를 의미하는 줄 알았어요.

5

명확한 답이 있으면 좋겠습니다.

  • modifyClass가 여전히 유효한가요? (단순히 구문이 업데이트된 것이라면, 해당 가이드를 참고하는 것이 좋을 것 같습니다.)
  • 이 메서드를 사용하여 외부 태그의 style 속성에 여전히 접근할 수 있나요?

Classic Components는 과거에 템플릿 외부에서 외부 태그 레벨의 속성에 접근할 수 있었기 때문에, 코드를 통해 동적으로 수정하는 것이 직관적이었습니다.

6

아, 맞아요. 콘솔에 비권장(deprecation) 경고가 있네요.

비권장 경고: 'modifyClass’를 사용하여 'component:topic-list-item’을(를) 수정하는 것은 더 이상 권장되지 않습니다. 대신 값 변환기 ‘topic-list-columns’ 및 기타 새로운 topic-list 플러그인 API를 사용하세요.

7

modifyClass 자체는 비추천(deprecated) 상태가 아닙니다. 이는 위험한 커스터마이징 메서드이며, 사용 시 주의가 필요합니다(@don이 링크한 문서에 설명되어 있음). 하지만 이를 제거할 당장 계획은 없습니다.

component:topic-list와 component:topic-list-items에 대해 비추천 메시지를 출력하는 이유는, 해당 컴포넌트들이 토픽 목록의 레거시 구현체이기 때문입니다. glimmer 토픽 목록이 활성화된 경우 이 컴포넌트들은 사용되지 않습니다. 현재 components/topic-list/item과 같은 glimmer 컴포넌트 세트를 갖추고 있습니다.

따라서 기술적으로는 새로운 컴포넌트에 modifyClass를 사용할 수 있습니다. 하지만 이들은 glimmer 컴포넌트이므로 JS 클래스를 통해 스타일 태그를 수정할 수 없어, OP의 문제를 해결하는 데 도움이 되지 않습니다.

공식 d-topic-thumbnails 테마 컴포넌트에는 유사한 ‘masonry’ 모드가 있으므로, 그 구현 방식을 살펴볼 가치가 있습니다. 우리는 토픽 목록의 각 'row’에 고유한 클래스를 추가합니다:

그 다음, 별도의 plugin-outlet에서 동적인 <style> 태그를 렌더링하여 해당 클래스 이름을 대상으로 합니다:

그럼에도 불구하고… 이 방식은 다소 복잡합니다. 따라서 style= 속성을 변경할 수 있도록 특정 valueTransformer를 추가하는 방안을 고려해 볼 수도 있습니다. Ember의 해당 속성에 대한 xss/htmlSafe 보호 기능 때문에 조금 까다롭지만… 뭔가 작동하는 것을 만들어낼 수 있을 것이라고 확신합니다.

8

데이비드, 검토해 주셔서 감사합니다. 정말 좋겠어요!

9

David, 다른 질문이 하나 있습니다. didInsert, didUpdate, willDestroy와 같은 Glimmer 이벤트에 새로운 API를 통해 접근(hook)하는 것이 가능한가요?

예를 들어 didInsert 시점에 추가적인 JavaScript를 실행하고 싶은데, 현재는 @on과 modifyClass를 통해 처리되고 있습니다.

(참고로, 이 부분은 새 Topic으로 분리해도 좋습니다.)

일단 여기서는 당신의 기법을 시도해 보겠습니다:

10

특정 위치에 구체적인 트랜스포머(transformer)를 도입할 수 있습니다. 하지만 모든 요소/컴포넌트에 연결할 수 있도록 하는 일반 API를 추가하는 것은 어렵다고 봅니다.

style= 속성에 대한 논의와 관련하여, 저는 이 PR을 만들었습니다. 검토/병합을 시도해 보겠습니다:

11

감사합니다. 현재 기술로 지금까지는 잘 작동하고 있으며, TLP에 맞게 조정했는데 잘 동작하는 것 같습니다. 더 많은 잠재적인 문제를 발견하면 다시 말씀드리겠습니다.

훌륭합니다! 병합될 때쯤이면 준비가 되어 있을 것 같습니다. 기대됩니다! 감사합니다, David!

12

완벽하게 작동해요! 다시 한번 감사드립니다! :rocket: