세리프 따라잡기

nodejs에서 파일 목록 알아내기, 글 목록 출력하기, 함수 문법 본문

Node.js

nodejs에서 파일 목록 알아내기, 글 목록 출력하기, 함수 문법

맑은 고딕 2021. 1. 5. 22:41

14. 파일 목록 알아내기

파일에 추가, 수정, 삭제 시에 우리가 일일이 찾아가서 수정할 수가 없다. 이 작업을 더욱 간편하게 만들기 위해 stackoverflow.com/questions/2727167/how-do-you-get-a-list-of-the-names-of-all-files-present-in-a-directory-in-node-j 를 통해 fs.readdir을 사용해보자.

var testFolder = 'data'; //내가 실행하고자 하는 위치를 기준으로해서 data 디렉토리를 적어주면 된다(필자 기준 main.js의 데이터 파일은 data). = './data'와 같은 뜻이다. 이때 ./는 현재 디렉토리라는 뜻.
var fs = require('fs');

fs.readdir(testFolder, function(err, filelist){ //err(error를 줄인 말)과 filelist는 변수 이름이다. 그냥 암거나 써도 된다. 중요한 건 자리수와 위치가 중요.
    console.log(filelist);
}); //data 경로에 있는 파일들이 배열처럼 나열되어 출력.
// 즉, nodejs에선 어떤 특정 디렉토리에 있는 파일의 목록을 배열 형식으로 만들어 전달한다. 이를 우리는 반복문을 통해 반복적으로 처리하여 결과를 나타나게끔 한다.

15. 글 목록 출력하기

**이전의 홈페이지 구현부분과 계속 통일되며, 처음부터 같은 코드들을 수정/발전해 나가고 있는 중.

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 = url.parse(_url, true).query;
  var pathname = url.parse(_url, true).pathname;
  if (pathname === '/') {
    if (querydata.id === undefined) {

      fs.readdir('./data', function (err, filelist) { // 파일 목록을 가져오는 코드. 제대로 파일을 로드했는지 알아보려면 console.log(filelist);를 이용. css, html, javascript 라고 배열 형식으로 출력되면 성공적.
        var title = 'Welcome';
        var description = 'Hello, Node.js';
        /*
        var list = `<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>`;
      */ //이 코드를 더 프로그래밍적으로 만들기 전 참조를 위해 적은 코드.
        var list = '<ul>'; //여는 태그
        var i=0; //초기화
        
        while(i<filelist.length){
          list = list+`<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`; //리스트만 추가하면 목록만 추가됨(링크X). 링크까지 추가해주면 링크까지 눌린다.
          i=i+1; //1씩 증가
        }
        list=list+'</ul>'; //닫히는 태그
        var template = `
        <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      <h2>${title}</h2>
      <p>${description}</p>
    </body>
    </html>
        `;
        response.writeHead(200);
        response.end(template);
  
      })

    } else {
      fs.readdir('./data', function (err, filelist) {
        var title = 'Welcome';
        var description = 'Hello, Node.js';
        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>'; //위 코드와 동일하게 카피. 이때 괄호들 체크 필수!!

        fs.readFile(`data/${querydata.id}`, 'utf8', function (err, description) { //id값이 있는 경우의 코드
          var title = querydata.id;
          var template = `
          <!doctype html>
      <html>
      <head>
        <title>WEB1 - ${title}</title>
        <meta charset="utf-8">
      </head>
      <body>
        <h1><a href="/">WEB</a></h1>
        ${list}
        <h2>${title}</h2>
        <p>${description}</p>
      </body>
      </html>
      `; //이 부분의 ul~/ul부분도 앞과 같이 ${list}로 바꿔준다.
          response.writeHead(200);
          response.end(template);
        });
      });
    }
  } else {
    response.writeHead(404);
    response.end('not found');
  };
});
app.listen(3000); // 정상 출력. + 이때 data(필자 기준 파일명)파일에 다른 데이터 파일을 추가한다면, 새로고침만으로도 정상 적용되는 것을 볼 수 있다! [와아아!]

16. 자바 스크립트 함수의 기본 문법.

  • 함수(Function) - 기본
// abcdef의 사이에 123이라는 출력 코드가 중복 반복된다고 생각해볼때, 함수를 통해 중복된 코드를 더욱 편하게 바꿔보기.

