[nodejs] 011# App ⑷ 파일을 이용해 본문 구현

▶ nodejs 의 App 포스팅은 생활코딩 (https://opentutorials.org/course/1) 에서 제공하는 강의를 기반으로 한 학습내용입니다.

▶ 출처 : 생활코딩 > WEB > WEB2 - Node.js (https://opentutorials.org/course/3332)

▷ 해당 학습 과정의 프로젝트를 저의 Github Repository 에도 게시하였습니다. (devdhjo/nodejs_opentutorials)

◇ nodejs 의 파일 읽기 기능 (fs.readFile) 을 이용하여 본문을 생성하는 방법을 학습합니다.

1. 샘플 프로젝트에 data 폴더를 생성한 후, 본문 내용을 저장할 파일을 쿼리스트링에 사용되는 title 명으로 각각 생성합니다.

nodejs_readfile_001

2. html 파일에서 p태그 내부의 내용만 복사하여 data 폴더의 파일에 붙여넣기 합니다.

1.html

<!doctype html>
<html>
<head>
  <title>WEB1 - HTML</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <h2>HTML</h2>
  <p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
  <img src="coding.jpg" width="100%">
  </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
  </p>
</body>
</html>

data/HTML

<a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
<img src="coding.jpg" width="100%">
</p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.

2. main.js 파일을 수정합니다.

1) body 데이터를 생성하는 부분에 readFile 함수를 추가합니다.

– 참고문서 (Node.js Documentation)

    ...
    }
    response.writeHead(200);

+   fs.readFile(`data/${title}`, 'utf8', function(err, description) {
      var template = `
      <!doctype html>
      <html>
        ...
      </html>
      `;
      response.end(template);
+   })

});
app.listen(3000);

2) 본문 내용을 readFile 함수를 통해 가져온 내용으로 변경합니다.

var template = `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      ...
      <h2>${title}</h2>
+     <p>${description}</p>
-     <p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
-     <img src="coding.jpg" width="100%">
-     </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
-     </p>
    </body>
    </html>
    `;

3. 수정 된 main.js 를 실행합니다.

window + R → cmd 실행

D:\workspace\git\nodejs\webapp>node main.js

main.js (수정사항 보기)

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
var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function(request,response){
  var _url = request.url;
  var queryData = url.parse(_url, true).query;
  var title = queryData.id;
  if(_url == '/'){
    title = 'Welcome';
  }
  if(_url == '/favicon.ico'){
    return response.writeHead(404);
  }
  response.writeHead(200);
  fs.readFile(`data/${title}`, '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>
        <ul>
          <li><a href="/?id=HTML">HTML</a></li>
          <li><a href="/?id=CSS">CSS</a></li>
          <li><a href="/?id=JavaScript">JavaScript</a></li>
        </ul>
        <h2>${title}</h2>
        <p>${description}</p>
      </body>
      </html>
      `;
    response.end(template);
  })
});

app.listen(3000);

4. 브라우저를 열어 main.js 서버로 접속합니다.

localhost:3000
– main.js 의 40번 라인에서 설정해준 포트번호 3000을 반드시 함께 입력해야 합니다.

nodejs_readfile_002

title 에 따라 data 폴더 하위에 있는 파일을 렌더링하여 본문에 보여줍니다.