TIL 231210

카테고리

{ "Hello World!" };/Node.js

작성일

2023. 12. 10. 15:51

작성자

갱수터

728x90

파일읽기

공식 문서(Node.js file read)

Reading files with Node.js | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

nodejs 폴더에 sample.txt파일과 fileread.js파일을 만들고

터미널에서 nodejs 폴더까지 이동해 공식문서에 나온대로

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

fileread.js에 코드작성후

터미널에 node fileread.js 실행하면

본문구현

쿼리스트링과 같은 혹은 나중에 맵핑?할 주소와 같은 이름으로 파일 만들어주고

 fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
    var template =`
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="index.html">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.end(template); //template 문자열 응답
  });
});

main.js코드 수정해줌

경로 : data폴더 / URL(쿼리스트링id=하고 받을 값)

변수명 : description

본문이 들어갈 곳에 template 변수를 사용해서 삽입해주기

헥헥 잘된다

심지어 mian.js를 수정했을때는 서버를 껐다 켯어야 햇는데

data 폴더안의 파일들을 수정했을때는 그냥 바로바로 반영된다

마치 스프링에서 back단 수정할땐 서버 restart해야하는데 front단 수정할땐 새로고침하듯이...

콘솔에서 입력받기

검색어 "nodejs console input parameters"

var args = process.argv;    
console.log(args);

프로그램을 실행할 때 함께 넘어온 입력값을 args에 저장함

실행시 명령뒤에 입력값 함께 명시해야함

배열 첫번째 값 : Node.js 런타임 위치 경로

배열 두번째 값: js 실행파일 위치한 경로

배열 세번째 값: 첫번째 입력값

입력값만 빼올려면 args[2]

오류페이지

사용자가 존재하지 않는, 다른 경로로 들어 왔을 때 파이릉ㄹ 찾을 수 없다는 오류 메세지 전송하기

1. 어떤 정보를 가지고 오는지 확인하기

var url = require('url');
var app = http.createServer(function(request, response) {
	var_url = request.url;
    
    
    console.log(url.parse(_url, true));
});

2. pathname으로 분기처리하기

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;
  var title = queryData.id;
    
  if(pathname === '/') {
    //루트라면 기존 코드 실행
    fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
      var template =`
      <!doctype html>
      <html>
      <head>
        <title>WEB1 - ${title}</title>
        <meta charset="utf-8">
      </head>
      <body>
        <h1><a href="index.html">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); //template 문자열 응답
    });

  } else {
    //루트가 아니라면  새로운 코드 실행
    response.writeHead(400);
    response.end('Not found');
  }
});
app.listen(3000);

200 = 파일을 성공적으로 전송, 404 = 요청한 파일이 없다

3.결과

홈페이지

pathname은 쿼리 스트링을 제외한 경로 이름을 가지므로 이것만으로는 사용자가 홈을 요청했는지 페이지를 요청했는지 구분할 수 없기때문에, 쿼리스트링의 유/무로 구분해야한다.

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 === '/') {                //1. 루트일 때 실행(오류X)
    if(queryData.id === undefined) {    //2. 쿼리 스트링 없을 때 실행 (홈 O)
      var title = 'Welcome';
      var description = 'Hello, Node.js';
      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>
          ${description}  <!-- 읽어온 파일 내용 표시 -->
        </p>
      </body>
      </html>
      `;
      response.writeHead(200);
      response.end(template); //template 문자열 응답

    }else {       //3. 쿼리 스트링 있을 때 실행 (홈 X)
      fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
        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>
          <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); //template 문자열 응답
      });
    }

  } else { //4. 루트가 아니 때 실행(오류 O)
    response.writeHead(400);
    response.end('Not found');
  }
});
app.listen(3000);

이제 루트 페이지도 잘 나온당

파일목록 알아내기

현재 문제점 : data 디렉터리에 데이터를 추가하면 그때마다 main.js에서 <li>태그로 된 글 목록을 직접 수정해야 함

해결방안 : 디렉터리에서 파일 목록을 읽어와야함

검색어 "nodejs file list in directory"

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

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

본문 파일 들어있던 data 디렉터리 경로(루트부터 시작함) testFolder 변수에 지정하고

결과값들을 filelist 변수에 담아 console에 출력하기

글 목록 출력하기

해야할일

1. data 디렉터리에서 파일 목록 읽어오기

2. 읽어온 파일 목록을 표시하는 HTML코드를 list 변수에 저장하기

3. 저장한 변수를 이용하여 웹 페이지에 표시하기

	fs.readdir('./data',function(error, filelist) {
        var title = 'Welcome';
        var description = 'Hello, Node.js';   

        var i = 0;
        var list = '<ul>';
        while(i < filelist.length) {
          list += `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
          i++;
        }
        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); //template 문자열 응답
      });

테스트 >>> 새로운 파일 추가해보기

코드정리하기

1. 중복코드 찾기

2. 매개변수, 리턴값정하여 함수만들기

3. 필요한곳에 함수 호출하기

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 === '/') {                //1. 루트일 때 실행(오류X)
    if(queryData.id === undefined) {    //2. 쿼리 스트링 없을 때 실행 (홈 O)         
      fs.readdir('./data',function(error, filelist) {
        var title = 'Welcome';
        var description = 'Hello, Node.js';
        var list = templateList(filelist);
        var template =templateHTML(title, list, `<h2>${title}</h2><p>${description}</p>`);

        response.writeHead(200);
        response.end(template); //template 문자열 응답
      });

    }else {       //3. 쿼리 스트링 있을 때 실행 (홈 X)
      fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
        fs.readdir('./data',function(error, filelist) {
          var title = queryData.id;
          var list = templateList(filelist);
          var template =templateHTML(title, list, `<h2>${title}</h2><p>${description}</p>`);

          response.writeHead(200);
          response.end(template); //template 문자열 응답
        });
      });
    }

  } else {                              //4. 루트가 아닐 때 실행(오류 O)
    response.writeHead(400);
    response.end('Not found');
  }
});
app.listen(3000);

/**
 * 본문 셋팅 함수
 * @param {*} title 제목
 * @param {*} list 글 목록
 * @param {*} body 본문
 * @returns 중복코드 => template
 */
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>
  `;
}

/**
 * 파일목록 읽는 함수
 * @param {*} filelist 
 * @returns 
 */
function templateList(filelist) {
  var i = 0;
  var list = '<ul>';
  while(i < filelist.length) {
    list += `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
    i++;
  }
  list += '</ul>';
  return list;
}