Express 프레임워크 템플릿 엔진 (Pug, EJS 등)

 

Express 프레임워크와 템플릿 엔진 (Pug, EJS 등) 상세 설명

Express 프레임워크란?

Express.js는 Node.js 기반의 웹 애플리케이션 프레임워크입니다. 간결하고 유연하며, 다양한 기능을 제공하여 빠르게 웹 서버를 구축할 수 있도록 돕습니다. Express는 RESTful API 개발에 특화되어 있으며, 미들웨어 시스템을 통해 요청 처리 과정을 모듈화하여 관리하기 쉽습니다.
주요 특징:

• 미들웨어: 요청과 응답 사이에 다양한 기능을 수행하는 함수입니다. 로그 기록, 인증, 에러 처리 등을 미들웨어로 구현합니다.
• 라우팅: 클라이언트의 요청을 특정 함수로 연결하는 기능입니다. URL 패턴을 기반으로 요청을 분기하여 처리합니다.
• 템플릿 엔진 지원: Pug, EJS 등 다양한 템플릿 엔진을 사용하여 동적인 HTML을 생성할 수 있습니다.

템플릿 엔진이란?

템플릿 엔진은 정적인 HTML에 동적인 데이터를 삽입하여 완전한 HTML 문서를 생성하는 도구입니다. 즉, 서버에서 처리된 데이터를 HTML에 반영하여 사용자에게 보여주는 역할을 합니다. 이를 통해 웹 페이지를 더욱 유연하고 동적으로 만들 수 있습니다.
템플릿 엔진의 장점:

• 코드 재사용성: 반복되는 HTML 코드를 템플릿으로 만들어 재사용할 수 있습니다.
• 유지보수성: 코드를 논리적으로 분리하여 관리하기 쉽습니다.
• 생산성 향상: 템플릿 언어를 사용하여 HTML 작성 시간을 단축할 수 있습니다.

주요 템플릿 엔진 비교

템플릿 엔진특징장점단점

Pug (Jade)	들여쓰기를 기반으로 한 간결한 문법, HTML 구조를 명확하게 표현	가독성이 좋고, 생산성이 높음	기존 HTML 문법과 다르므로 학습 곡선이 있을 수 있음
EJS	HTML과 유사한 문법, 간단한 로직 처리 가능	학습이 쉽고, Express와의 통합이 용이함	Pug에 비해 기능이 제한적일 수 있음
Handlebars	템플릿과 데이터를 분리하여 관리, 안전한 렌더링	보안성이 높고, 커뮤니티가 활발함	학습 곡선이 다소 있을 수 있음

728x90

Express에서 템플릿 엔진 사용하기

1. 템플릿 엔진 설치: npm을 사용하여 원하는 템플릿 엔진을 설치합니다.
   Bash

   npm install pug
   

    
2. Express 설정: Express 앱에서 템플릿 엔진을 설정합니다.

   const express = require('express');
   const pug = require('pug');
   
   const app = express();
   app.set('views', './views'); // 템플릿 파일이 위치한 디렉토리 설정
   app.set('view engine', 'pug'); // 템플릿 엔진 설정
   
   // ...
   

    
3. 템플릿 파일 생성: views 디렉토리에 템플릿 파일을 생성합니다.
   코드 스니펫

   doctype html
   html(lang="ko")
     head
       title= title
     body
       h1 Hello, #{name}!
   

    
4. 렌더링: res.render() 메서드를 사용하여 템플릿을 렌더링합니다.

   app.get('/', (req, res) => {
     res.render('index', { name: 'World' });
   });
   

    

결론

Express 프레임워크와 템플릿 엔진을 활용하면 효율적으로 웹 애플리케이션을 개발할 수 있습니다. 각 템플릿 엔진마다 특징이 다르므로, 프로젝트의 요구사항에 맞는 템플릿 엔진을 선택하는 것이 중요합니다.
더 자세한 내용은 다음 문서를 참고하세요:

• Express 공식 문서: https://expressjs.com/
• Pug 공식 문서: https://pugjs.org/
• EJS 공식 문서: https://ejs.co/