본문 바로가기

문돌이 존버/Node.js 스터디

Node.js 파일 읽기 기능 feat. 생활코딩

반응형
본 글은 생활코딩의 Node.js 강의를 보고 정리한 것입니다.
var fs = require('fs');
fs.readFile('sample.txt', 'utf8', (err, data) => {
    if (err) {
        console.error(err)
        return
    }
    console.log(data);
});

err: error 발생시 찍히는 로그

위의 문법은 Node.js 공식 홈페이지에 나온 버전을 참고한 것입니다. 반면, 생활코딩에선 function 메서드를 사용했습니다.

var fs = require('fs');
fs.readFile('sample.txt', 'utf8', function(err, data) {
    console.log(data);
});

위에서 배운 파일 읽기를 통해 본문을 구현해보겠습니다.

먼저 "data" 라는 폴더를 만들고 그 안에 html, css, javascript 내용을 복사해서 새로운 파일을 만듭니다.

그리고 아래처럼 main.js 파일을 수정해주어야 합니다.

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 = new URL('http://localhost:3000' + _url);
    var title = queryData.searchParams.get('id');
    if(_url == '/') {
        title = 'Welcome';
    }
    if(_url == '/favicon.ico') {
        response.writeHead(404);
        response.end();
        return;
    }
    response.writeHead(200);
    // 파일 읽기
    fs.readFile(`data/${title}`, 'utf8', (err, data) => {
        var description = data;
        var template = `
        <!doctype html>
        <html>
        <head>
        <title>WEB1 - ${title}</title>
        <meta charset="utf-8">
        </head>
        <body>
        <h1><a href="index.html">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>${description}</p>
        </body>
        </html>
        `;
        response.end(template);
    });

});
app.listen(3000);

기본 탬플릿 html 코드와 response.end() 를 fs.readFile() 내부에 옮겨야 합니다. 파일 읽은 내용(데이터)를 description 이란 변수에 저장하고 Template literal<p></p> 부분에 추가해주면 됩니다.

html의 하이퍼링크 부분이 헷갈리시는 분들을 위해 정리해보겠습니다. 우리는 url 주소를 다음과 같이 입력합니다.

1. localhost:3000
2. localhost:3000/?id=HTML
3. localhost:3000/?id=CSS
4. localhost:3000/?id=JavaScript

1번 url에 접속하면 아래와 같은 화면이 나올 것입니다.

참고로 undefined 부분은 main.js 파일에서 
if(_url == '/') {
    title = 'Welcome!!';
}
부분만 입력해서 index.html의 본문 내용이 나오지 않은 것

위에서 1. HTML 을 클릭하면 주소가 "localhost:3000/?id=HTML" 으로 바뀌면서 아래 코드를 통해 저장된 본문이 등장합니다.

<h2>${title}</h2>
<p>${description}</p>

728x90
반응형