노드JS 템플릿엔진(1) 개요
템플릿엔진 개요
템플릿 엔진의 역할
템플릿 엔진은 서버 사이드에서 동적인 웹 페이지를 생성하기 위해 사용되는 도구로, 템플릿이라는 미리 정의된 형식의 문서에 동적인 데이터를 삽입하여 HTML, XML, CSS 과 같은 마크업 언어를 생성하는 역할을 한다. 그리고 클라이언트에게 전송하여 웹 페이지를 표시한다.
최종마크업 문서생성
템플릿엔진이 웹페이지를 표시하는 마크업 언어를 생성하기 위해서는 정적인 마크업 언어로 작성된 템플릿 파일과 동적인 데이터를 결합하여 최종적인 마크업 문서를 생성한다.
노드JS의 템플릿엔진 종류
노드JS 템플릿엔진은 다음과 같다. 이 중에서 기초적인 학습용으로는 Pug, EJS 정도가 주로 사용되는듯 하다.
-
- Pug (Express 내장된 기본 템플릿 엔진: Jade(Pug))
- Express.js의 기본 템플릿 엔진인 Pug(Jade): Pug는 Node.js의 Express.js 프레임워크의 기본 템플릿 엔진으로 많이 사용되고 있습니다. 간결하고 인덴테이션 기반의 문법을 가지고 있어 가독성이 좋으며, 코드의 양을 줄여줄 수 있습니다.
// Pug (Jade) 템플릿 파일 예시 doctype html html head title Pug Example body h1 Hello, #{name}! p You are #{age} years old. ul each hobby in hobbies li= hobby -
- EJS (Embedded JavaScript)
- EJS는 HTML 안에 JavaScript 코드를 삽입하여 템플릿을 작성할 수 있는 템플릿 엔진으로 많이 사용되고 있습니다. 기존의 HTML 문법과 유사하여 학습 곡선이 낮고, 동적 데이터를 간단하게 표현할 수 있습니다.
<!-- EJS 템플릿 파일 예시 --> <!DOCTYPE html> <html> <head> <title>EJS Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/ejs/3.1.6/ejs.min.js"></script> </head> <body> <h1>Hello, <%= name %>!</h1> <p>You are <%= age %> years old.</p> <ul> <% hobbies.forEach(function(hobby) { %> <li><%= hobby %></li> <% }); %> </ul> </body> </html> -
- Handlebars.js
- 생략
<!-- Handlebars.js 템플릿 파일 예시 --> <!DOCTYPE html> <html> <head> <title>Handlebars.js Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script> </head> <body> <h1>Hello, !</h1> <p>You are years old.</p> <ul> <li></li> </ul> </body> </html> -
- Mustache.js
- 생략
<!-- Mustache.js 템플릿 파일 예시 --> <!DOCTYPE html> <html> <head> <title>Mustache.js Example</title> </head> <body> <h1>Hello, !</h1> <p>You are years old.</p> </body> </html> -
- Nunjucks
- 생략
<!-- Nunjucks 템플릿 파일 예시 --> <!DOCTYPE html> <html> <head> <title>Nunjucks Example</title> </head> <body> <h1>Hello, !</h1> <p>You are years old.</p> <ul> </ul> </body> </html> -
- Haml.js
- 생략
// Haml.js 템플릿 파일 예시 !!! %html %head %title Haml.js Example %body %h1 Hello, #{name}! %p You are #{age} years old. %ul - for (var i = 0; i < hobbies.length; i++) %li= hobbies[i] -
- React (React JSX를 템플릿 엔진으로 사용)
- React는 자바스크립트 라이브러리로, 템플릿 엔진의 개념과는 조금 다릅니다. React는 컴포넌트 기반의 UI 라이브러리로, JSX라는 문법을 사용하여 UI를 구성합니다. JSX는 자바스크립트와 유사한 문법을 사용하여 UI를 작성하는 것이 특징입니다. 아래는 React로 작성된 간단한 템플릿 파일 예시입니다.
// React 템플릿 파일 예시 import React from 'react'; const WelcomeMessage = ({ name, age, hobbies }) => { return ( <div> <h1>Hello, {name}!</h1> <p>You are {age} years old.</p> <ul> {hobbies.map(hobby => ( <li key={hobby}>{hobby}</li> ))} </ul> </div> ); }; export default WelcomeMessage; -
- Twig.js
- 생략
<!-- Twig.js 템플릿 파일 예시 --> <html> <head> <title></title> </head> <body> <h1>Hello, !</h1> <p>You are years old.</p> <ul> </ul> </body> </html> -
- Liquid
- Liquid는 Shopify에서 사용되는 템플릿 엔진으로, Ruby를 기반으로한 템플릿 엔진입니다. 아래는 Liquid로 작성된 간단한 템플릿 파일 예시입니다.
<!-- Liquid 템플릿 파일 예시 --> <html> <head> <title></title> </head> <body> <h1>Hello, !</h1> <p>You are years old.</p> <ul> </ul> </body> </html>
내가 선택한 템플릿엔진 후보
- EJS 템플릿엔진
- .ejs 템플릿파일
- React
- .jsx 템플릿파일
- .tsx 템플릿파일
위에 나열한 수많은 템플릿엔진 중 최종 학습 목표는 강세인 React 으로 정했다.
.tsx 와 .EJS 의 차이
둘은 사용 용도, 문법, 확장자 등이 다르며, 각각의 특징에 따라 다른 상황에서 사용된다고 한다.
요약하면, .tsx 파일은 클라이언트 측에서 실행되는 React 컴포넌트를 정의하는 파일이고, .ejs 파일은 서버 측에서 실행되는 템플릿 파일로서 서버 사이드 렌더링을 위해 사용된다.
Leave a comment