728x90
반응형
이번 강의에서는 Node.js와 Express 환경에서 EJS 템플릿을 활용해 변수를 출력하고, 배열과 JSON 데이터를 다루며 동적인 웹페이지를 구현하는 방법을 실습합니다.
영상 먼저 보고 싶은 분은 클릭
https://www.youtube.com/watch?v=Y1UP1hRZ5lk
이 영상에서 다루는 내용
- EJS EJS 템플릿 개념 주요기능
- EJS 설치
- 프로젝트 폴더 EJS 환경에 적합한 폴더 구성
- EJS 기본 예제 실습
- EJS로 서버값 프론트엔드로 보내는 다양한 방법 실습
EJS 템플릿 설치 및 EJS 관련 기본 코딩
EJS 템플릿 설치
C:\mynodejs> npm install ejsExpress와 EJS 사용하기 위한 기본 코딩
const express = require('express'); // Express 모듈을 불러옴
const app = express(); // Express 애플리케이션 인스턴스 생성
app.set('view engine', 'ejs'); // Express에 EJS 연결
app.set('views', __dirname + '/views'); // views 폴더 지정
app.use(express.static(__dirname + '/public')); // publick 폴더 지정변수값 넘기고 EJS에서 받아서 처리하는 기본 예제 실습
app.js
const express = require('express'); // Express 모듈을 불러옴
const app = express(); // Express 애플리케이션 인스턴스 생성
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + '/public'));
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});
app.get('/', (req, res) => {
const user = "뒤죽박죽 코딩";
res.render('index', { username: user });
});index.ejs
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>안녕하세요, <%= username %>님!</h1>
</body>
</html>여러 변수 한번에 넘기기, 배열 및 JSON 타입 넘기기 실습
app.js
const express = require('express'); // Express 모듈을 불러옴
const app = express(); // Express 애플리케이션 인스턴스 생성
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + '/public'));
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});
// 여러 변수 한번에 넘기기
app.get('/hello', (req, res) => {
const user = "뒤죽박죽 코딩";
const addr = "서울 강남구 테헤란로";
res.render('hello', { username: user, address: addr });
});
// 배열 넘기기
app.get('/list', (req, res) => {
const fruitsList = ['사과', '바나나', '포도'];
res.render('list', { fruits: fruitsList });
});
// JSON 넘기기
app.get('/profile', (req, res) => {
const userInfo = { name: "홍길동", age: 30 };
res.render('profile', { user: userInfo });
});hello.ejs
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>안녕하세요, <%= username %>님!</h1>
<h1>주소는 <%= address %>입니다.</h1>
</body>
</html>list.ejs
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<ul>
<% fruits.forEach(function(fruit) { %>
<li><%= fruit %></li>
<% }); %>
</ul>
</body>
</html>profile.ejs
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<p>이름: <%= user.name %></p>
<p>나이: <%= user.age %></p>
</body>
</html>
728x90
반응형
'뒤죽박죽코딩 리뷰 > Node.js' 카테고리의 다른 글
| Node.js + Flowbite로 웹페이지 디자인 꾸미기 (0) | 2025.09.15 |
|---|---|
| Node.js + EJS + PostgreSQL 환경에서 DB 데이터로 동적 웹페이지 만들기 (0) | 2025.09.06 |
| Node.js와 Express로 웹서버 만들고 라우팅 실습하기 (2) | 2025.08.04 |
| Node.js와 포털사이트 웹메일 SMTP로 이메일 보내기! 지메일, 다음, 네이버 5분 완성 (2) | 2025.07.29 |
| Node.js와 SMTP로 이메일 보내기! nodemailer 실전 가이드 (2) | 2025.07.26 |