지구정복
[Node.js] 02/25 | express(route기능 분리, static이용해서 정적파일사용, template엔진 사용(ejs, 구구단), generator 사용) 본문
[Node.js] 02/25 | express(route기능 분리, static이용해서 정적파일사용, template엔진 사용(ejs, 구구단), generator 사용)
eeaarrtthh 2021. 2. 25. 16:50복습 및 배울내용
* JSP는 웹서버가 필요 - 톰캣 (구형언어)
JSP의 결과
- *.jsp 초보들은 하드코딩
- spring / model2로 만드는 것이 완결판
* es와 python은 내장 웹서버가 있음 (최신언어)
es
- express
python
- django사용
* express 배우는 것
1. 서버시작법
app.listen( 3000, () => {
console.log( '3000번 포트 요청 대기중' );
});
2. 컨트롤러 기능 -> 라우팅 사용방법
app.all( '요청경로', (req, res) => {
res.send( '처리내용' );
)};
app.get 또는 post( '요청경로', (req, res) => {
res.send( '처리내용' );
)};
3. 미들웨어(중간처리역할)
app.use - next()
? : 문자존재하거나 생략
+ : 1번 이상 반복
* : 임의의 문자
1. express 사용하기
1. Router 기능 분리해서 사용하기
"use strict"
const express = require( 'express' );
const app = express();
const router = express.Router(); //router기능분리
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
//요청사항 작성 callback함수 따로 정의
const sayHello = (req, res) => {
res.send( 'Hello Router' );
}
router.get( '/hello', sayHello );위에 처럼 router를 분리한다음 콜백함수를 따로 정의해서 사용할 수 있다.
이번에는 아예 라우터 부분을 다른 js파일에 작성하고 불러와서 사용할 수 있다.
-router1.js
"use strict"
const express = require( 'express' );
const router = express.Router();
const sayHello = (req, res) => {
res.send( 'Hello Router' );
}
router.get( '/hello', sayHello );
//router라는 변수로 exports시켜서 외부에서 사용할 수 있도록한다.
module.exports = router;-express7.js (실행)
"use strict"
const express = require( 'express' );
const app = express();
//외부js router1 사용하기
app.use( require( './router1' ) );
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
2. static이용해서 정적파일(이미지, html, css, js) 읽어오기
정적파일이 들어있는 경로를 static메서드를 이용해 설정해주면 url상에서 해당 경로의 정적파일을 볼 수 있다.
먼저 express1 패키지에 public이란 디렉터리를 하나 만들어준다. 그리고 그 안에 html이란 디렉터리를 만든다.
-hello.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>hello.html</h1>
</body>
</html>-static1.js
"use strict"
const express = require( 'express' );
const app = express();
//'public/html'경로를 설정
app.use( express.static( 'public/html' ) );
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
public/hello 디렉터리에 모든 정적파일을 브라우저 url에 적으면 가져올 수 있다.
지금은 hello.html 은 가져와본다.
이번에는 이미지 파일을 출력해보자. 아무 이미지를 사용해도 상관없다.
필자는 phantomex1 패키지에 있는 이미지를 현재 디렉터리로 가져온다.
[master@localhost ~]$ cp ./phantomex1/google.png ./express1/public/html/그리고 정적파일명은 url상에 적어준다.
이번에는 정적파일이 들어있는 디렉터리를 가상디렉터리로 설정할 수 있다.
가상디렉터리를 static이라고 해보자.
"use strict"
const express = require( 'express' );
const app = express();
//app.use( '/가상디렉터리', express.static( '실제디렉터리' ) );
app.use( '/static', express.static( 'public/html' ) );
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
브라우저에서 앞에 static을 붙여줘야지 정적파일들이 보인다.
3. Express와 템플리트 엔진 사용하기
템플릿언어란 html문서에 중괄호( {변수} )로 감싸진 변수가 있다면 그 안에 변수는 서버에서 보내주는 값으로 대체되어 화면에 출력된다. express에서 이를 가능하게 해주는 모듈이 템플릿 엔진이다. 이를 이용해 html을 동적으로 생성할 수 있다.
template 엔진은 ejs와 pug(jade)로 나눠진다.
3.1 ejs 사용하기
ejs는 아래 사이트 참고한다.
ejs.co/
EJS -- Embedded JavaScript templates
Simple syntax JavaScript code in simple, straightforward scriptlet tags. Just write JavaScript that emits the HTML you want, and get the job done!
ejs.co
ejs는 서버에서 자바스크립트로 html을 생성하는 템플릿 엔진의 하나이다.
<%= EJS %> 라고 적으면 특정 데이터로 치환해준다.
ejs에서 사용하는 태그 중 중요한 두 가지는 다음과 같다.
<% %> : 자바스크립트 언어 실행태그 (for문, if문 등)
<%= %> : 변수 출력태그 (서버에서 넘어오는 변수를 출력할 때 사용하는 태그)
또한 주의할 점으로 ejs로 데이터를 넘겨줄때는 무조건 객체화해서 순수 데이터만 전달할 수 있다.
html문서를 만들기 위해서 문자열로 넘겨주면 인식하지 못한다.
또한 ejs가 적용될 html의 확장자명은 .ejs가 되어야 한다.
실제로 사용해보도록 하자. 먼저 패키지를 만들고 express와 ejs를 설치한다.
[master@localhost ~]$ mkdir ejs1
[master@localhost ~]$ cd ejs1/
[master@localhost ejs1]$ npm init -y
[master@localhost ejs1]$ npm install express
[master@localhost ejs1]$ npm install ejs
비주얼스튜디오 코드에서 ejs 패키지를 열고 아래처럼 작성한다.
먼저 people 배열의 값을 ,(컴마)와 합쳐서 html을 만들 수 있다.
"use strict"
const ejs = require( 'ejs' );
//people객체를 넘겨준다.
const people = [ 'greddy', 'neail', 'alex' ];
const html = ejs.render( '<%= people.join(", "); %>', { people: people } );
console.log( html );
템플릿 엔진을 이용해서 웹페이지를 만들어 보자.
먼저 아무 이미지 3개를 ejs1패키지 안에 넣는다.
그리고 ejs에서 정적파일을 불러오려면 express의 static을 사용해줘야 한다.
ejs1 패키지에 views 디렉터리를 만든다.
-server.js
"use strict"
const express = require( 'express' );
const app = express();
// ejs 설정
app.set( 'views', __dirname + '/views' );
app.set( 'view engine', 'ejs' );
//ejs에서 정적파일을 가져오려면 static을 사용해야 한다.
app.use( express.static( './' ) );
const data = [
{ title: 'cat1', image: 'google1.png' },
{ title: 'cat2', image: 'google2.png' },
{ title: 'cat3', image: 'google3.png' }
]
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
//cat.ejs파일 읽어들이기
app.get( '/', (req, res) => {
res.render( 'cat', { title: 'Cats', cats: data } );
})-views/cat.ejs (확장자명은 .ejs를 사용해야 한다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>cat.ejs</h1>
<hr><br>
title : <%= title %><br>
result : <%= cats.length %><br>
<% cats.forEach( (item) => { %>
<li>
<img src="image/<%= item.image %>">
<%= item.title %>
</li>
<% }); %>
</body>
</html>
실습) ejs를 이용하여 구구단 출력하기
아래와 같이 만들어보자.
-gugudan.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h2><%= title %></h2>
<hr>
<form action="./gugudan_ok" method="post">
단수 입력 <input type="text" name="dan" />
<input type="submit" value="구구단 출력" />
</form>
</body>-gugudan_ok.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h2><%= title %></h2>
<hr>
<table border="1">
<tr align="center">
<% html.forEach( item => { %>
<td><%= item.dan %> X <%= item.i %> = <%= item.result %></td>
<% }); %>
</tr>
</table>
</body>-gugudan1.js
"use strict"
const fs = require( 'fs' );
const express = require( 'express' );
const app = express();
app.set( 'views', __dirname + '/views' );
app.set( 'view engine', 'ejs' );
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
app.get( '/gugudan', (req, res) => {
res.render( 'gugudan', { title: 'gugudan.ejs' } );
})
app.post( '/gugudan_ok', (req, res) => {
console.log( req.query.dan );
let result = [];
for( let i=1; i<=9; i++ ) {
let obj = {}
obj.dan = req.body.dan;
obj.i = i;
obj.result = parseInt( req.body.dan ) * i;
result.push( obj );
}
res.render( 'gugudan_ok', { title: 'gugudan_ok.ejs', html: result } );
})
페이지가 복잡해질 경우를 위해 일반적으로는 server.js와 main.js 그리고 ejs문서들을 분리해서 디렉터리에 저장해서 사용한다.
이를 위해 ejs2란 패키지를 만들고 routes 디렉터리와 views 디렉터리를 만든다.
routes안에는 main.js가 있고 컨트롤러 역할을 한다.
views 디렉터리 안에는 html이나 ejs 파일을 만든다.
실행순서는 node server.js를 하면 server.js가 실행되고 server.js는 라우터인 main.js를 호출한다.
main.js는 들어오는 인자에 따라 어떤 ejs파일을 실행할지 결정한다.
-gugudan.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
Hello <%= title %>
</body>
</html>-gugudan_ok.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
Hello <%= title %>
</body>
</html>-main.js
"use strict"
module.exports = (app) => {
app.all( '/gugudan', (req, res) => {
const data = 'gugudan';
res.render( 'gugudan', { title: data } );
})
app.all( '/gugudan_ok', (req, res) => {
const data = 'gugudan_ok';
res.render( 'gugudan', { title: data } );
})
}-server.js
"use strict"
const express = require( 'express' );
const app = express();
const route = require( './routes/main' )( app ); //인자로 app을 가지고 들어간다.
app.set( 'views', __dirname + '/views' );
app.set( 'view engine', 'ejs' );
app.use( express.static( 'public' ) );
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
package.json에 node 명령어를 입력시키고 실행시킬수 있다.
"scripts" 에서 "start"부분을 추가한다.
-package.json
{
"name": "ejs2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js" <----여기
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"ejs": "^3.1.6",
"express": "^4.17.1"
}
}
터미널에서 npm start만 하면 저절로 server.js가 실행된다.
server.js에서 css를 적용시킬 수 있다.
ejs2 패키지에 public/css란 디렉터리를 만들고 그 안에 style.css 파일을 만든다.
-style.css
body {
background-color: gray;
color: white;
}브라우저에서 실행하면 다음과 같이 적용된다.
또한 html문서의 중복되는 내용을 따로 ejs파일을 만들어서 사용할 수 있다.
views디렉터리 안에 header.ejs와 footer.ejs를 만들고 중복되는 html을 작성해준다.
이때 ejs 명령어는 <%- include( '가져올ejs경로' ) %> 를 사용한다.
-hearder.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>-footer.ejs
</html>-gugudan.ejs
<%- include( './header.ejs' ) %>
<body>
Hello <%= title %>
</body>
<%- include( './footer.ejs' ) %>-gugudan_ok.ejs
<%- include( './header.ejs' ) %>
<body>
Hello <%= title %>
</body>
<%- include( './footer.ejs' ) %>동일하게 실행되는 것을 확인할 수 있다.
4. express 애플리케이션 생성기(generator)
현재 server설정, main설정 및 각종 ejs 설정하고 사용하는 것이 복잡하므로 이를 자동적으로 처리하는 모듈이 genertor이다.
설치시 npm install express-generator -g 에서 -g가 있으면 root계정이 실행을 해야 한다.
실행을 할 때는 npm start만 써주면 되는데 이 이유는 package.json에 어떤 파일을 시작해야하는지 설정되어 있기 때문이다.
[master@localhost ~]$ su - root
암호:
[root@localhost ~]# npm i -g express-generator
[root@localhost ~]# exit
#sanple이란 프로젝트를 만드는데 ejs를 사용한다는 뜻
[master@localhost ~]$ express sample --view=ejs
[master@localhost ~]$ cd sample
#package.json에 필요한 모듈들이 적혀있어서 npm install 만 치면 알아서 설치된다.
[master@localhost sample]$ npm install
#시작하기
[master@localhost sample]$ npm start이제 브라우저에서 3000번 포트를 보면 실행이된다.
먼저 views에 gugudan.ejs와 gugudan_ok.ejs를 만들고
routes에 gugudans.js를 만든다.
수정할 파일은 아래에 표시한 4개 파일이다.
-gugudan.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>gugudan.ejs</h1>
<hr><br>
<form action="gugudan_ok" method="post">
단수 : <input type="text" name="dan">
<input type="submit" value="전송">
</form>
</body>
</html>-gugudan_ok.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>gugudan_ok.ejs</h1>
<hr><br>
result : <%= result %>
</body>
</html>-app.js ( 여기 라고 써져있는 부분 수정 )
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
//var usersRouter = require('./routes/users');
var gugudansRouter = require( './routes/gugudans' ); //-------------여기
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
//app.use('/users', usersRouter);
app.use('/gugudans', gugudansRouter); //-------------여기
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
-gugudans.js
var express = require('express');
var router = express.Router();
router.get('/gugudan', function(req, res, next) {
//res.send('/gugudans/gugudan');
res.render( 'gugudan' );
});
router.post('/gugudan_ok', function(req, res, next) {
//res.send('/gugudans/gugudan_ok');
// res.render( 'gugudan_ok' );
const result = req.body.dan;
console.log( result );
res.render( 'gugudan_ok', { result : result } );
});
module.exports = router;
터미널에서 아래와 같이 실행시킨다.
[master@localhost sample]$ npm start
