본문 바로가기
WEB

[WEB] WEB2 - Node.js (2)

공멍 2021. 4. 9. 05:44

지난번 정리한 부분 이어서...

 

 

모듈이란, 기본적으로 제공하는 기능들을 묶어놓은 각각의 그룹들.

그니까 fs는 모듈 중의 하나고, file system의 약자인 것이다.

 

Node.js 홈페이지에 방문하면 Node.js가 제공하는 모듈들에 대해서 정리해놓았다.

예를 들어, 내가 설치한 버전은 v14.16.1 이기 때문에,

 

그 버전을 찾아들어가면 (nodejs.org/dist/latest-v14.x/docs/api/) 내 버전에서 제공하고 있는 모듈을 확인할 수 있는 거다.

 

 

  • 그중 예시로 들었던 파일(txt) 읽는 법.
var fs = require('fs');
fs.readFile('sample.txt', 'utf-8', function(err, data){
  console.log(data);
});

sample.txt 에 있는 텍스트를 그대로 콘솔 창에 출력한다.

 

이걸 총체적으로 활용해서 동적으로 사이트를 완성할 수 있었다.

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 title = queryData.id;
    if(_url == '/'){
      title = 'Welcome';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    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="/">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);
    })


});
app.listen(3000);

html 파일로 저장되었던 파일에서 달라져야 하는 데이터 부분만 한 폴더에 파일로 저장한 뒤, 이런 식으로 구성하면 url의 queryData에 따라 그 데이터 파일을 읽어, 출력하는 데이터 부분이 달라진다.

(※queryData.id와 데이터 파일명을 똑같이 해야 함!)

 

JavaScript 문법  

 

  • Boolean
console.log(true);
console.log(false);

true와 false는 변수의 이름으로 사용할 수 없음!

 

  • 비교연산자
console.log(1==1); //true
console.log(1==2); //false
console.log(1>2); //false
console.log(1<2); //false
console.log(1===1); //true
console.log(1===2); //false

 

* == 는 데이터타입을 구별하지 않고, ===는 데이터타입까지 구별함.

  ex) ==는 '1'과 1을 같다고 하고, ===는 그렇지 않다.

 

  • 조건문
console.log('A');
console.log('B');
if(false){
  console.log('C1');
} else {
  console.log('C2');
}
console.log('D');
/*결과값:A B C2 D*/

 

이런 간단한 연산자랑 if조건문은 c언어랑 다를바가 없다.

 

 

Node.js에서 콘솔 입력값을 받는 법은 간단하다.

  • process.argv를 통해 입력받을 수 있다.
var args = process.argv;
console.log(args);

 

다음과 같은 코드에서 args는 배열의 형태이다.

평소 node.js 파일을 실행하던 것 처럼 node (파일이름).js 를 콘솔창에 입력하면

 

[ '(node.ex프로그램의 경로)', 

  '(실행한 파일의 경로)'

]

 

이렇게 뜸. ( args[0] = node.ex프로그램의 경로, args[1] = 파일의 경로인 듯. )

그리고 node (파일이름).js 1 이렇게 콘솔 창에 입력하면 args[2] = 1 이 되는 것을 확인 할 수 있다.

 

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

>> process.argv와 if문을 활용해서 콘솔에 입력한 값에따라 c1 / c2 출력을 다르게 할 수 있게 만들기.

 

 

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="/">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 {
      response.writeHead(404);
      response.end('Not found');
    }



});
app.listen(3000);

url.parse(_url, true)를 출력해보면, pathname은 queryString이 아닌 path만을 나타내고 있다는 것을 확인가능하다.

그래서 pathname == '/' 가 아니면 Not Found를 출력하도록 if문을 구성한 것이다.

 

그런데... localhost:3000/아무말 ->은 Not Found가 출력되는데 localhost:3000/?아무말 -> 은 undefined일뿐 제대로 실행된다.... 오잉. ... 아마 물음표 전까지는 pathname이고 물음표 뒤부터 각각의 path로 생각하는 것 같다.

 

 

if(pathname === '/'){
      if(queryData.id === undefined){
          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);
      }
      
      //queryData.id === undefined 혹은 !queryData.id

마지막으로, path가 없을 때(undefined), 즉 main화면일 때를 마저 구성해주면

 

맨 처음 만들었던 사이트가 동적으로 완전히 구성되게 된다.

 

▽생활코딩 링크

'WEB' 카테고리의 다른 글

[WEB] WEB2 - Node.js (4)  (0) 2021.04.14
[WEB] WEB2 - Node.js (3)  (0) 2021.04.09
[WEB] WEB2 - Node.js (1)  (0) 2021.04.08
[WEB] WEB1 - HTML & Internet(2)  (0) 2021.04.02
[WEB] WEB1 - HTML & Internet 실습1  (0) 2021.04.02

'WEB' Related Articles

티스토리툴바