nodejs

인프런 node.js 웹개발로 알아보는 백엔드

동영상 강좌를 통해 node.js를 학습하며 정리하는 포스팅입니다.

1. 요청 처리

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var express = require('express')
var app = express()

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

var bodyParser = require('body-parser')
var router = require('./router/index')

//서버 응답 json 또는 url로 올때 encode설정
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:true}))


app.get('/', function(req,res) {
  //res.sendFile(__dirname, "/public/main.html")
}

app.post('/email_post', function(req,res) {
  //body-parser를 통한 클라이언트 요청 데이터 추출
  console.log(req.body.email)
  res.send("post response")
}
  • post

    • app.post('url', function (req, res) {})
  • get

    • app.get('url', function (req, res) {})

2. View engine 응답 처리

  • 콘솔창에 명령어 입력 npm install ejs --save
1
app.set('view engine', 'ejs')

스크린샷 2019-10-10 오후 11 19 09

명령어 입력 후 ejs의 디펜던시가 추가된 것을 확인할 수 있습니다.

app.js

1
2
3
4
5
6
7
app.post('/form', function(req, res) {
    console.log(req.body.email)
    
    // response
    // 응답 로직 ('view 파일', {전달할 파라미터의 key:value})
    res.render('email.ejs', {'email' : req.body.email})
})

email.ejs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ejs template</title>
</head>
<body>
    <h1>Welcome ! <%= email %></h1><!-- 전달받은 파라미터를 활용 -->
</body>
</html>

3. JSON을 사용한 Ajax 처리

form.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<form action="/email/form" method="post">
        email : <input type="text" name="email"><br>
        <input type="submit">
</form>

<button class="ajaxSend">ajaxSend</button>

<div class="result"></div>

<script>
  document.querySelector('.ajaxSend').addEventListener('click', function() {
  var inputData = document.forms[0].elements[0].value;
  sendAjax("http://localhost:3000/ajax", inputData);
  })
</script>

function sendAjax

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var data = {'email' : data};
//문자열로 변환
data = JSON.stringify(data);
//URL로 보내기(method, url, data)
	var xhr = new XMLHttpRequest();
//Post로 url
	xhr.open('POST', url);
	xhr.setRequestHeader("Content-Type", "application/json");
//전송
	xhr.send(data);

JSON을 사용한 Ajax 기능을 구현하기 위해 서버에서 주고 받는 데이터의 형식은 문자열로 가능하기 때문에 JSON.stringify(data); 를 활용하여 문자열로 변환해줍니다.

이렇게 보내진 inputData는 app.js 파일에서 다음과 같이 요청을 받을 수 있습니다.

1
2
3
4
5
app.post('/ajax', function(req, res) {
	  var email = req.body.email;
	  var responseData = {'result':'ok', 'email':email}
	  res.json(responseData);
}

이후 json 형식으로 응답을 보내주고 이벤트가 발생 후 처리를 form.html에서 처리할 수 있습니다.

1
2
3
4
5
6
7
8
<script>
xhr.addEventListener('load', function() {
                var result = JSON.parse(xhr.responseText);
                var resultDiv = document.querySelector('.result');

  resultDiv.innerHTML = '<h1>ID : ' + result.email + '님 환영합니다.'
            });
</script>

클라이언트 view화면인 form.html에서 입력한 email 값은 app.js에서 key:value를 활용하여 처리한 데이터이며 이는 여러 입력 데이터를 배열 혹은 객체로도 처리할 수 있는 장점을 가지고 있습니다.

추가사항

static 지정

애플리케이션 구현시 필요한 css 및 자바스크립트와 같은 정적인 파일들을 요청을 받을때마다 자동으로 사용할 수 있도록 지정해주는 기능을 말합니다.

1
2
3
//static setting
//public 디렉토리내에 정적 파일을 저장
app.use(express.static('public'))