[Node.js] 웹페이지에 파일 띄우기

이대현·2020년 6월 14일
0

Web Front-End

목록 보기
7/9

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 파일에 적어줄 필요가 없어 훨씬 깔끔하고 유지보수가 용이한 웹 어플리케이션이 될 것이다.

  1. 먼저, data 폴더를 따로 만든 후 그 안에 HTML, CSS, JavaScript 라는 이름(쿼리스트링)의 파일을 넣어준다.
  2. 위에서 배운 fs.readFile 함수를 사용해 파일 경로를 쿼리스트링으로 지정한다. 이때 작은 따옴표가 아니라 템플릿리터럴로 감싸줘야한다.
  3. 본문, 즉 <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);
});
profile
삽질의 기록들 👨‍💻

0개의 댓글