N

8. Node.js 파일을 읽어 본문 내용 바꾸기 본문

Node.js

8. Node.js 파일을 읽어 본문 내용 바꾸기

naeunchan 2021. 2. 2. 17:15
728x90
반응형

생활코딩 강의를 바탕으로 쓴 글입니다 :)

 

 

파일 읽기

이제 파일을 읽어 본문의 내용을 바꿔보도록 하겠습니다.

우선 data라는 폴더를 만들어 HTML, CSS, JavaScript 파일을 만들겠습니다.

확장자는 쓰지 않습니다.

data 폴더

각 파일에 본문 내용을 넣도록 하겠습니다.

html.html, css.html, js.html에서 

<h2> 태그 다음에 오는 <p> 태그에서 내용만 잘라내서 data 폴더에 있는 파일명에 맞게 붙여넣겠습니다.

HTML의 본문 내용 중 <img> 태그는 지우고 진행하겠습니다!

data/HTML
data/CSS
data/JavaScript

 

이제 main.js를 수정하겠습니다.

const app = http.createServer((req, res) => {
  ...
  
  res.writeHead(200);

  fs.readFile(`data/${queryData.id}`, "utf8", (err, data) => {
    let template = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>WEB1 - ${title}</title>
    </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>
        ${data}
      </p>
    </body>
  </html>
  `;

    res.end(template);
  });
});

fs.readFile() 함수로 queryData.id에 해당하는 파일을 읽을 수 있습니다.

형식은 fs.readFile("읽을 파일의 경로", "인코딩 방식", callback 함수) 입니다.

nodejs.org/api/fs.html#fs_fs_readfile_path_options_callback

 

File system | Node.js v15.7.0 Documentation

 

nodejs.org

callback 함수에서 data에는 각 파일의 본문 내용이 담겨져 있습니다.

그렇기 때문에 <p>${data}</p>로 수정하여 본문의 내용을 동적으로 읽기가 가능하게 됩니다.

 

수정한 후 실행을 시켜보면

각 링크를 클릭할 때 마다 본문의 내용이 바뀌는 것을 확인할 수 있습니다!

728x90
반응형
저작자표시 (새창열림)

'Node.js' 카테고리의 다른 글

7. Node.js URL  (0) 2021.01.24
6. Node.js  (9) 2021.01.20
5. bitnami를 이용한 웹 서버 운영  (0) 2021.01.15
4. HTML 웹 페이지 이동  (0) 2021.01.08
3. HTML Tag(table, a, img, iframe)  (0) 2021.01.08
'Node.js' Related Articles more