hy30nq's blog

섹션 19: 더 많은 익스프레스: 템플릿을 사용한 정적 & 동적 콘텐츠(EJS) [50일차] 본문

Web/100일 코딩 챌린지 - Web Development

섹션 19: 더 많은 익스프레스: 템플릿을 사용한 정적 & 동적 콘텐츠(EJS) [50일차]

hy30nq 2024. 2. 2. 10:49
728x90





Nodemon 소개

Nodemon은 Node.js 애플리케이션을 개발할 때 매우 유용한 도구입니다. 소스 코드가 변경될 때마다 자동으로 Node.js 애플리케이션을 재시작해주는 명령줄 유틸리티입니다. 이를 통해 개발 과정에서 시간을 절약하고 생산성을 향상시킬 수 있습니다.

Nodemon 설치하기

Nodemon은 보통 개발 의존성(devDependencies)으로 설치됩니다. 이는 프로덕션 환경에서는 Nodemon이 필요하지 않기 때문입니다. 설치는 npm을 사용하여 다음과 같이 진행할 수 있습니다.

npm install nodemon --save-dev

이 명령어는 package.json 파일에 Nodemon을 개발 의존성으로 추가합니다. 따라서 다른 개발자가 프로젝트를 클론하고 npm install을 실행할 때 Nodemon도 함께 설치됩니다.

Nodemon으로 애플리케이션 실행하기

Nodemon을 사용하여 애플리케이션을 실행하기 위해서는 package.json 파일의 scripts 섹션에 실행 스크립트를 추가해야 합니다. 예를 들어, 애플리케이션의 진입점이 index.js라면, 다음과 같이 start 스크립트를 추가할 수 있습니다.

"scripts": {
  "start": "nodemon index.js"
}

이후, 터미널에서 다음 명령어를 실행하여 Nodemon을 통해 애플리케이션을 시작할 수 있습니다.

npm run start

이 명령어는 package.json에 정의된 start 스크립트를 실행합니다. 이 스크립트는 Nodemon을 사용하여 index.js 파일을 실행하며, 파일에 변경이 생길 때마다 애플리케이션을 자동으로 재시작합니다.

Nodemon의 주요 기능

  • 자동 재시작: 소스 코드 파일이 변경되면 자동으로 애플리케이션을 재시작합니다.
  • 커스텀 감시 파일 목록: 기본적으로 .js, .mjs, .coffee, .litcoffee, .json 파일의 변경을 감시하지만, nodemon.json 파일을 통해 감시할 파일 확장자를 커스텀할 수 있습니다.
  • 지연 재시작: 변경 사항이 여러 파일에 걸쳐 발생할 때, 모든 변경이 완료된 후 애플리케이션을 재시작하도록 지연 시간을 설정할 수 있습니다.

Nodemon은 Node.js 기반 프로젝트의 개발 효율성을 크게 향상시켜주는 도구입니다. 개발 과정에서의 빠른 피드백 루프는 개발자에게 매우 중요하며, Nodemon은 이러한 측면에서 큰 도움을 줍니다.





EJS란 무엇인가?

EJS(Embedded JavaScript templating)는 JavaScript를 사용한 간단한 템플릿 언어입니다. 서버 측에서 HTML을 생성할 때 JavaScript 코드를 HTML 템플릿에 삽입할 수 있게 해줍니다. EJS는 Node.js와 Express 프레임워크와 함께 사용되어 동적인 웹 페이지를 손쉽게 생성하고 서비스할 수 있게 합니다.

EJS의 주요 특징

  • 간단한 문법: HTML 내에 JavaScript 코드를 <% %> 태그로 감싸서 사용합니다.
  • 데이터 바인딩: 서버에서 받은 데이터를 HTML에 쉽게 바인딩하여 동적인 페이지를 생성할 수 있습니다.
  • 재사용 가능한 컴포넌트: 헤더, 푸터 등 웹 페이지의 일부분을 별도의 파일로 분리하여 재사용할 수 있습니다.
  • 컨트롤 플로우: 일반 JavaScript 조건문과 반복문을 사용하여 템플릿 내에서 로직을 처리할 수 있습니다.

EJS 사용 방법

1. EJS 설치

Node.js 프로젝트에서 EJS를 사용하기 위해 다음 명령어로 설치합니다.

npm install ejs
2. EJS 설정

Express 애플리케이션에서 EJS를 뷰 엔진으로 설정합니다.

const express = require('express');
const app = express();

app.set('view engine', 'ejs');
3. EJS 템플릿 작성

views 디렉토리 내에 .ejs 확장자를 가진 파일을 작성합니다. 예를 들어, index.ejs 파일을 생성하고 다음과 같이 작성할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>EJS Example</title>
</head>
<body>
  <h1>Welcome to EJS</h1>
  <% if (user) { %>
    <h2>Hello, <%= user.name %>!</h2>
  <% } else { %>
    <h2>Welcome, guest!</h2>
  <% } %>
</body>
</html>
4. EJS 렌더링

Express 라우트에서 .ejs 템플릿을 렌더링합니다.

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

EJS 예제

조건문 사용 예제
<% if (loggedIn) { %>
  <p>Welcome back, <%= user.name %>!</p>
<% } else { %>
  <p>Please log in.</p>
<% } %>
반복문 사용 예제
<ul>
  <% for(let i=0; i < users.length; i++) { %>
    <li><%= users[i].name %></li>
  <% } %>
</ul>
부분 뷰 포함 예제

헤더와 푸터를 별도의 파일(header.ejs, footer.ejs)로 관리하고, 메인 템플릿에서 포함시킬 수 있습니다.

header.ejs:

<header>
  <h1>Site Header</h1>
</header>

footer.ejs:

<footer>
  <p>© 2024 Site Name</p>
</footer>

메인 템플릿(index.ejs):

<%- include('header') %>
<h2>Main Content</h2>
<%- include('footer') %>

결론

EJS는 JavaScript 개발자에게 친숙한 문법과 간단한 설정으로 웹 애플리케이션의 동적인 뷰를 생성하는 강력한 도구입니다. Express와 함께 사용할 때, EJS는 효율적인 웹 개발 워크플로우를 제공하여 개발자가 보다 집중하고 생산적으로 작업할 수 있도록 돕습니다.

728x90

'Web > 100일 코딩 챌린지 - Web Development' 카테고리의 다른 글

섹션 20: 동적 라우트(URL), 오류 & 관리 처리하기 더 큰 Express 프로젝트 [52일차]  (0) 2024.02.02
섹션 20: 동적 라우트(URL), 오류 & 관리 처리하기 더 큰 Express 프로젝트 [51일차]  (0) 2024.02.02
섹션 19: 더 많은 익스프레스: 템플릿을 사용한 정적 & 동적 콘텐츠(EJS) [49일차]  (0) 2024.02.02
섹션 18: 익스프레스JS로 노드JS 향상 [48일차]  (0) 2024.01.30
섹션 17: 노드JS 소개 - 백엔드 개발 시작하기 [47일차]  (0) 2024.01.30
'Web/100일 코딩 챌린지 - Web Development' Related Articles more