생활코딩

Coding Everybody

코스 전체목록

닫기
WEB
DATABASE
언어
클라이언트
서버
데이터 과학
개발도구
프로젝트 관리
기타

Express 미들웨어의 사용

수업소개

여기서는 미들웨어의 개념을 소개하고, 타인이 만든 미들웨어를 사용하는 방법을 알아봅니다. 

 

 

 

강의 1

body-parser를 이용해서 post 방식으로 전송된 form 데이터를 쉽게 가져오는 방법을 살펴보겠습니다. 

 

 

 

소스코드

변경사항

main.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
var express = require('express')
var app = express()
var fs = require('fs');
var path = require('path');
var qs = require('querystring');
var bodyParser = require('body-parser');
var sanitizeHtml = require('sanitize-html');
var template = require('./lib/template.js');
app.use(bodyParser.urlencoded({ extended: false }));
//route, routing
//app.get('/', (req, res) => res.send('Hello World!'))
app.get('/', function(request, response) {
fs.readdir('./data', function(error, filelist){
var title = 'Welcome';
var description = 'Hello, Node.js';
var list = template.list(filelist);
var html = template.HTML(title, list,
`<h2>${title}</h2>${description}`,
`<a href="/create">create</a>`
);
response.send(html);
});
});
app.get('/page/:pageId', function(request, response) {
fs.readdir('./data', function(error, filelist){
var filteredId = path.parse(request.params.pageId).base;
fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
var title = request.params.pageId;
var sanitizedTitle = sanitizeHtml(title);
var sanitizedDescription = sanitizeHtml(description, {
allowedTags:['h1']
});
var list = template.list(filelist);
var html = template.HTML(sanitizedTitle, list,
`<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
` <a href="/create">create</a>
<a href="/update/${sanitizedTitle}">update</a>
<form action="/delete_process" method="post">
<input type="hidden" name="id" value="${sanitizedTitle}">
<input type="submit" value="delete">
</form>`
);
response.send(html);
});
});
});
app.get('/create', function(request, response){
fs.readdir('./data', function(error, filelist){
var title = 'WEB - create';
var list = template.list(filelist);
var html = template.HTML(title, list, `
<form action="/create_process" method="post">
<p><input type="text" name="title" placeholder="title"></p>
<p>
<textarea name="description" placeholder="description"></textarea>
</p>
<p>
<input type="submit">
</p>
</form>
`, '');
response.send(html);
});
});
app.post('/create_process', function(request, response){
var post = request.body;
var title = post.title;
var description = post.description;
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.writeHead(302, {Location: `/?id=${title}`});
response.end();
});
});
app.get('/update/:pageId', function(request, response){
fs.readdir('./data', function(error, filelist){
var filteredId = path.parse(request.params.pageId).base;
fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
var title = request.params.pageId;
var list = template.list(filelist);
var html = template.HTML(title, list,
`
<form action="/update_process" method="post">
<input type="hidden" name="id" value="${title}">
<p><input type="text" name="title" placeholder="title" value="${title}"></p>
<p>
<textarea name="description" placeholder="description">${description}</textarea>
</p>
<p>
<input type="submit">
</p>
</form>
`,
`<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
);
response.send(html);
});
});
});
app.post('/update_process', function(request, response){
var post = request.body;
var id = post.id;
var title = post.title;
var description = post.description;
fs.rename(`data/${id}`, `data/${title}`, function(error){
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.redirect(`/?id=${title}`);
})
});
});
app.post('/delete_process', function(request, response){
var post = request.body;
var id = post.id;
var filteredId = path.parse(id).base;
fs.unlink(`data/${filteredId}`, function(error){
response.redirect('/');
});
});
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
});

 

 

 

강의 2

compression 미들웨어를 이용해서 컨텐츠를 압축해서 전송하는 방법을 살펴보겠습니다. 

 

 

 

소스코드 

변경사항

main.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
var express = require('express')
var app = express()
var fs = require('fs');
var path = require('path');
var qs = require('querystring');
var bodyParser = require('body-parser');
var sanitizeHtml = require('sanitize-html');
var compression = require('compression')
var template = require('./lib/template.js');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(compression());
//route, routing
//app.get('/', (req, res) => res.send('Hello World!'))
app.get('/', function(request, response) {
fs.readdir('./data', function(error, filelist){
var title = 'Welcome';
var description = 'Hello, Node.js';
var list = template.list(filelist);
var html = template.HTML(title, list,
`<h2>${title}</h2>${description}`,
`<a href="/create">create</a>`
);
response.send(html);
});
});
app.get('/page/:pageId', function(request, response) {
fs.readdir('./data', function(error, filelist){
var filteredId = path.parse(request.params.pageId).base;
fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
var title = request.params.pageId;
var sanitizedTitle = sanitizeHtml(title);
var sanitizedDescription = sanitizeHtml(description, {
allowedTags:['h1']
});
var list = template.list(filelist);
var html = template.HTML(sanitizedTitle, list,
`<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
` <a href="/create">create</a>
<a href="/update/${sanitizedTitle}">update</a>
<form action="/delete_process" method="post">
<input type="hidden" name="id" value="${sanitizedTitle}">
<input type="submit" value="delete">
</form>`
);
response.send(html);
});
});
});
app.get('/create', function(request, response){
fs.readdir('./data', function(error, filelist){
var title = 'WEB - create';
var list = template.list(filelist);
var html = template.HTML(title, list, `
<form action="/create_process" method="post">
<p><input type="text" name="title" placeholder="title"></p>
<p>
<textarea name="description" placeholder="description"></textarea>
</p>
<p>
<input type="submit">
</p>
</form>
`, '');
response.send(html);
});
});
app.post('/create_process', function(request, response){
var post = request.body;
var title = post.title;
var description = post.description;
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.writeHead(302, {Location: `/?id=${title}`});
response.end();
});
});
app.get('/update/:pageId', function(request, response){
fs.readdir('./data', function(error, filelist){
var filteredId = path.parse(request.params.pageId).base;
fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
var title = request.params.pageId;
var list = template.list(filelist);
var html = template.HTML(title, list,
`
<form action="/update_process" method="post">
<input type="hidden" name="id" value="${title}">
<p><input type="text" name="title" placeholder="title" value="${title}"></p>
<p>
<textarea name="description" placeholder="description">${description}</textarea>
</p>
<p>
<input type="submit">
</p>
</form>
`,
`<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
);
response.send(html);
});
});
});
app.post('/update_process', function(request, response){
var post = request.body;
var id = post.id;
var title = post.title;
var description = post.description;
fs.rename(`data/${id}`, `data/${title}`, function(error){
fs.writeFile(`data/${title}`, description, 'utf8', function(err){
response.redirect(`/?id=${title}`);
})
});
});
app.post('/delete_process', function(request, response){
var post = request.body;
var id = post.id;
var filteredId = path.parse(id).base;
fs.unlink(`data/${filteredId}`, function(error){
response.redirect('/');
});
});
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
});

 

