[생활코딩]WEB2-Node.js (4)(2020.12.17)

본 내용은 아래의 강의를 토대로 하여 작성하였습니다.

WEB2 - Node.js - 생활코딩

수업소개 이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다. 수업대상 예를들어 1억개의 페이지로 이루어진 웹사

opentutorials.org

1. 강의 내용

Input과 Output

var args = process.argv;
console.log(args);
console.log("A");
console.log("B");
if(false){
  console.log("C1");
}
else {
  console.log("C2");
}
console.log("D");

위와 같은 명령어가 있는 conditional.js 파일이 있다. Node.js에서 이 파일을 불러올 때,

node syntax/conditional.js greedy siru

입력하면, 아래와 같이 뜬다.

이는 배열의 형태이다. 첫 째 문장은 Node.js 런타임이 어디에 위치했는지에 대한 정보이다. 둘째 문장은 실행시킨 파일에 대한 정보이다. 그리고 그 이후는 입력한 값 "greedy", "siru"를 보여준다. 즉, 명령어를 통해서 세 번째부터 정보를 쓸 수 있다.

console.log(args[2]);

conditional.js에 위의 명령어를 추가하고 다시 콘솔 명령어를 실행하면,

이렇게 출력된다. 명령어에서 args[2]라고 했으므로 배열의 두 번째인 greedy가 출력되는 것이다.

var args = process.argv;
console.log(args[2]);
console.log("A");
console.log("B");
if(args[2] === '1'){
  console.log("C1");
}
else {
  console.log("C2");
}
console.log("D");

조건문을 추가하여 상황에따라 출력 값이 달라지도록 하였다. 콘솔 명령어에 1을 입력하면

True이므로 C1이 나오고 다른 숫자를 입력하면 False이므로 C2가 출력된다. 참고로 콘솔 창에서 입력한 숫자는 문자 취급을 한다.

Not found 구현

main.js로 돌아가서 조건문을 도입해서 사용자가 없는 id를 입력했을 때, 오류메세지를 전송하도록 한다.

console.log(url.parse(__url,true));

이것을 실행하면, 주어진 url정보를 분석해서 콘솔창에 보여준다.

여기서, Pathname은 Querystring이 있어도 path만을 보여주고 Path는 쿼리 스트링을 포함해서 보여준다. 이 사실을 응용해서 오류 메시지를 띄우는 명령어를 아래와 같이 입력한다.

