본문 바로가기
자바스크립트와 캔버스

Node.js - Part 12-3. 동적웹페이지 만들기

반응형

처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다.

https://itadventure.tistory.com/493

 

[전자책 출간!] 처음부터 시작하는 AWS와 Node.js ( express )

65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자

itadventure.tistory.com

오늘은 좀 내용이 길어요~

동적 웹페이지는 어떻게 만들면 되는 것일까요?
app.get() 함수를 사용하시면 되는데요. 정적 웹 선언오류처리 사이에 배치해 주시면 됩니다.

main.js 코드를 아래와 같이 수정해볼까요?

const express=require('express');
const app=express();
// public 폴더 하위의 파일들을 기본으로 서비스
app.use(express.static('public'));
 
app.get('/plus/:id/:id2', function (req, res, next) {
  let sum = parseInt(req.params.id)
    + parseInt(req.params.id2);
  res.send(sum.toString());
})
 
// 페이지를 찾을 없음 오류 처리
app.use(function(req, res, next) {
    res.status(404); 
    res.send(
    '<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">' +
    '<html><head><title>404 페이지 오류</title></head>' +
    '<body><h1>찾을 없습니다</h1>' +
    '<p>요청하신 URL ' + req.url + ' 서버에서 찾을 없습니다..</p><hr>' +
    '</body></html>'
  );
});
 
app.listen(8080, function() {});


node.js
서버를 재시작해 주세요. 이제 재시작 방법은 설명 안 드려도 아시겠지요?:)

하나의 동적 웹페이지가 추가되었는데요. 단순하지만 덧셈을 하는 웹 페이지입니다.
아래와 같이 URL 을 입력해 주세요. 뒷 부분에 .html 은 붙이지 마시구요.

퍼블릭IP:8080/plus/5/12

그러자 5 와 12 의 합인 17이 출력되었군요. 5 와 12를 다른 숫자로 바꿔볼까요?

퍼블릭IP:8080/plus/1234/4321

덧셈의 합이 정확하게 표시되는 것을 알 수 있습니다.
정적 웹 페이지는 이런 기능을 구현할 수가 없으나 동적 웹 페이지는 가능하지요.

코드를 살펴보겠습니다. 추가된 코드는 아래와 같은데요.

app.get('/plus/:id/:id2', function (req, res, next) {
  let sum = parseInt(req.params.id)
    + parseInt(req.params.id2);
  res.send(sum.toString());
});


app.get() 이란 특정 규칙의 경로(Path)와 일치하면 콜백함수를 실행하도록 연결해주며
이를 마운트(Mount:연결), 라우터 함수라고도 부릅니다.

보통 아래와 같이 사용하는데요.

app.get(경로, 콜백함수);

경로는 웹 브라우저의 퍼블릭IP:8080 뒷 부분의 주소를 의미합니다.

만일 누군가 퍼블릭IP:8080/abc.html 이란 주소를 입력하면 일치하는 경로가 있으면
퍼블릭IP:8080를 제외한 나머지 /abc.html 이라는 경로에 대해 일치하는 것을 찾은 다음,
해당하는 콜백 함수를 실행해주는 것이지요.

이를 테면 아래와 같습니다. /abc.html 이라는 패턴을 찾아서 ABC 라는 결과를 출력해 줍니다.

app.get('/abc.html', function (req, res, next) {
  res.send("ABC");
});


주의하실 것은 경로가 마운트 되는 것은 한번 뿐이라는 것입니다.
아래와 같이 동일한 경로가 2번 구성될 경우 앞의 ABC 는 출력되나, 뒷 부분의 DEF 는 출력되지 않습니다.

app.get('/abc.html', function (req, res, next) {
  res.send("ABC");  // 여기만 출력
});
 
app.get('/abc.html', function (req, res, next) {
  res.send("DEF");
});

 

경로에 대해서는 추가 규칙이 있는데요. 사례로 든 것은 100% 일치 매칭이지만
그 외 다른 규칙들도 있습니다. 여기 사용된 규칙을 소개해 드립니다.

app.get(“/plus/:id/:id2”, 콜백함수);

주목해주실 부분은 :id:id2 인데요.
앞에서 URL 에 입력했던 첫번째 숫자와 두번째 숫자가 각각 매칭됩니다.

/plus/12/15 -> /plus/:id/:id2

12:id 에 매칭되고,
15:id2 에 매칭되는데요