f123(); // console.log(1); 이라는 형식으로 적지 않아도 출력되는 것을 볼 수 있다.
console.log('a');
console.log('b');
console.log('c');
f123();
console.log('d');
console.log('e');
console.log('f');
f123();
console.log('g');
console.log('h');
console.log('i');
f123(); //그리고 이 함수들이 반복되는 것은, 즉 다 같다는 의미이므로 가독성이 높아진다.

function f123(){ // 아래 나열된 코드를 함수로 그룹핑한 것.
    console.log(1);
    console.log(2);
    console.log(3);
} //함수를 지정하고, 수정할 일이 있다면 이 안에서만 해결한다면, 1억개의 코드가 있어도 간편하게 수정할 수 있다. [유지보수의 편리성↑]
  • 입력(Input) - 매개변수 이용
console.log(Math.round(1.6)); //math는 자바 스크립트가 가지고 있는 객체. 함수를 정리하고 관리하는 디렉토리 같은 걸 '객체'라고 한다. round는 반올림을 해주는 함수이다.
console.log(Math.round(1.4)); // 위 값: 2, 이 코드값은: 1

function sum(first,second){ //입력값을 호출하기 위해서는 호출하는 부분과 sum이 정의되어 있는 부분 사이에 매개해주는 매개체가 필요함 = 매개변수가 필요하다. first = 2를, second=4를 받는다.
    console.log(first+second);
} // 매개변수 = parameter라고 한다.

sum(2,4); //sum함수를 통해 2+4 계산하기. 2,4와 같은 입력값을 argument(인자)라고 한다.

위 코드에서 math.round 애들을 출력하려면 console.log가 필요해, 얼핏보면 우리가 만든 함수 sum이 더 좋아보인다. 하지만 우리가 만든 sum은 console.log를 통해 화면에 출력되지만, 내장된 함수들은 출력에 대해 융통성있게(다양하게) 활용할 수 있다. 우리가 sum을 순수하게 값으로 출력할 수 있다면, 훨씬 더 광범위하게 응용할 수 있다.

  • return 이용
function sum(first,second){
    return first+second; //return을 붙이게 되어 함수가 실행되면 즉시 뒤의 값을 출력해주고 동시에 즉시 함수 실행을 종료한다(특수한 키워드).
} //예시로 return 함수 전에는 console.log('a');를, 뒤에는 console.log('b');를 붙인다면 a는 출력되는 반면 b는 출력되지 않는 것을 볼 수 있다.

console.log(sum(2,4)); //얼핏보면 위 코드와 값이 똑같아서 같아보이지만, 이제 sum이라는 함수를 다양하게 응용할 수 있다. = return이 그런 역할을 해준다.
  • 함수를 이용한 정리 및 관리

반복되는 중복을 없애기(15번에서 이어짐)

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>
        `; //원 <h2>~</p>는 페이지의 형태에 따라서 바뀔 수 있는 여지가 많기에 큰 틀(${body})로 변경.
}

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;
  if (pathname === '/') {
    if (querydata.id === undefined) {
      fs.readdir('./data', function (err, filelist) {
        var title = 'Welcome';
        var description = 'Hello, Node.js';
        var list = templateList(filelist); //이 안에 있던 반복문을 위의 함수에 넣고, 매개변수로 설정해준다.
        var template = templateHTML(title, list, `<h2>${title}</h2>${description}`); //이 안에 있던 본문을 위의 function으로 넣고, 이 코드상에 있는 변수들을 넣어줌. 위에서 body로 바꾼 부분은 ``을 이용해 내용을 적음.
        response.writeHead(200);
        response.end(template);
      })
    } else {
      fs.readdir('./data', function (err, 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);

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

nodejs app제작(전송 데이터 받기), 파일생성과 리다이렉션, 글 수정 및 삭제 버튼 구현  (0) 2021.01.07
nodejs에서 동기와 비동기, callback, 패키지 매니저(pm2), html form, 글쓰기 ui 생성  (0) 2021.01.06
nodejs app제작(not found, 홈페이지 구현), 반복문, 배열(추가 및 제거)  (0) 2021.01.05
nodejs에서 파일을 읽는 기능 정리, 자바 스크립트 중요 문법 3가지, 콘솔 입력값에 대해  (0) 2021.01.01
nodejs에서 template literals과 URL에 대해  (0) 2020.12.31
'Node.js' Related Articles more
Comments