본문 바로가기

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

Javascript 함수 사용법(입, 출력) 및 코드 정리 feat. 생활코딩

반응형
본 글은 생활코딩의 Node.js 강의를 보고 정리한 것입니다.

자바스크립트에선 함수를 어떻게 사용하는지 살펴보았습니다.

function f123() {
    console.log(1);
    console.log(2);
    console.log(3);
}

f123();

함수에 파라미터를 입력하는 과정은 아래와 같습니다.

function sum(first, second) {
    console.log(first + second);
}

sum(2, 4);

위에서는 함수 내부에서 바로 console에 메시지가 출력되도록 했었는데요. 이번에는 그 결과값을 출력하여 새로운 변수에 저장한 뒤에 console에 출력하도록 하겠습니다.

function sum(first, second) {
    return first + second;
}

var result = sum(2, 4);
console.log(result);

아래는 함수를 이용하여 이전에 작성했던 코드를 정리한 것입니다. HTML과 List를 자주 사용하기 때문에 이를 함수로 미리 정의해놓으면 이후에 다시 사용할 때 편리하겠죠.

var http = require('http');
var fs = require('fs');
var url = require('url');

function templateHTML(title, list, body) {
    return `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      ${body}
    </body>
    </html>
    `;
}
function templateList(filelist) {
    var list = '<ul>';
    var i = 0;
    while (i < filelist.length) {
        list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
        i += 1;
    }
    list = list + '</ul>';
    return list;
}

var app = http.createServer(function(request, response) {
    var _url = request.url;
    var queryData = new URL('http://localhost:3000' + _url);
    var queryDataId = queryData.searchParams.get('id');
    var pathname = queryData.pathname;

    if (pathname === '/') {
        if (!queryDataId) {
            fs.readdir('./data', (err, filelist) => {
                var title = 'Welcome';
                var description = 'Hello, Node.js';
                var list = templateList(filelist);
                var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
                response.writeHead(200);
                response.end(template);
            })
        } else {
            fs.readdir('./data', (err, filelist) => {
                fs.readFile(`data/${queryDataId}`, 'utf8', (err, description) => {
                    var title = queryDataId;
                    var list = templateList(filelist);
                    var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
                    response.writeHead(200);
                    response.end(template);
                });
            });
        }
    } else {
        response.writeHead(404);
        response.end('Not Found');
    }
});

app.listen(3000);
728x90
반응형