매칭된 각 파라미터는 콜백함수 내부에서 req.params.id, req.params.id2 라는 이름으로 사용할 수 있습니다.

하지만 입력 URL의 파라미터가 2개가 아니라 1개 또는 3개인 경우 매칭되지 않기 때문에
아래 URL은 해당이 없습니다.

/plus/1 ( 매칭x ) , /plus/1/2/3 ( 매칭x )

콜백함수 안에서는 아래 코드가 실행되는데요.

function (req, res, next) {
  let sum = parseInt(req.params.id)
    + parseInt(req.params.id2);
  res.send(sum.toString());
}

 

각 입력된 :id 값과 :id2 값은 req.params.id, req.params.id2 변수로 전달됩니다.
이 2개의 수를 더해서 합계를 내면 되나, 그냥 더하면 이상한 결과가 발생되는데요,

let sum = req.params.id + req.params.id2

=>  1572,
엥? 15 + 72가?

req.params.idreq.params.id2 는 숫자(Number)가 아니라 문자열(String)이기 때문입니다.
( 15와 72가 들어 있는게 아니라 “15”와 “72”가 들어 있습니다 )
그렇기에 문자열 2개에 대해 덧셈 연산을 할 경우 이어 붙이기 기능이 작동됩니다.

이 경우는 숫자 덧셈을 위해서는 양쪽을 모두 숫자로 바꿔주어야 하는데요.
그 때 사용하는 것이 parseInt 내장 함수입니다.

참고로 내장함수는 모듈이 없어도 작동하는 기본기능이 있는 함수를 의미합니다.

parseInt(req.params.id)req.params.id 의 값 “15” 를 숫자 15 로 바꾸어 줍니다.
parseInt(req.params.id2)req.params.id2 의 값 “72” 를 숫자 72 로 바꾸어 주게 되지요

그래서 2개를 더해 sum 이란 변수를 선언하는 동시에 넣어주는 것이지요.
이 경우 sum 은 숫자와 숫자를 더했기 때문에 숫자형이 됩니다.

let sum = req.params.id + req.params.id2

그리고 나서 결과를 사용자에게 표시해주면 되는데요. 여기에 또 한가지 제약이 있습니다.
아래 스크립트는 덧셈의 결과를 사용자에게 표시해주는 명령인데요.
괄호안에 들어갈 파라미터는 무조건 문자열이어야 합니다.

res.send(출력할 문자열);

그렇기 때문에 만일 아래와 같이 사용하면, 오류가 발생합니다. sum 은 문자열이 아니기 때문이지요.

res.send(sum);

 

2가지 해결 방법이 있는데요. 첫째는 방법은 문자열변환 함수 .toString() 입니다.

res.send(sum.toString());

문자열을 숫자로 바꾸는 것이 parseInt()였다면, 숫자를 문자열로 바꾸는 toString()을 사용하면 됩니다. parseInt 와 반대로 뒷 부분에 써주는 것이 특징입니다. → 변수.toString()

두번째 방법은 다른 문자열과 더하는 것입니다.

res.send(sum + "");

자바스크립트는 숫자와 문자열을 더할 때 이어 붙이기 기능이 작동하여 문자열이 됩니다.
그렇기에 만일 아래와 같이 작성하면 문자열 형변환이 되어 문제가 해결되는 것이지요,

res.send("합계 : " + sum);

주석으로 정리하면 아래와 같습니다.

// 패턴 매칭
app.get(
  // 퍼블릭IP:8080/plus/A/B 형태를 매칭
  '/plus/:id/:id2',
  // 콜백함수 정의
  function (req, res, next) {
    // 합계를 계산하는데
    let sum =
      // req.params.id 숫자로 변환하고
      parseInt(req.params.id)
      // req.params.id2 숫자로 변환해서 더합니다.
      + parseInt(req.params.id2);
   
    // 합계를 그냥 출력하면 에러가 나기 때문에
    // 문자열로 변환해서 출력합니다.
    res.send(sum.toString());
  }
);

방문해주시는 모든 분들께 늘 감사드립니다.

도움이 되셨다면 공감 한방, 댓글은 굿잡!
감사합니다~


다음 이야기 : https://itadventure.tistory.com/521

 

Node.js - Part13-1. 템플릿이란?

처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다. https://itadventure.tistory.com/493 [전자책 출간!] 처음부터 시작하는 AWS와 Node.js ( express ) 65 페이지 분량의 미리보기 책을 무료로 제공해드립..

itadventure.tistory.com

 

반응형