Node.js와 EJS: 동적 웹페이지 생성을 위한 템플릿 엔진 이해하기

웹 개발에서 동적 웹페이지는 사용자 요청에 따라 달라지는 웹페이지를 의미합니다. 이러한 동적 웹페이지를 쉽게 생성하기 위해 많은 개발자들이 Node.js와 EJS(Embedded JavaScript) 템플릿 엔진을 사용하고 있습니다. 이 글에서는 Node.js와 EJS의 기본 개념부터 실제 사례와 활용 팁까지 자세히 알아보겠습니다.

Node.js란?

Node.js는 구글의 V8 JavaScript 엔진 위에서 실행되는 서버 사이드 플랫폼입니다. 비동기 이벤트 기반 아키텍처를 채택하여 높은 성능과 확장성을 제공합니다. Node.js를 사용하면 JavaScript로 서버를 구축할 수 있으며, 이는 웹 개발의 경계를 허물고 클라이언트와 서버 모두에서 JavaScript를 사용할 수 있게 합니다.

EJS란?

EJS는 Embedded JavaScript의 약자로, HTML 내에 JavaScript 코드를 삽입할 수 있게 해주는 템플릿 엔진입니다. EJS를 사용하면 동적으로 생성된 HTML을 손쉽게 만들 수 있으며, 서버에서 데이터를 받아와 이를 기반으로 웹페이지를 구성할 수 있습니다.

Node.js와 EJS의 결합

Node.js와 EJS를 결합하면 동적인 웹 애플리케이션을 효과적으로 구축할 수 있습니다. EJS는 서버에서 데이터를 받아와 이를 HTML로 변환하므로, 사용자 인터페이스를 동적으로 생성할 수 있습니다. 다음은 Node.js와 EJS를 활용한 실제 사례입니다.

사례 1: 간단한 블로그 페이지

이 블로그 페이지 예제에서는 Node.js와 EJS를 사용하여 간단한 블로그의 게시물을 동적으로 렌더링합니다. 사용자가 데이터베이스에 추가한 게시물을 EJS 템플릿을 통해 표시할 수 있습니다.

카테고리	내용
제목	내 첫 번째 블로그 포스트
작성자	홍길동
날짜	2023-10-01

위의 데이터를 EJS를 사용하여 다음과 같이 동적으로 출력할 수 있습니다:

        <h2><%= post.title %></h2>
        <p>작성자: <%= post.author %></p>
        <p>작성일: <%= post.date %></p>

사례 2: 사용자 프로필 페이지

이번에는 사용자 프로필 페이지를 생성해보겠습니다. 사용자의 정보를 데이터베이스에서 받아와 EJS를 통해 동적으로 표시합니다. 사용자는 자신의 이름, 이메일 및 프로필 사진을 업데이트할 수 있습니다.

카테고리	내용
이름	김철수
이메일	cheolsu@example.com
프로필 사진	<img src="profile.jpg" alt="프로필 사진">

EJS 템플릿을 사용하여 이는 다음과 같이 표현할 수 있습니다:

        <h2>사용자: <%= user.name %></h2>
        <p>이메일: <%= user.email %></p>
        <img src="<%= user.profilePicture %>" alt="프로필 사진">

사례 3: 쇼핑몰 제품 목록

마지막으로 쇼핑몰의 제품 목록 페이지를 생성해보겠습니다. 이 페이지에서는 여러 제품을 동적으로 나열하며, 사용자는 각 제품의 세부정보를 확인할 수 있습니다.

제품명	가격	상세보기
스마트폰	500,000원	<a href="product1.html">보기</a>
노트북	1,200,000원	<a href="product2.html">보기</a>

이와 같은 제품 정보를 EJS 템플릿을 통해 다음과 같이 동적으로 출력할 수 있습니다:

        <%= products.map(product => { </br>
            return `<tr><td><%= product.name %></td><td><%= product.price %></td><td><a href="product.html?id=<%= product.id %>">상세보기</a></td></tr>`;
        }).join('') %>

실용적인 팁 5가지

1. EJS의 조건문 활용하기

EJS에서는 JavaScript의 조건문을 사용할 수 있습니다. 이를 통해 특정 조건에 따라 다른 내용을 출력할 수 있습니다. 예를 들어, 사용자가 로그인 상태인지 확인하고, 로그인 상태에 따라 다른 메시지를 출력하는 것이 가능합니다.

2. EJS의 반복문 활용하기

배열을 반복하여 동적으로 콘텐츠를 생성할 때 EJS의 반복문을 활용할 수 있습니다. 예를 들어, 제품 목록을 배열로 관리하고, 이를 EJS에서 반복문으로 돌려서 HTML을 생성할 수 있습니다. 이는 코드의 재사용성을 높여줍니다.

3. 레이아웃 관리하기

EJS는 레이아웃을 관리하기 용이합니다. 공통적으로 사용하는 헤더, 푸터 등을 별도의 파일로 만들어서 필요할 때마다 포함시킬 수 있습니다. 이를 통해 코드의 중복을 줄이고 유지 보수를 쉽게 할 수 있습니다.

4. 데이터 검증하기

사용자가 입력한 데이터는 항상 검증해야 합니다. EJS를 통해 사용자 입력을 동적으로 처리할 때, 서버에서 유효성을 검사하고, 잘못된 입력에 대한 피드백을 사용자에게 제공하는 것이 중요합니다.

5. 보안 고려하기

EJS를 사용할 때는 XSS(크로스 사이트 스크립팅) 공격에 주의해야 합니다. 사용자 입력을 HTML로 출력할 때 자동으로 이스케이프 처리가 되지 않으므로, 필요할 경우 수동으로 이스케이프 처리를 해주어야 합니다.

요약 및 실천 팁

Node.js와 EJS를 활용하면 동적인 웹페이지를 쉽게 생성할 수 있습니다. 이 글에서 소개한 사례를 통해 EJS의 기본 사용법을 이해하고, 실용적인 팁을 통해 더 나은 웹 애플리케이션을 개발할 수 있습니다. 이를 바탕으로 여러분의 프로젝트에 Node.js와 EJS를 적용해 보세요.

실천 팁: 간단한 프로젝트를 하나 선택하여 Node.js와 EJS를 사용해 웹페이지를 만들어보세요. 예를 들어, 개인 블로그나 간단한 쇼핑몰 페이지를 구현해보면 좋습니다. 이 과정에서 배운 내용들을 실질적으로 적용해보는 것이 중요합니다.

excel_world