Node.js
8. Node.js 파일을 읽어 본문 내용 바꾸기
naeunchan
2021. 2. 2. 17:15
728x90
반응형
생활코딩 강의를 바탕으로 쓴 글입니다 :)
파일 읽기
이제 파일을 읽어 본문의 내용을 바꿔보도록 하겠습니다.
우선 data라는 폴더를 만들어 HTML, CSS, JavaScript 파일을 만들겠습니다.
확장자는 쓰지 않습니다.
각 파일에 본문 내용을 넣도록 하겠습니다.
html.html, css.html, js.html에서
<h2> 태그 다음에 오는 <p> 태그에서 내용만 잘라내서 data 폴더에 있는 파일명에 맞게 붙여넣겠습니다.
HTML의 본문 내용 중 <img> 태그는 지우고 진행하겠습니다!
이제 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
반응형