Node.js에서 Include 파일에 값 전달하는 방법

Node.js 개발 과정에서 효율적인 코드 관리를 위해 헤더(header)와 푸터(footer)와 같은 공통 요소를 별도의 파일로 분리하여 관리하는 경우가 많습니다. 특히, 템플릿 엔진을 사용할 때, 이러한 공통 요소 파일에 동적인 데이터를 전달해야 할 필요성이 생길 수 있습니다. 예를 들어, 로그인 상태에 따라 헤더에 표시되는 사용자 정보를 변경해야 할 때가 이에 해당합니다. 이 글에서는 Node.js의 템플릿 엔진 중 하나인 EJS를 사용하여 include 파일에 값을 전달하는 방법을 소개합니다.

 

 

데이터 전송 방법

Node.js에서 EJS 템플릿 엔진을 사용하여 include 파일에 값 전달하기는 간단합니다.

기본적으로 EJS에서는 <%- include('파일명', {키: 값}) %> 형태로 include 문을 작성하여 다른 파일을 포함시키고, 이때 객체 형태로 데이터를 전달할 수 있습니다.

 

값 전달 예시

메인 파일(main.ejs)에서 헤더 파일(header.ejs)을 include하고, 로그인 정보를 'info' 변수로 전달하는 예시는 다음과 같습니다.

page.ejs

<% var val = '로그인된 사용자 정보'; %>
<%- include('header', {info: val}) %>

 

이 경우, header.ejs 파일에서는 전달받은 'info' 변수를 다음과 같이 사용하여 동적인 내용을 표시할 수 있습니다.

header.ejs

<header>
    <div>사용자 정보: <%= info %></div>
</header>

 

주의사항

• include 문에서 전달하는 변수 이름과 include된 파일에서 사용하는 변수 이름이 일치해야 합니다.
• EJS 템플릿에서는 HTML 태그 내부뿐만 아니라 JavaScript 코드 블록(<% %> 안)에서도 변수를 사용할 수 있습니다.
• 변수에 HTML을 포함시킬 경우, <%- %>를 사용하여 출력하면 HTML이 렌더링됩니다.
• 반면, <%= %>를 사용하면 HTML 태그가 그대로 출력됩니다.

 

결론

Node.js에서 EJS 템플릿 엔진을 활용하여 include 파일에 동적인 값을 전달하는 방법은 애플리케이션의 유연성을 크게 향상시킵니다.

특히, 사용자 인증 정보나 현재 페이지 상태 같은 동적 데이터를 공통 요소에 전달하여 더욱 동적이고 상호작용적인 웹 페이지를 구성할 수 있습니다.

이 방법을 통해 코드의 재사용성을 높이고, 유지보수의 편의성을 개선할 수 있습니다.

 

함께보면 좋은글

[Nodejs] ejs 버전에 따른 include 에러, 버전 업데이트에 따른 해결 방법