VUE 렌더링 기능을위한 실용적인 사용 사례 : 설계 시스템 타이포그래피 그리드 구축

이 기사에서는 Vue 렌더링 기능을 사용하여 설계 시스템 타이포그래피 그리드의 생성에 대해 자세히 설명합니다. 라이브 데모와 소스 코드가 제공됩니다. 렌더링 기능은 표준 VUE 템플릿에 비해 HTML 생성에 대한 우수한 제어를 제공하지만 튜토리얼 이외의 실제 예제는 거의 없습니다. 이 프로젝트는 그 격차를 해소하는 것을 목표로합니다.

렌더링 기능은 강력하지만 Vue의 단순성 중심의 프레임 워크 내에서 반 직관적 인 느낌을받을 수 있습니다. HTML 및 JavaScript의 혼합은 읽기 쉬운 코드로 이어질 수 있습니다. 예를 들어, 간단하게 렌더링합니다<div> a<code><p> <code>createElement 와 더 장점의 접근이 필요합니다.

도전 과제는 디자이너의 모형에 따라 vuepress를 사용하여 설계 시스템을위한 타이포그래피 그리드를 구축하는 것과 관련이 있습니다. CSS에는 글꼴 무게 및 크기에 대한 별도의 클래스가 포함되어 있으며, 태그 이름을 통한 제목 및 클래스 이름을 통한 기타 요소를 대상으로합니다.

몇 가지 접근법이 고려되었습니다.

• 하드 코딩 : 반복, 데이터 분리 부족 및 업데이트 관리의 어려움으로 인해 거부되었습니다.
• 전통적인 vue 템플릿 : 다양한 타이포그래피 옵션의 조건부 렌더링을 처리하는 데 필요한 광범위한 v-if 및 v-else 문으로 인해 부적합한 것으로 간주됩니다.

렌더링 기능은 사전 정의 된 기준에 따라 자식 노드를 동적으로 생성하는 능력으로 인해 최적의 솔루션으로 등장했습니다.

데이터 모델 : 타이포그래피 데이터는 쉽게 수정하기 위해 별도의 JSON 파일에 저장되었습니다. 각 JSON 객체는 텍스트 내용, 루트 요소 태그 ( h1 , p 등), 스타일링 속성 및 사용법 예제와 같은 정보를 포함하는 행을 나타냅니다. JSON 구조 내의 배열은 스타일링 및 여러 사용법 예제의 변형을 처리합니다.

구현에는 부모 구성 요소 ( TypographyTable.vue )와 아동 기능 구성 요소 ( TypographyRow.vue )가 포함되었습니다. 부모 구성 요소는 JSON 데이터를 통해 반복하여 각 행을 자식 구성 요소로 전달합니다. 하위 구성 요소는 렌더링 함수를 사용하여 HTML을 생성합니다.

데이터 변환 기능이 중요했습니다. 이러한 기능은 RAW JSON 데이터를 createElement 기능에 적합한 구조적 형식으로 변환했습니다. 여기에는 각 셀에 대한 트리와 같은 구조를 만들고 스타일의 변형 및 하위 노드의 존재를 처리하는 것이 포함되었습니다. 도우미 기능은 클래스 이름을 구문 분석하고 적절한 HTML 태그 및 클래스를 생성했습니다.

TypographyRow.vue 내의 렌더링 기능은 이러한 변환 된 데이터 구조를 사용하여 각 행에 대한 HTML을 생성합니다. 중첩 된 기능 구조는 가독성과 유지 가능성을 향상시킵니다.

이 접근법은 비교적 간단한 작업을 위해 지나치게 복잡해 보일 수 있지만 데이터 분리를 우선시하고 향후 수정을 단순화합니다. VUE 구성 요소를 변경하지 않고 JSON 파일을 업데이트하여 타이포그래피를 변경할 수 있습니다. 초기 복잡성과 장기 유지 관리 사이의 상충 관계에 대해 논의합니다.