템플릿 상속을 통한 코드 재사용: Flask에서의 구현 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• Flask 프레임워크를 사용하는 웹 개발자
• 템플릿 재사용 기법을 학습하고자 하는 초보자
• 중간 수준의 코드 구조 최적화 필요자

핵심 요약

• 템플릿 상속을 통해 반복되는 레이아웃 코드를 base.html 하나로 통합 가능
• {% block %} 문법으로 특정 섹션(예: content)을 정의하고 자식 템플릿에서 재정의 가능
• 코드 중복 제거로 유지보수성 향상 및 디자인 일관성 유지 가능

섹션별 세부 요약

1. 반복 코드 문제 인식

• 여러 서비스 페이지(uptime, DNS 등)에서 동일한 레이아웃 반복
• UI 디자인 경험 부족으로 인한 파일 분리로 인한 관리 복잡성 증가

2. 템플릿 상속 개념 도입

• base.html 파일을 생성하여 공통 레이아웃(헤더, 푸터 등)을 정의
• {% block content %} 구문을 사용해 자식 템플릿에서 내용 삽입 가능
• @extends 지시문으로 기존 레이아웃 재사용 가능

3. 구체적 구현 예시

• 부모 템플릿:

```jinja

{% block content %}{% endblock %}

© 2025 My Site

```

• 자식 템플릿:

```jinja

{% extends "base.html" %}

{% block content %}

hello world!!

{% endblock %}

```

• 동일한 레이아웃 유지하면서 특정 섹션만 커스터마이징 가능

4. 장점 및 적용 효과

• 코드 재사용률 70% 이상 향상 (예: 4개 서비스의 공통 레이아웃 통합)
• 디버깅 시간 50% 감소 (변경이 필요한 부분만 수정 가능)
• 디자인 일관성 유지로 사용자 경험 향상

결론

• base.html과 {% block %} 문법을 활용한 템플릿 상속은 Flask 웹 애플리케이션에서 코드 중복 제거의 핵심 전략
• 공통 레이아웃 분리와 블록 기반 커스터마이징을 통해 유지보수성과 확장성 극대화 가능
• 예: base.html에 header, footer, sidebar 등 주요 섹션을 별도 블록으로 정의하여 재사용성 극대화