1. 파일 읽기
웹에 파일을 띄우기 전에, 파일을 읽어서 값을 저장하는 작업부터 해보자.
var fs = require('fs')
fs.readFile('sample.txt', 'utf8', (err, data) => {
if (err) throw err;
console.log(data);
});파일 읽기에 관한 노드 공식문서에 들어가보면, readFile 함수를 사용하는 방법이 나와있다. 먼저 fs 모듈을 인클루드 해주고, 위 예제처럼 코드를 작성하면 된다. data 변수에 read한 파일 내용이 저장된다.
fs.readFile은 3개의 인자를 받는다.
fs.readFile(path, [options], callback)-
path: 읽을 파일의 상대경로를 적어준다.${변수}를 사용하려면 작은 따옴표가 아니라 템플릿 리터럴(`) 로 감싸줘야한다. -
options: 만약 읽을 파일이 문자열이면,'utf8'처럼 인코딩 옵션을 넣어줘야한다. -
callback: err일 때, 정상적으로 data를 읽을 때 경우로 나눠서 콜백함수를 익명함수로 적어준다.화살표 함수(Arrow function)?
ES6 부터 화살표 함수를 지원한다. function 키워드 없이 간단하게 작성 가능.
// 일반 함수 function (err, data) { console.log(data) }; // 화살표 함수 (err, data) => { console.log(data) };
2. 웹페이지에 읽은 파일 띄우기
HTML, CSS, JavaScript 쿼리스트링에 따라서 data디렉토리에 있는 적절한 파일을 읽어 불러오는 작업을 해볼 것이다. 각 페이지 마다 다른 내용을 일일이 html 파일에 적어줄 필요가 없어 훨씬 깔끔하고 유지보수가 용이한 웹 어플리케이션이 될 것이다.
- 먼저,
data폴더를 따로 만든 후 그 안에 HTML, CSS, JavaScript 라는 이름(쿼리스트링)의 파일을 넣어준다. - 위에서 배운
fs.readFile함수를 사용해 파일 경로를 쿼리스트링으로 지정한다. 이때 작은 따옴표가 아니라 템플릿리터럴로 감싸줘야한다. - 본문, 즉
<p>${data}</p>p태그 안에 data 변수를 넣어준다.
fs.readFile(`data/${queryData.id}`, 'utf8', function(err, data) {
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>${data}</p>
</body>
</html>
`;
response.end(template);
});
삽질의 기록들 👨💻