서버 측 템플릿 Jinja2 Handlebars

서버 측 템플릿은 브라우저로 보내기 전에 서버에서 HTML을 생성합니다. 첫 바이트부터 검색 엔진에 유리한 마크업을 제공하고, JavaScript 없이도 작동하며, 순수 클라이언트 측 렌더링에서 발생하는 “JavaScript가 로드될 때까지 빈 페이지로 표시되는” 문제를 피할 수 있습니다.

Jinja2는 사실상 표준인 파이썬 템플릿 라이브러리로, Flask, Django(내장 기능 또는 jinja2 백엔드를 통해), Pelican, mkdocs에서 사용됩니다. {% %} 태그에는 로직을, {{ }}에는 표현식을 작성합니다. 변수에는 <h1>{{ title }}</h1>을, 반복문에는 {% for item in items %}를 사용합니다.

Handlebars는 가장 널리 사용되는 Node.js 템플릿 라이브러리로, 트랜잭션 이메일(SendGrid, Mailgun)과 Express를 통한 SSR에 많이 사용됩니다. 표현식은 {{ }}에, 블록은 {{# }}에 작성합니다: {{#each items}}<li>{{name}}</li>{{/each}}.

두 엔진 모두 기본적으로 변수 출력을 자동으로 이스케이프합니다. {{ user.name }}에 name = "<script>"가 지정되면 "&lt;script&gt;"가 출력되어 XSS를 무력화합니다. 항상 자동 이스케이프에 의존하고, 명시적인 원본 출력 필터(Jinja: {{ x|safe }}, Handlebars: {{{x}}})는 신뢰할 수 있는 HTML에만 사용하십시오.

Jinja에서는 {% extends "base.html" %}를 자식 템플릿에 사용하고, 기본 템플릿에는 {% block content %}{% endblock %}를 사용합니다. Handlebars에서는 부분 블록과 함께 {{#> layout }}{{/layout}}을 사용합니다. 기본 레이아웃이 구조를 한 번만 정의하고, 페이지가 가변 영역을 채우도록 합니다.

Jinja에서는 {% include "header.html" %}을 사용합니다. Handlebars에서는 {{> header}}를 사용합니다. 두 방식 모두 다른 템플릿을 현재 템플릿에 인라인으로 삽입합니다. 부분 템플릿은 대규모 컴포넌트 라이브러리를 구성하는 기본 요소이며, 페이지와 레이아웃에 조합됩니다.

Jinja 필터: {{ price|currency }}. Handlebars 도우미: {{currency price}}. 두 방식 모두 값에 대해 서식 지정 함수를 호출할 수 있게 합니다. 프로젝트에 맞는 변환(날짜 형식 지정, 복수형 처리, 링크 생성)을 위해 직접 정의할 수도 있습니다.

Jinja: {% if user.is_logged_in %}Welcome{% else %}Sign in{% endif %}. Handlebars: {{#if user.isLoggedIn}}Welcome{{else}}Sign in{{/if}}. 콘텐츠를 숨기거나 표시하기 위해 클라이언트 측 JS에 의존하지 않고 데이터에 따라 템플릿을 분기할 수 있습니다.

두 엔진 모두 템플릿을 함수로 미리 컴파일한 다음 요청마다 해당 함수를 호출합니다. 컴파일은 한 번만 수행되고 렌더링은 빠릅니다. 트래픽이 매우 많은 사이트에서는 동일한 페이지를 다시 렌더링하는 대신 엣지에서 렌더링된 결과를 캐시하세요(Varnish, Cloudflare).

템플릿을 국제화 라이브러리와 함께 사용하세요. Python에서는 Jinja2 + Babel을, Node에서는 Handlebars + i18next를 사용할 수 있습니다. 템플릿에는 번역 키({{ t "welcome" }})가 들어가고, 국제화 계층이 이를 적절한 언어로 변환합니다. 하나의 템플릿을 여러 언어로 렌더링할 수 있습니다.

최신 프레임워크는 자체 템플릿 형식을 제공합니다. ERB(Rails), Twig(Symfony), Blade(Laravel), Razor(.NET), Slim/Haml(더 간결한 형식) 등이 있습니다. 패턴은 같고 구문만 다릅니다. 백엔드 언어와 생태계에 맞는 엔진을 선택하세요.

템플릿은 전통적인 서버 렌더링 사이트에 매우 적합합니다. 더 상호작용이 많은 앱에서는 Next.js(React), Nuxt(Vue), SvelteKit 같은 프레임워크가 경계를 흐립니다. 이러한 프레임워크는 서버에서 템플릿을 렌더링하면서도 동일한 컴포넌트를 클라이언트에서 하이드레이션하여 상호작용을 지원합니다.

Jinja2와 Handlebars 같은 템플릿 엔진에서 자동 이스케이프가 기본 동작인 이유는 무엇인가요?

서버 측 템플릿 엔진(Jinja2는 Python용, Handlebars는 JS용, ERB/Twig/Blade는 다른 기술 스택용)은 변수, 반복문, 조건문, 부분 템플릿 및 상속을 사용해 서버에서 HTML을 생성합니다. 자동 이스케이프는 기본적으로 XSS를 방어합니다. 다국어 사이트에는 국제화 라이브러리를 함께 사용하세요. 템플릿이 기반을 이루고, 최신 프레임워크가 그 위에 하이드레이션을 추가합니다.