[Node js Express js] GET, POST 요청 처리하기 예제

안녕하세요 한주현 입니다!

오늘은 간단한 예제를 통해 Node.js , Express 에서 GET, POST 요청에 대한 처리를 해보겠습니다.

들어가며

우리가 Node.js Express 로 만들고 싶은것은 다음과 같습니다.

1) <form> 에 텍스트를 받는 <input>

2) <form> 을 전송하는 submit 버튼

3) submit 으로 전송된 데이터를 표현하는 페이지

세 가지 사항을 GET 과 POST 로 구현한다.

1. npm init 으로 package.json 만들기

npm init 으로 package.json 을 만듭시다.

저는 app 이름을 get_post_nodejs 라고 했습니다.

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
$ npm init
 
This utility will walk you through creating a package.json file.
 
It only covers the most common items, and tries to guess sensible defaults.
 
 
 
See `npm help json` for definitive documentation on these fields
 
and exactly what they do.
 
 
 
Use `npm install <pkg> --save` afterwards to install a package and
 
save it as a dependency in the package.json file.
 
 
 
Press ^C at any time to quit.
 
name: (get_post_nodejs) 
 
version: (1.0.0) 
 
description: 
 
entry point: (index.js) 
 
test command: 
 
git repository: 
 
keywords: 
 
author: 
 
license: (ISC) 
 
About to write to /.../package.json:
 
 
 
{
 
  "name": "get_post_nodejs",
 
  "version": "1.0.0",
 
  "description": "",
 
  "main": "index.js",
 
  "scripts": {
 
    "test": "echo \"Error: no test specified\" && exit 1"
 
  },
 
  "author": "",
 
  "license": "ISC"
 
}
 
 
 
 
 
Is this ok? (yes) 
 
 

2. Express 설치

아래와 같이 Express 를 설치 해 줍니다.

아래 명령어들을 실행해주면 뭔가 많이 나옵니다 ㅎㅎ..

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
$ npm install express --save
 
... 과정 생략 ...
 
 
$ express --view=ejs myapp
 
... 과정 생략 ...
 
 
$ cd myapp
 
$ npm install
... 과정 생략 ...
 

$ DEBUG=myapp:* npm start
 
 
 
> myapp@0.0.0 start /.../get_post_nodejs/myapp
 
> node ./bin/www
 
 
 
  myapp:server Listening on port 3000 +0ms
 
GET / 200 21.365 ms - 207
 
GET /stylesheets/style.css 200 9.256 ms - 111
 
GET /favicon.ico 404 6.433 ms - 1226
 
GET / 304 1.679 ms - -
 
GET /stylesheets/style.css 304 1.988 ms - -

설치가 다 되면

DEBUG=myapp:* npm start

로 실행해줍니다.

그리고 브라우저에서

localhost:3000 에 접속하시면

그럼 이렇게 결과 페이지를 볼 수 있습니다.

간혹 Port 3000 is already in use 라고 오류가 나는 경우가 있는데,

말 그대로 시스템에서 3000 번 포트를 사용중에 있어서 오류가 난 것입니다.

그래서 서버를 시작할 때 3000 번 말고 다른 포트로 시작하도록 바꿔주면 됩니다.

bin 아래의 www 를 수정할 것 입니다.

├── app.js

├── bin

│ └── www

├── node_modules

... 생략

bin/www

var port = normalizePort(process.env.PORT || '3000');

여기서 3000 을 8000 과 같이 사용하지 않는 숫자로 바꿔주시면 됩니다.

3. GET, POST 라우트, 뷰 만들기

3-1) app.js 수정하기

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var express = require('express');
 
... 중략 ...
 
 
 
var index = require('./routes/index');
var get_page = require('./routes/get_page');  // 추가된 코드
var post_page = require('./routes/post_page');  // 추가된 코드
var users = require('./routes/users');
... 중략 ...
 
 
 
app.use('/', index);
app.use('/get_page', get_page);  // 추가된 코드
app.use('/post_page', post_page);  // 추가된 코드
app.use('/users', users);
 

3-2) 라우트 만들기

views/get_page.ejs

1
2
3
4
5
6
7
8
9
10
11
var express = require('express'); 
var router = express.Router();
 
 
router.get('/', function(req, res, next) {
    res.render('get_page', { title: 'Express' });
});
 
 
module.exports = router;
 

views/post_page.ejs

1
2
3
4
5
6
7
8
9
10
11
var express = require('express'); 
var router = express.Router();
 
 
router.get('/', function(req, res, next) {
    res.render('post_page', { title: 'Express' });
});
 
 
module.exports = router;
 

3-3) 뷰 만들기

views/get_page.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html> 
<html>
    <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
        <div>GET test</div>
        <form action="/result_page" method="get">
            <input type="text" name="id" placeholder="Enter id here">
            <input type="text" name="age" placeholder="Enter age here">
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

views/post_page.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html> 
<html>
    <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
        <div>POST test</div>
        <form action="/result_page" method="post">
            <input type="text" name="id" placeholder="Enter id here">
            <input type="text" name="age" placeholder="Enter age here">
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

