멀리 보는 연습

생활코딩 - WEB2 Node.js 1편 본문

생활코딩/WEB2

생활코딩 - WEB2 Node.js 1편

푸실리 2022. 2. 6. 22:25

Node.js는 브라우저 안에서만 동작하던 Javascript를 브라우저 밖으로 꺼내준 고마운 존재이다. 브라우저 밖으로 꺼낸 순간부터 훨씬 많은 일을 할 수 있기 때문에!

 

 

 

Node.js 개념이 잘 정리된 사이트

 

Node.js 노드 개념 이해하기 자바스크립트 JavaScript 런타임 이벤트

Node.js 노드 개념 이해하기 JavaScript 런타임 - 노드는 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는데 제일 많이 사용된다. 이벤트 기반 이벤트 루프 논블로킹 I/O 싱글

hanamon.kr

 

Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임!

(런타임이란 특정 언어로 만든 프로그램을 실행할 수 있는 환경)

 

var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request,response){
    var url = request.url;
    if(request.url == '/'){
      url = '/index.html';
    }
    if(request.url == '/favicon.ico'){
      response.writeHead(404);
      response.end();
      return;
    }
    response.writeHead(200);
    console.log(__dirname + url);
    response.end('gahyun : ' + url);

});
app.listen(3200);

console.log에 적는 것들은 터미널에 출력되고, response.end에 적는 것들은 웹 화면에 출력된다. 따라서 우리가 웹페이지에 넣을 데이터 등을 response.end에 담아서 화면에 출력할 수 있다.

 

 

출처 : 생활코딩

node.js에서는 query string에 따라서 웹 페이지가 달라지는데, URL 모듈을 활용하여 이 쿼리스트링 객체를 추출할 수 있다.

 

// 1. 서버 사용을 위해서 http 모듈을 http 변수에 담는다. (모듈과 변수의 이름은 달라도 된다.)
var http = require('http');
var fs = require('fs');
var url = require('url');


// 2. http 모듈로 서버를 생성한다.
//    아래와 같이 작성하면 >> 서버를 생성한 후, 사용자로부터 http 요청이 들어오면 function 블럭내부의 코드를 실행해서 응답한다.
var app = http.createServer(function(request,response){
    var _url = request.url;
    //parse는 추출한다는 뜻으로 parse함수를 사용하면 쿼리스트링을 객체로 변환하여 리턴.
    var queryData = url.parse(_url, true).query;
    //리턴된 쿼리스트링 객체에서 id값을 추출.
    console.log(queryData.id);

    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(queryData.id);

});

// 3. listen 함수로 3200 포트를 가진 서버를 실행한다.
//    서버가 실행된 것을 콘솔창에서 확인하기 위해 'Server is running...' 로그를 출력한다
app.listen(3200, function(){
  console.log('Server is running...');
});

 

// 1. 서버 사용을 위해서 http 모듈을 http 변수에 담는다. (모듈과 변수의 이름은 달라도 된다.)
var http = require('http');
var fs = require('fs');
var url = require('url');


