이렇게 하는 데에는 한계가 있었는데, 우리는 새로운 메서드들을 통해 이를 제거했습니다. 초기화 시점에 기능을 결정하는 것은 상당히 비유연하며, 무언가가 변경되면 전체 페이지를 다시 로드해야 합니다.
이것이 유용한 이유는 이제 기기들이 덜 예측 가능해졌기 때문입니다. 폰은 태블릿으로 접히거나 펼쳐질 수 있고, 노트북은 태블릿으로 전환될 수 있으며, 키보드와 마우스를 수많은 기기에 연결할 수 있습니다…
기존 방식에 익숙하다면 느낌이 다를 수 있지만, 초기화자에서 하던 작업은 여전히 가능할 뿐만 아니라 더 유연하게 변경되는 기능에 대응할 수 있습니다.
이제 가능합니다. 더 세밀한(granular) 방식으로, 전체를 교체하는 대신 동일한 템플릿 내에서 조건부적으로 콘텐츠를 표시/숨길 수 있습니다. 예를 들어, 이제 우리의 기능(capabilities) 서비스에 viewport 객체가 있습니다…
템플릿에서…
{{#if this.capabilities.viewport.lg}}
대형 화면용 콘텐츠
{{/if}}
{{#if this.capabilities.viewport.sm}}
매우 작은 화면용 콘텐츠
{{/if}}
또는 JS에서…
get myContent() {
if (this.capabilities.viewport.sm) {
return "짧은 콘텐츠";
} else {
return "매우 매우 긴 콘텐츠"
}
}
그리고 CSS에서는 같은 브레이크포인트와 정렬하여 다음과 같이 사용할 수 있습니다…
@use "lib/viewport";
.my-element {
font-size: 1em;
@include viewport.until(sm) {
font-size: 2em;
}
}