구성 요소 추출 및 부분 템플릿

HTML 코드베이스가 커지면 동일한 마크업 조각이 여러 페이지에 나타납니다. 사이트 머리글, 바닥글, 탐색 메뉴, 제품 카드, 양식 필드 등이 그 예입니다. 이를 복사해 붙여 넣으면 유지 보수가 악몽이 되고, 바닥글을 변경할 때 모든 페이지를 편집해야 합니다.

대부분의 서버 측 템플릿 언어(Jinja, Liquid, ERB, EJS, Handlebars, Twig)는 포함 지시문을 지원합니다: {% include "header.html" %} 또는 <%- include("header") %>. 빌드 도구나 서버는 이를 포함하는 모든 페이지에 부분 템플릿을 삽입합니다.

JSX/TSX(리액트), 뷰 단일 파일 컴포넌트, 스벨트 컴포넌트, 아스트로 컴포넌트는 더 명확한 의미 체계로 같은 개념을 표현합니다. 컴포넌트는 구조, 스타일, 동작을 캡슐화합니다. 이러한 컴포넌트는 빌드 시점(SSG) 또는 실행 시점(SSR/CSR)에 HTML로 컴파일됩니다.

부분 템플릿과 컴포넌트를 목적별로 그룹화하십시오. partials/layout/은 머리글/바닥글/탐색 메뉴용, partials/blocks/는 히어로/기능/행동 유도 블록용, partials/forms/는 필드/버튼/선택 상자용으로 사용합니다. 일관된 구성은 부분 템플릿 라이브러리가 커져도 쉽게 탐색할 수 있게 합니다.

부분 템플릿은 매개변수를 사용하면 더 강력해집니다: {% include "button.html" with label="Save", variant="primary" %}. 부분 템플릿 안에서는 이름으로 매개변수를 참조하십시오. 하나의 템플릿으로 사이트 전체에서 서로 다른 버튼을 렌더링할 수 있습니다.

임의의 콘텐츠를 감싸는 부분 템플릿(카드, 대화 상자)에는 슬롯 패턴을 사용하십시오. Jinja에서는 {% block content %}{% endblock %}, Twig에서는 {% block %}, JSX에서는 {children} 속성을 사용합니다. 감싸는 부분 템플릿이 외곽 구조를 제공하고, 사용하는 쪽이 내부 내용을 제공합니다.

정적 사이트 생성기(11ty, Astro, Hugo, Jekyll)는 빌드 시 포함을 처리하므로 배포된 HTML에는 템플릿 문법이 없습니다. 동적 템플릿(PHP, Rails, Express+EJS)은 요청 시점에 처리하므로 유연하지만 더 느립니다. 요청마다 콘텐츠가 동적으로 바뀌어야 하는지에 따라 선택하십시오.

부분 템플릿은 자체 CSS를 포함해야 합니다. 바닥글 부분 템플릿은 footer.css를, 버튼 부분 템플릿은 button.css를 소유합니다. 실제로 사용된 부분 템플릿에 필요한 CSS만 연결하는 빌드 단계와 결합하면 모든 페이지에서 모든 컴포넌트의 CSS를 로드하는 일을 피할 수 있습니다.

각 부분 템플릿은 독립적으로 테스트할 수 있어야 합니다. 다양한 데이터로 렌더링하고 결과를 검증하십시오. 사이프러스 컴포넌트 테스트나 제스트 스냅샷 테스트 같은 도구는 HTML 부분 템플릿에도 적용됩니다. 테스트된 부분 템플릿은 이를 사용하는 모든 페이지를 수동으로 확인하지 않고도 안전하게 변경할 수 있습니다.

부분 템플릿은 하나의 인터페이스입니다. 매개변수 이름, 슬롯 규칙 또는 필수 속성을 변경하면 모든 사용처에 호환성을 깨는 변경이 발생합니다. 부분 템플릿의 인터페이스를 문서화하고, 단계적으로 사용 중단을 진행하며, 리팩터링하기 전에 검색 도구로 모든 사용처를 찾으십시오.

머리글 + 사이드바 + 콘텐츠 + 바닥글 + 분석 부분 템플릿을 조합해 페이지를 만드십시오. 각 부분 템플릿은 작고 한 가지 역할에 집중하며, 페이지 자체는 이들을 연결하는 얇은 조립 스크립트가 됩니다. 800줄짜리 단일 파일 HTML보다 훨씬 쉽게 이해할 수 있습니다.

부분 템플릿을 추출하려면 페이지 전체에서 중복된 마크업을 찾고, 이를 partials/X.html로 복사한 다음, 각 위치를 포함 지시문으로 바꾸고, 호출하는 쪽마다 다른 값은 매개변수화하십시오. 한 번에 하나의 부분 템플릿만 처리하면 코드베이스가 점진적으로 개선됩니다.

반복되는 HTML 조각(예: 사이트 바닥글)을 부분 템플릿으로 추출할 때 얻는 가장 큰 이점은 무엇입니까?

반복되는 HTML을 서버 측 포함(Jinja, Twig, EJS)이나 프레임워크 컴포넌트(리액트, 뷰, 스벨트, 아스트로)를 통해 부분 템플릿과 컴포넌트로 추출하십시오. 매개변수로 데이터를 전달하고 슬롯으로 구성하십시오. 목적별로 그룹화하고 독립적으로 테스트하며, 부분 템플릿의 시그니처를 인터페이스로 취급하십시오. 점진적으로 이전하면 추출할 때마다 중복이 줄고 유지 보수성이 향상됩니다.