생활코딩

Coding Everybody

코스 전체목록

닫기

상세보기 페이지 구현

수업소개

상세보기 페이지를 Express 버전으로 변환해볼 것입니다. 이 과정에서 query string을 사용하지 않는 pretty url(clean url, semantic url..)로 라우트 기능을 구현하는 방법을 살펴보겠습니다. 

 

 

 

강의 1

Clean URL로 Route를 구현하는 방법을 소개해드립니다. 

 

 

 

소스코드

변경사항

main.js 


var express = require('express')
var app = express()
var fs = require('fs');
var template = require('./lib/template.js');

//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) { 
  response.send(request.params);
});

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

 

 

 

강의2

상세보기 페이지를 완성해봅시다.

 

 

 

소스코드

변경사항

main.js

var express = require('express')
var app = express()
var fs = require('fs');
var path = require('path');
var sanitizeHtml = require('sanitize-html');
var template = require('./lib/template.js');

//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?id=${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.listen(3000, function() {
  console.log('Example app listening on port 3000!')
});

 

lib/template.js

module.exports = {
  HTML:function(title, list, body, control){
    return `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      ${control}
      ${body}
    </body>
    </html>
    `;
  },list:function(filelist){
    var list = '<ul>';
    var i = 0;
    while(i < filelist.length){
      list = list + `<li><a href="/page/${filelist[i]}">${filelist[i]}</a></li>`;
      i = i + 1;
    }
    list = list+'</ul>';
    return list;
  }
}

 

댓글

댓글 본문
  1. 상세보기 페이지 구현!
  2. 어흥
    230705
  3. Hojun Song
    23-04-19
  4. 이고잉수제자
    23.02.22
    안녕하세요 조용히 수강 중에 저 같은 분이 계실까 글 올립니다.

    개인적으로 프로젝트를 진행하고 싶어서 node.js-mysql 수업을 듣고 진행하려고 하다가 css의 편리한 적용과 서버 모듈을 express로 사용하고 싶어서 듣고 있는데 node.js-mysql 수업에서 사용한 소스를 상세보기 페이지에 넣었을때 희한하게 화면은 정상적으로 나오지만 렉이 걸리면서 로그에는 TypeError: Cannot read properties of undefined 오류가 뜹니다.
    node.js에서 렌더가 데이터베이스에서 값을 읽어오는 것보다 빨리 진행되서 그런 이유라는 것 같은데 그럴땐 데이터베이스에서 읽어오는 값에 ?연산자를 넣어주면 에러가 사라집니다 ex) var title = topic[0]?.title;
    그럼 이만 꾸벅
  5. 감자
    22.12.22.
  6. 당당
    2022.11.16
  7. vender
    20220716
  8. 케굴
    2021-12-31
  9. chimhyangmoo
    21.03.21
  10. jeisyoon
    2021.03.14 상세페이지 구현 - OK
  11. 9oon
    21/3/11!!!!
  12. hanel_
    21.2.10
  13. 안영우
    21.01.20 dhksfy
  14. 김지호
    21 01 06
  15. 생활둘기
    2021 1 4
  16. 콜라
    20201024 완료
  17. Yong Hyun Lee
    완료 201003
  18. 전주호
    완료
  19. ldhan0715
    20-09-14
  20. 뚜루뚜루뚭
    감사합니다
  21. 쑤우
    수강완료. 감사합니다~
  22. eddylee123456
    완료
  23. 파이어뱃
    semantic url - query String을 사용하지 않는 url
    ex)
    /pathname/:paramKey

    브라우저에서 서버로의 전달
    /pathname/paramValue

    paramKey, paramValue 접근
    req.params
  24. 강다리
    간결하고 보기 좋습니다.
  25. 굼벵이
    완료
  26. YunHu
    main.js
    app.get('/page/:pageId',function(request,response){
    topic.page(request,response);
    });


    topic.js
    exports.page = function(request,response){
    var params = request.params;
    console.log('pageId : '+ params.pageId);


    }
  27. DOTOLEE
    안녕하세요~!
    web2-nodejs mysql를 다 듣고 왔는데요

    express과정과 mysql과정을 통합을 하려고 합니다.

    main.js에서

    app.get('/', function(request, response) {
    return topic.home(request, response);
    });

    app.get('/page/:pageId', function(request, response){
    return topic.page(request.params, response);
    });

    이런식으로 구현하게 되면
    topic.page 단에서는 어떻게 request.prarams를 가져다 쓸 수 있을까요?

    다른분들은 어떻게 하시는지 궁금합니다.

    *[Web2-Node js Mysql] 사용된 코드를 express에 적용하려고 합니다.
    **동일하게 클린URL을 적용하려고 합니다.
  28. 지미츄
    감사합니다...이틀만에 에러 해결해써요 꺼이꺼이
  29. Specialist
    작업 중인 개인프로젝트에 적용시키니까 사뭇 다르네요. 여기 나온것처럼 하면 되는데 기존에 썼던 쿼리스트링을 계속 쓰려고 하다보니 강의에서 나온 시멘틱 URL이 사뭇 다르게 느껴집니다. 훨씬 좋네요. 강의 들으면서 놓친 부분이 많은거 같아요. 다시 복습하면서 필요한 부분은 정리해야겠어요. 좋은 강의였습니다!!
  30. jo_onc
    아주 편리하네요!
  31. 삼고잉
    잘 읽었습니다.
  32. 연수아빠
    express frame work에 편리한 기능들이 많이 있네요.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기