4. GET POST 를 받아줄 result_page 페이지 만들기

4-1) app.js 수정하기

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var express = require('express');
 
... 중략 ...
 
 
var index = require('./routes/index');
var get_page = require('./routes/get_page');
var post_page = require('./routes/post_page');
var result_page = require('./routes/result_page');  // 추가된 코드
var users = require('./routes/users');
... 중략 ...
 
 
 
app.use('/', index);
app.use('/get_page', get_page);
app.use('/post_page', post_page);
app.use('/result_page', result_page);  // 추가된 코드
app.use('/users', users);
 

4-2) 라우트 만들기

routes/result_page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var express = require('express');
var router = express.Router();
var bodyParser = require('body-parser');
 
/* GET */
router.get('/', function(req, res, next) {
    var id = req.query.id;
    var age = req.query.age;
    console.log("## get request");
    res.render('result_page', { title: 'Express', id: id, age: age, method: "get" });
});
 
/* POST */
router.post('/', function(req, res, next) {
    var id = req.body.id;
    var age = req.body.age;
    console.log("## post request"); 
    res.render('result_page', { title: 'Express', id: id, age: age, method: "post" });
});
 
module.exports = router;

4-3) 뷰 만들기

view/result_page.ejs

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html> 
<html>
    <head>
        <title><%= title %></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
    </head>
    <body>
        <h2><%= method %> result page</h2>
        <p>id: <%= id %></p>
        <p>age: <%= age %></p>
    </body>
</html>

5. 실행

$ DEBUG=myapp:* npm start

를 실행하면 콘솔에 아래와 같이 결과가 나옵니다.

1
2
3
4
> myapp@0.0.0 start /.../get_post_nodejs/myapp
> node ./bin/www
 
myapp:server Listening on port 3000 +0ms

5-1) localhost:3000/get_page 접속

브라우저에 localhost:3000/get_page 에 접속하면 아래와 같이 나옵니다.

그리고 콘솔에는 아래와 같이 나옵니다.

1
2
GET /get_page 200 1.714 ms - 411
GET /stylesheets/style.css 304 2.449 ms - -

내용을 채우고 Submit 버튼을 누르면 ...

이렇게 결과 페이지로 넘어가게 됩니다 ㅎㅎ

그리고 콘솔에는 아래와 같이

## get request

가 출력됩니다.

5-2) localhost:3000/post_page 접속

브라우저에 localhost:3000/post_page 에 접속하면 아래와 같이 나옵니다.

그리고 콘솔에는 아래와 같이 나온다

1
2
GET /post_page 200 1.255 ms - 413
GET /stylesheets/style.css 304 2.150 ms - -

내용을 채우고 Submit 버튼을 누르면

이렇게 결과 페이지로 넘어갑니다 ㅎㅎ !!!

그리고 콘솔에는 아래와 같이

## post request

가 출력됩니다 ㅎㅎ!!!

6. 언제 GET 과 POST 를 사용하는가?

GET 과 POST 의 차이점이 무엇인가?

언제 GET 과 POST 를 사용하는가?

사실 이 질문은 간단한 면접 질문으로도 좋은 질문이라고 생각합니다 ㅎㅎ..

이곳 저곳 주워들은 지식으로 한 번 써보자면..

1) GET 은 주소에 값이 나오고 POST 는 주소에 값이 나타나지 않습니다.

2) 그래서 간단한 텍스트 값들은 GET 으로 넘겨도 되나 너무 긴 내용은 POST 로 넘겨야 합니다.

3) 또한 그림파일과 같이 binary 형태의 데이터는 GET 보다는 POST 로 넘겨야 합니다.

오늘은 node.js , express 의 GET, POST 요청 처리를 알아보았습니다.

여러분께 도움이 되셨음 좋겠네요 ㅎㅎ

그럼 다음에 만나요~

기부 버튼을 만들었습니다

여러분들의 작은 정성이 저에게 큰 힘이 됩니다

기부해주신 분들을 기억하며

더 좋은 내용으로 보답해 드리겠습니다 :)

Donate 버튼은 paypal 결제로 paypal 계정이 없으시더라도

카드로도 기부 가능하십니다 :)

Use your credit card or bank account (where available). 옆의 continue 를 누르시면 됩니다

한주현 드림

저작자표시 비영리 변경금지

'컴퓨터 > Node.js' 카테고리의 다른 글

Node.js 에서 client 로 부터 command 받아 shell 에서 실행하기 (3)	2017.07.02

생물정보학자의 블로그

[Node js Express js] GET, POST 요청 처리하기 예제 - Express js 앱 만들기

'컴퓨터 > Node.js' 카테고리의 다른 글

댓글

티스토리툴바

[Node js Express js] GET, POST 요청 처리하기 예제 - Express js 앱 만들기

'컴퓨터 > Node.js' 카테고리의 다른 글

관련글

댓글

티스토리툴바