var pathname = url.parse(_url, true).pathname;
if (pathname === '/'{
//템플릿 삽입
    }else{
	response.writeHead(404);
      response.end('Not found');
}

pathname이 "/"와 같을 때 즉, 웹 페이지에 존재하는 주소를 사용자가 입력하면 온전한 페이지가 나올 것이고 그렇지 않다면 error 404 Not found가 나올 것이다.

App - 홈페이지 구현

홈페이지의 Web을 뜨면 아직 내용을 입력하지 않아, 정의되지 않은 페이지라고 출력된다. 조건문을 사용해서 쿼리스트링이 undefined라면 인사말을 뜨게 하도록 설정한다.

if(queryData.id === undefined){
        var title = 'welcome';
        var description = 'Hello.Node.js';
        ar 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>${description}</p>
        </body>
        </html>
        `;
        response.writeHead(200);
        response.end(template);
      });
      } else{

}

Node.js 파일 목록 알아내기

쿼리스트링을 통해서 data디렉토리의 파일과 연동되도록 명령어를 설정했었다. 그에 따라 사용자가 원하는 페이지의 목록을 클릭하면 자동으로 해당 텍스트가 출력되도록 했다. 하지만, data디렉토리의 파일을 수정하거나 추가, 삭제 등의 변경사항이 있으면 그때마다 명령어를 변경하는 것은 어렵고 비생산적인 일이라고 할 수 있다. 파일 목록을 알아내는 Node.js의 fs모듈을 사용하면 이를 해결할 수 있다.

현재 디렉토리에 reddir.js파일을 만든다. 그리고

var testFolder = './data';
var fs = require('fs');

fs.readdir(testFolder, function(error, filelist){
  console.log(filelist);
})

이렇게 입력하면, 이제 파일명을 읽을 수 있는 Node.js의 기능을 사용할 수 있다. "./data"는 현재 디렉토리의 data라는 폴더를 읽는다는 의미이다. 이 폴더의 파일명들을 함수를 통해서 filelist라는 이름으로 저장하고 콘솔 화면에 출력한다. 터미널에서 이 파일을 실행하면,

이렇게 배열의 형식으로 폴더의 파일들이 표시된다.

글 목록 출력하기

이제 위의 fs모듈을 main.js에 그대로 복사하여 추가한다. 본문의 list를 지우고 아래를 입력한다.

var list=<ul>
var i = 0;
          while(i < filelist.length){
            list =list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
            i = i + 1;
          }

          list = list+'</ul>';

list라는 변수를 선언하고 while 반복문을 사용한다. i를 0부터 filelist.length라는 배열 길이 함수보다 작을 때까지 명령을 시키도록 한다. 그렇게 하면, 배열의 수만큼 실행하므로 data폴더의 모든 파일들을 불러올 수 있다. 그리고 list에 각각의 배열에 해당하는 하이퍼링크와 리스트 명을 넣어준다. 그리고 반복문이 끝나면 리스트의 태그도 끝나야 하므로 </ul>을 넣어준다.

이제, 만든 웹 페이지는 서버에서 임의의 다른 파일을 추가하여도 그것을 즉각적으로 반영한다. 임의의 파일 Nodejs를 추가하여도 아래처럼 웹 페이지에 추가가 된다.

함수를 이용해서 코드 정리 정돈하기

JavaScirpt의 함수 정의를 사용해서 페이지 전체의 중복되는 부분들을 정리할 수 있다. 이렇게 하면 가독성도 좋을 뿐더러 코드의 유지, 보수 면에서도 편하다. 정리한 main.js의 코드는 아래와 같다.

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 = i + 1;
  }
  list = list+'</ul>';
  return list;
}


var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;
    console.log(url.parse(_url, true).pathname);

    if (pathname === '/'){
      if(queryData.id === undefined){
        fs.readdir('./data', function(error, filelist){
          var title = 'welcome';
          var description = 'Hello.Node.js'
          var list ='<ul>';
          var list = templateList(filelist);
          var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
          response.writeHead(200);
          response.end(template);
        })


      } else{
        fs.readdir('./data', function(error, filelist){
          fs.readFile(`data/${queryData.id}` , 'utf8', function(err, description){
            var title = queryData.id;
            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);

2. 느낀 점

이번에도 grave accent 때문에 지체되었다... 집중을 하자!!! Node.js를 이용해, 현 시점의 나의 지식으로 웹 페이지에 동적인 기능들을 추가할 수 있었다. 확실히, HTML, CSS, JavaScript만 알 때보다 코드가 더 깔끔하고 웹 페이지를 유지, 보수할 때 상대적으로 매우 편리할 것 같다. 다만, 아쉬운 점은 아직 선생님께서 많이 넘어간 개념들이 있는데 알려주셨다면 이해가 좀 더 잘 되었을 것 같다는 생각을 하였다. fs모듈을 사용할 때 왜 함수를 사용하고 첫 번째 인자를 무슨 이유로 error 넣어야 하는지 등등...

'programming study > Node.js' 카테고리의 다른 글

[생활코딩]WEB2-Node.js (6)(2020.12.19~21) (0)	2020.12.21
[생활코딩]WEB2-Node.js (5)(2020.12.18) (0)	2020.12.19
[생활코딩]Node.js (3)(2020.12.14) (0)	2020.12.16
[생활코딩]WEB2-Node.js (2)(2020.12.13) (0)	2020.12.13
[생활코딩]WEB2-Node.js (1)(2020.12.11) (0)	2020.12.12

기억 휘발 방지 기록소

[생활코딩]WEB2-Node.js (4)(2020.12.17)

본 내용은 아래의 강의를 토대로 하여 작성하였습니다.

1. 강의 내용

Input과 Output

Not found 구현

App - 홈페이지 구현

Node.js 파일 목록 알아내기

글 목록 출력하기

함수를 이용해서 코드 정리 정돈하기

2. 느낀 점

'programming study > Node.js' 카테고리의 다른 글

티스토리툴바

[생활코딩]WEB2-Node.js (4)(2020.12.17)

본 내용은 아래의 강의를 토대로 하여 작성하였습니다.

1. 강의 내용

Input과 Output

Not found 구현

App - 홈페이지 구현

Node.js 파일 목록 알아내기

글 목록 출력하기

함수를 이용해서 코드 정리 정돈하기

2. 느낀 점

'programming study > Node.js' 카테고리의 다른 글

'programming study/Node.js' Related Articles

티스토리툴바