이 게시물에서는 엣지 전달 서비스 및 문서 작성 기능을 사용하여 DA에 있는 스프레드시트에서 항목의 동적 목록을 작성하는 방법을 자세히 살펴보겠습니다.

페이지에 링크 목록을 덤핑하는 것과 실제로 사용할 수 있는 것을 큐레이션하는 것에는 큰 차이가 있습니다. 이 프로젝트는 "URL과 설명 목록만 있으면 되는" 으로 시작했지만, 곧 콘텐츠 유지 관리, DOM 부풀리기 방지, 과도한 엔지니어링 없이 빠른 필터링 등 몇 가지 실제 문제를 해결해야 하는 과제로 바뀌었습니다.

그 결과 참조 목록 블록은 스프레드시트 기반 JSON 피드에서 콘텐츠를 가져오고, 카테고리 및 태그 필터링을 지원하며, 세련된 애니메이션으로 결과를 점진적으로 로드하는 데이터 기반의 필터링 가능한 Adobe EDS(Edge Delivery Services)용 카드 그리드입니다. 여러분 모두가 이미 북마크에 추가해 두셨을 이 엣지 배달 서비스 참조 페이지를 특별히 만들었습니다!

스프레드시트가 모든 것을 주도하도록 하기

이 블록은 전적으로 데이터 기반입니다. /en/reference-links.json 에서 EDS 시트에 의해 생성된 JSON 파일을 가져옵니다. 한 장은 참조 항목, 한 장은 카테고리로 구성하는 다중 시트 형식을 사용하기로 했습니다:

{
  "data": {
    "data": [
      {
        "url": "https://developer.adobe.com/",
        "image-url": "https://example.com/thumb.png",
        "title": "Adobe Developer Documentation",
        "description": "Official docs for building on Adobe platforms.",
        "tag": "Documentation|Official",
        "category": "Development"
      }
    ]
  },
  "categories": {
    "data": [{ "Category": "Development", "Description": "Dev tools and references" }]
  }
}

태그는 셀 내에서 파이프(Tag1 | Tag2)를 사용하므로 작성 과정을 간단하고 예측 가능하게 유지합니다.

이 블록을 만들 때 라이브 푸시하기 전에 몇 가지 테스트를 해보고 싶을 것입니다. DA 내부에 채워진 목록만 있는 경우 로컬에서 테스트할 때 CORS(교차 출처 리소스 공유) 문제가 발생할 수 있습니다. 이 문제를 해결하려면 DA 시트와 동일한 요구 사항을 충족하는 몇 가지 테스트 항목이 포함된 자체 JSON 파일을 만들고 로컬 JSON 사용을 활성화하기만 하면 됩니다.

const USE_LOCAL_JSON = false;
const LOCAL_JSON_PATH = '/tools/json/reference-list.json';
const LIVE_JSON_URL = '/en/reference-links.json';

깨지지 않는 카드 제작

각 참조 항목은 이 DOM 구조를 가진 카드가 됩니다:

.reference-card
  └── a.reference-link
        ├── div.reference-image-wrapper   (optional)
        │     └── img.reference-image
        └── div.reference-content
              ├── h3.reference-title
              ├── p.reference-description  (optional)
              └── div.reference-tags
                    └── span.reference-tag (one per tag)

블록을 만들 때 고려해야 할 가장 중요한 사항 중 하나는 작성자가 블록을 얼마나 쉽게 사용할 수 있는지입니다. 이를 위해 목록이 다양한 양의 정보를 처리하면서도 동일하게 작동할 수 있도록 해야 했습니다. 일부는 설명이나 태그가 있거나 둘 다 없는 경우도 있습니다. 존재하는 것만 렌더링하되, 레이아웃이 어느 한 요소에 의존하지 않도록 하는 것이 규칙이었습니다. 몇 가지 구체적인 결정 사항이 있습니다:

• 이미지는 선택 사항으로, 비어 있지 않은 경우에만 이미지로 대체되는 이미지-URL 필드가 렌더링됩니다.

• 이미지는 로딩="lazy" 을 사용하여 화면 밖 썸네일이 초기 렌더링을 차단하지 않도록 합니다.

• 모든 링크는 외부 URL에서 탭 냅핑을 방지하기 위해 rel="noopener noreferrer" 을 사용합니다 .

  • 이는 보통 최신 브라우저에서 자동으로 수행되지만, 후회하는 것보다 안전한 것이 낫습니다!

세계를 다시 빌드하지 않고 목록 필터링하기

필터링 방법을 고려할 때, 특히 모든 상호작용에 대해 다시 렌더링할 때 상황이 지저분해질 수 있습니다. 이를 방지하기 위해 처음부터 각 카드의 속성을 설정하여 가시성을 토글하는 방식으로 변경했습니다.

card.setAttribute('data-category', ref.category);
card.setAttribute('data-tags', JSON.stringify(cardTags));

또한 모든 상호작용에 대한 가시성을 재평가하기 위해 updateReferenceDisplay라는 함수를 추가했습니다:

const categoryMatch = selectedCategory === 'all' || cardCategory === selectedCategory;
const tagMatch = cardTags.length === 0 || cardTags.some((tag) => activeTags.has(tag));

태그 매칭은 OR 논리를 사용하며, 선택한 태그는 카드의 자격을 부여합니다. 활성 태그는 세트에 있으므로 추가/제거 및 멤버십 확인은 모두 O(1)입니다. 한 가지 미묘한 경우: 태그가 없는 항목. 태그 필터를 항상 통과하도록 하면 예기치 않게 사라지는 일이 없습니다.

기대 이상의 성과를 내는 CSS

스타일링에 관한 블로그는 아니지만, 해당 부서에서 내린 몇 가지 결정에 대해 언급하지 않는다면 아쉬울 것 같습니다. 특히 카드에 마우스를 가져갔을 때 나타나는 "스포트라이트" 효과에 대해 알아보세요.

.reference-grid:has(.reference-card:hover) .reference-card:not(:hover) {
  transform: scale(0.9);
  opacity: 0.6;
}

페이드인 애니메이션도 동일한 접근 방식을 따르므로 JS와 스타일 간에 조정 오버헤드가 없습니다:

.reference-card { opacity: 0; }

.reference-card.fade-in {
  opacity: 1;
  animation: fade-in-up 0.5s ease-out forwards;
}

@keyframes fade-in-up {
  from { transform: translateY(20px); }
  to   { transform: translateY(0); }
}

최종 생각

이 프로젝트는 사려 깊은 아키텍처가 일반적인 패턴을 진정으로 확장 가능한 것으로 바꾸는 방법을 보여주는 좋은 예입니다. 참조 목록 블록은 구조화된 데이터로 책임을 떠넘기고 프론트엔드는 효율적인 렌더링과 상태 관리에 집중하도록 함으로써 DOM이 비대해지고 비용이 많이 드는 리렌더링의 일반적인 함정을 피할 수 있습니다.

진정한 가치는 필터링이나 프레젠테이션에 있는 것이 아니라 시스템 자체에 있습니다. 작성자는 예측 가능하고 마찰이 적은 방식으로 콘텐츠를 관리할 수 있으며, 구현은 성능과 확장성을 유지하면서 쉽게 확장할 수 있습니다. 이는 콘텐츠가 성장함에 따라 유지되는 패턴이며, 매번 다시 살펴봐야 하는 패턴이 아닙니다.

실제 참조 페이지를 확인하세요!

저자 소개

들으신 내용이 마음에 드시나요? 어떤 것이 적합한지 궁금한 점이 있으신가요? 상담하고 싶어요! 문의하기

더 읽어볼 만한 기사