package.json

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
"name": "web2-nodejs",
"version": "1.0.0",
"description": "",
"main": "main.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/web-n/Nodejs.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/web-n/Nodejs/issues"
},
"homepage": "https://github.com/web-n/Nodejs#readme",
"dependencies": {
"body-parser": "^1.18.3",
"compression": "^1.7.2",
"express": "^4.16.3",
"sanitize-html": "^1.18.2"
}
}

 

댓글

댓글 본문
  1. qq
    미들웨어 개념 익히기
    답글
  2. 어흥
    230706
    답글
  3. Hojun Song
    2023-04-19
    답글
  4. 감자
    22.12.22.
    답글
  5. 감자
    22.12.22.
    답글
  6. 당당
    2022.11.17
    답글
  7. enty
    감사합니다
    답글
  8. 화려하게간다
    바디파서 유용하네~~~마!!!
    답글
  9. 케굴
    2022-01-02
    답글
  10. 트루트
    감사합니다.
    대화보기
      답글
    • ogod259
      express 4.16버전부터 body-parser가 내장되었기 때문에 따로 import 해주지 않으셔도 됩니다

      app.use(express.urlencoded({ extended: false }));
      답글
    • 이성민
      아래에 'bodyparser is not defined' 라고 오류 떠시는 분들은 맨 위 상단에 bodyparser 를 정의해 주시면 되는 것 같아요, 저두 이렇게 해결!.

      var bodyParser = require('body-parser');

      제가 혹시 틀리면 말씀해 주세요~~, ^^

      그리고 이고잉님!! 항상 감사드립니다~~^^
      답글
    • chimhyangmoo
      21.03.23
      답글
    • jeisyoon
      2021.03.14 Middleware 사용 - OK
      답글
    • 김지호
      21 01 08
      답글
    • 생활둘기
      2021 1 4
      답글
    • 콜라
      20201025 완료
      답글
    • Yong Hyun Lee
      완료 201003
      답글
    • 전주호
      완료
      답글
    • ldhan0715
      20-09-14
      답글
    • 쑤우
      수강완료. 감사합니다~
      답글
    • lmsds1
      body-parser설치가 안되시는분 계시나요? finalize 8에서 넘어가지 않고, 에러가 뜨네요.
      또한 Error: Cannot find module '../encodings' 이런 에러 뜨면서, 생성 및 수정 기능이 작동을 안하네요..
      답글 수정 삭제
    • lmsds1
      저는 왜 작동이 되지 않을까요.. 콘솔로 찍어봐도 req안에는 바디라는 속성이 없어서, undefined로 나오네요..
      대화보기
        답글 수정 삭제
      • 크라흐마
        2019-11-27현재 기준 express 사용시 bodyparser를 따로 요청하지않아도 request.body 호출이 가능합니다. 참고하세요
        답글 수정 삭제
      • 강다리
        저도 정확하게 아는건 아니지만 제가 아는선에서 말해볼게요 ..

        request.on('data' 의 'data'는 이벤트를 뜻합니다
        즉, 데이터가 들어왔을 때 발생하는 이벤트를 말하며
        콜백함수 내 data는 그 들어온 데이터를 가르키는 변수입니다.

        request.on('end' 의 'end'는 데이터의 입력이 끝났다는 이벤트라고 생각하시면
        둘의 차이를 아실거라고 생각됩니다.
        대화보기
          답글
        • 굼벵이
          완료
          답글 수정 삭제
        • express
          압축하는만큼 조금 더 느려지는거겠죠?
          답글
        • 지미츄
          윈도우로 캐시삭제 할때 favicon.ico 404 에러 뜨는건 어떻게 해결해야 할까요..
          답글 수정 삭제
        • 코베
          와 압축을 정말 간단하게 ..
          답글 수정 삭제
        • jo_onc
          와우! 압축 기능까지 엄청 간단하게 적용할 수 있네요!
          수업 감사합니다!
          답글 수정 삭제
        • 연수아빠
          middle ware를 사용하면 코딩이 심플해지고 매우 편리함을 체험하였습니다.
          답글
        버전 관리
        egoing
        현재 버전
        선택 버전
        공동공부
        graphittie 자세히 보기