리셋 되지 말자

파일을 이용해 본문 구현 본문

NodeJS/생활코딩

파일을 이용해 본문 구현

kyeongjun-dev 2020. 9. 8. 17:14

fileRead를 이용해서 동적으로 본문 병경

data 디렉토리를 새로 생성하고, 1.html 2.html 3.html의 본문 내용만 따로 data디렉토리 안에 HTML, CSS, JavaScript라는 이름으로 저장

  • 전체 소스 코드
var http = require('http');
var fs = require('fs');
var url = require('url') // url 모듈을 사용한다

var app = http.createServer(function (request, response) {
  var _url = request.url;
  var queryData = url.parse(request.url, true).query;
  var title = queryData.id;
  console.log(queryData.id); // 쿼리 스트링 값 확인
  console.log(_url); // url 값 확인
  if (_url == '/') {
    //_url = '\\index.html';
    title = 'Welcome';
  }
  if (_url == '/favicon.ico') {
    response.writeHead(404);
    response.end();
    return;
  }
  response.writeHead(200);
  fs.readFile('data/' + queryData.id, 'utf8', function (err, description) {
    var template = `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      <ol>
        <li><a href="/?id=HTML">HTML</a></li>
        <li><a href="/?id=CSS">CSS</a></li>
        <li><a href="/?id=JavaScript">JavaScript</a></li>
      </ol>
      <h2>${title}</h2>
      <p>
        ${description}
      </p>
    </body>
    </html>    
    `;

    //response.end(fs.readFileSync(__dirname + url));
    response.end(template);
  });
});
app.listen(80);

 

  • 실행 결과 

 

페이지 요청이 있을 때마다 url에서 쿼리 스트링을 parsing하여 id를 구분하고, id(HTML, CSS, JavaScript)별로 내용을 받아와서 클라이언트 화면에 쏘아줌.

요청을 할 때마다 data 정보를 가져오므로, main.js(웹서버)를 재시작하지 않아도 data에서 수정한 내용을 가져올 수 있음

단점. WEB을 클릭했을 때의 예외 처리가 안되어서 내용이 undefined로 표시됨

 

main.js가 수정되면, 수정된 내용을 반영하기 위해 웹서버를 재시작 해야함

저작자표시

'NodeJS > 생활코딩' 카테고리의 다른 글

제작-홈페이지 구현  (0) 2020.09.09
Not found 오류 구현  (0) 2020.09.09
파일 읽기  (0) 2020.09.08
동적 웹 만들기  (0) 2020.09.08
URL  (0) 2020.09.08
'NodeJS/생활코딩' Related Articles more
Comments