// 2. http 모듈로 서버를 생성한다.
//    아래와 같이 작성하면 >> 서버를 생성한 후, 사용자로부터 http 요청이 들어오면 function 블럭내부의 코드를 실행해서 응답한다.
var app = http.createServer(function(request,response){
    var _url = request.url;
    //parse는 추출한다는 뜻으로 parse함수를 사용하면 쿼리스트링을 객체로 변환하여 리턴.
    var queryData = url.parse(_url, true).query;
    var title = queryData.id;
    //리턴된 쿼리스트링 객체에서 id값을 추출.
    console.log(queryData.id);

    if(_url == '/'){
      title = 'Welcome';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    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><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
      <img src="coding.jpg" width="100%">
      </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
      </p>
    </body>
    </html>
`
    response.end(template);

});

// 3. listen 함수로 3200 포트를 가진 서버를 실행한다.
//    서버가 실행된 것을 콘솔창에서 확인하기 위해 'Server is running...' 로그를 출력한다
app.listen(3200, function(){
  console.log('Server is running...');
});

 

위에서 언급한 것처럼 response.end 안에 데이터나 내용을 담아서 웹페이지를 효율적으로 보여줄 수 있다. template 변수에 담아서 보여주기.

백틱(`) 안에 데이터를 담으면 더 편리하게 작성할 수 있기 때문에 꼭 활용할 것.

 

console.log에 url.parse(_url, true)을 찍어보면,

 

주어진 url 정보를 분석해서 띄워주는데, 그 중에 pathname을 보면 ‘/’로 표기된 것을 볼 수 있다. pathname을 활용해서 루트대로 잘 들어오지 못했을 때 Not found를 띄워보기.

 

// 1. 서버 사용을 위해서 http 모듈을 http 변수에 담는다. (모듈과 변수의 이름은 달라도 된다.)
var http = require('http');
var fs = require('fs');
var url = require('url');

// 2. http 모듈로 서버를 생성한다.
//    아래와 같이 작성하면 >> 서버를 생성한 후, 사용자로부터 http 요청이 들어오면 function 블럭내부의 코드를 실행해서 응답한다.
var app = http.createServer(function(request,response){
    var _url = request.url;
    //parse는 추출한다는 뜻으로 parse함수를 사용하면 쿼리스트링을 객체로 변환하여 리턴.
    var queryData = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;
    var title = queryData.id;

    if(pathname === '/'){
      //리턴된 쿼리스트링 객체에서 id값을 추출.
      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');
  }



});

// 3. listen 함수로 3200 포트를 가진 서버를 실행한다.
//    서버가 실행된 것을 콘솔창에서 확인하기 위해 'Server is running...' 로그를 출력한다
app.listen(3200, function(){
  console.log('Server is running...');
});

 

writehead에서 ‘200’ 이라고 하는 것은 서버가 브라우저에게 파일을 성공적으로 전달했다는 암묵적 약속 숫자이다. 반면 ‘404’는 오류가 났다는..(익숙)

 

파일리스트

 

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

//nodejs는 파일리스트를 배열 형태로 가지고 있다. 
fs.readdir(testFolder, function(error, filelist){
  console.log(filelist);
})

이렇게 실행하면,

 

이렇게 배열 형태로 파일 리스트를 가지고 있음을 확인할 수 있다.

이 파일 리스트를 활용해서 더욱 편리하게 main.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>
        `;

새로운 파일이 생길때마다 ul 태그 안에 li 태그를 작성해주려면 너무 귀찮기 때문에,

          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>';

이렇게 반복문으로 만들어주고 나서, ul태그가 들어갈 자리에 ${list}만 적어주면 된다.

 

 

// 1. 서버 사용을 위해서 http 모듈을 http 변수에 담는다. (모듈과 변수의 이름은 달라도 된다.)
var http = require('http');
var fs = require('fs');
var url = require('url');

// 2. http 모듈로 서버를 생성한다.
//    아래와 같이 작성하면 >> 서버를 생성한 후, 사용자로부터 http 요청이 들어오면 function 블럭내부의 코드를 실행해서 응답한다.
var app = http.createServer(function(request,response){
    var _url = request.url;
    //parse는 추출한다는 뜻으로 parse함수를 사용하면 쿼리스트링을 객체로 변환하여 리턴.
    var queryData = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;


    if(pathname === '/'){
      if(queryData.id === undefined){
          fs.readdir('./data', function(error, filelist){
            console.log(filelist);
            //리턴된 쿼리스트링 객체에서 id값을 추출.
              var title = 'Welcome';
              var description = 'Hello Sunnyroad';

              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>';

              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(error, filelist){
        console.log(filelist);
        //리턴된 쿼리스트링 객체에서 id값을 추출.
          var title = 'Welcome';
          var description = 'Hello Sunnyroad';

          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>';
        //리턴된 쿼리스트링 객체에서 id값을 추출.
        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>
            ${list}
            <h2>${title}</h2>
            <p>${description}</p>
          </body>
          </html>
          `;
    response.writeHead(200);
    response.end(template);

    });
  });
}

  }else{
    response.writeHead(404);
    response.end('Not found');
  }
});

// 3. listen 함수로 3200 포트를 가진 서버를 실행한다.
//    서버가 실행된 것을 콘솔창에서 확인하기 위해 'Server is running...' 로그를 출력한다
app.listen(3200, function(){
  console.log('Server is running...');
});

그런데 또 보면, while 반복문과 html 태그가 2번씩 중복되는 것을 볼 수 있다.

// 1. 서버 사용을 위해서 http 모듈을 http 변수에 담는다. (모듈과 변수의 이름은 달라도 된다.)
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;

}


// 2. http 모듈로 서버를 생성한다.
//    아래와 같이 작성하면 >> 서버를 생성한 후, 사용자로부터 http 요청이 들어오면 function 블럭내부의 코드를 실행해서 응답한다.
var app = http.createServer(function(request,response){
    var _url = request.url;
    //parse는 추출한다는 뜻으로 parse함수를 사용하면 쿼리스트링을 객체로 변환하여 리턴.
    var queryData = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;


    if(pathname === '/'){
      if(queryData.id === undefined){
          fs.readdir('./data', function(error, filelist){
            var title = 'Welcome';
            var description = 'Hello stranger.';
            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');
  }
});

// 3. listen 함수로 3200 포트를 가진 서버를 실행한다.
//    서버가 실행된 것을 콘솔창에서 확인하기 위해 'Server is running...' 로그를 출력한다
app.listen(3200, function(){
  console.log('Server is running...');
});

함수로 만들어주고 함수만 적어주면 편안~

 

 

저작자표시

'생활코딩 > WEB2' 카테고리의 다른 글

생활코딩 - WEB2 Javascript로 복습하기  (0) 2022.01.24
'생활코딩/WEB2' Related Articles more
Comments