Node.js

Daniel·2022년 7월 8일
node.js
0

Node.js

목록 보기
1/2
post-thumbnail

Node.js의 탄생

Node.js 탄생 계기

  • Chrome의 V8 엔진

Node.js 탄생 이유

  • javaScript를 웹 브라우저 뿐만 아니라 브라우저 밖에서 Java, Python 처럼 사용하기위해 고안됨
  • 즉 브라우저 밖에서 쓸수있는 javaScript

Node.js 웹 서버의 시작

  • Node.js의 설치 방법
  • 웹 서버를 여는 법
    • 터미널에서 명령어 nodejs파일 을 입력한다.
  • 웹 서버를 닫는 법
    • 터미널에서 ctrl + c를 입력한다.
  • 웹 서버 접속하는 법
    • 웹 브라우저에서 [localhost](http://localhost):번호 를 입력하여 접속한다.

URL

URL 예시

  • http://opentutirials.org:3000/main?id=HTML&page=12

URL의 형식

  • http는 프로토콜 (protocol)으로 통신 규격이다.
  • opentutirials.org는 host(domain)을 의미하고
  • 3000은 통신하게되는 서버의 포트 번호를 의미한다.
  • main은 path로 어떤 파일인지를 가리킨다.
  • id=HTML&page=12은 쿼리 스트링(query string)으로 이 부분을 이용하여 데이터의 전달이 가능하다.
    • 쿼리 스트링의 시작은 ? 를 사용하며 값과 값은 &을 사용하여 구분하고 값의 이름과 값은 = 기호로 구분한다.

URL을 통해 입력된 값을 사용하는법

URL의 쿼리 스트링을 분석하는 코드

var queryData = url.parse(request.url, true).query;
  • parse : 분석하다
  • url.parse(request.url, true).query;
  • URL을 분석하여 변수에게 리턴해준다. (객체타입)

동적 웹페이지 제작

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);
  • template변수에 html문서의 코드를 넣는다.
  • ${} 안에 변수를 집어 넣을 수 있다.
  • ${js에서 선언한 변수명} 이렇게 말이다.

CRUD

  • 정보를 다루는 핵심 처리 방법이다.
  • CRUD
    • Create
    • Read
    • Update
    • Delete

txt 파일읽기

var fs = require('fs');
			// 파일 경로      형식          실행       sample.txt
fs.readFile('sample.txt' ,'utf-8' , function (err , data) {
    console.log(data);
});

주의사항

  • 다른 디렉토리에서 실행시 sample.txt 가 없다면 undefined 가 출력된다.
  • 있더라도 생각한 결과는 나오지 않는다.

txt 파일읽기 (활용)

이 부분은 위의 Node.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="/">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);
    })

  • p 태그 안에 있던 본문이 txt 파일로 저장되어있고, readFile 을 이용하여 읽어야한다.

  • template 변수에 선언된 본문 부분이 ${description}으로 바뀐것을 알 수 있다.

콘솔에서 입력하는 방법

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

리스트 타입으로 데이터를 받아 배열의 3번째 값을 콘솔에 출력한다.

node 파일명 출력하고 싶은 문자열

을 입력하면 출력이 된다.

404 Notfound 구현

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 {
      console.log(pathname);
      response.writeHead(404);
      response.end('Not found');
    }
 
 
 
});
app.listen(3000);
  • 조건문을 사용하여 pathname이 / 인 경우에만 정상적으로 웹페이지 구현이된다.
    • 만약 url의 쿼리스트링이 /ㅁㄴㅇㄹㅁㄴㅇ 인 경우 pathname 이 /ㅁㄴㅇㄹㅁㄴㅇ 로 나온다.
    • pathname 이 / 가 아니면 404notfound를 출력하기 때문에 /ㅁㄴㅇㄹㅁㄴㅇ 은 404notfound를 출력한다.

이해 안가는점

  • url주소를 /?=문자열 의 형식으로 작성해서 접속하면 멀쩡하게 접속된다. 로그로 찍어보면 / 로 찍힌다.

홈페이지 구현

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.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          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);
        });
      } 
      
      // 이부분
      
      else {
        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);
        });
      }
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);
  • queryData.id로 undefind가 나올때와 아닐 때를 조건문으로 판별하여 코드를 작성한다.
    • 주석처리한 부분의 아래 조건문 코드만 봐도 무관한다.

파일 목록 알아내기

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

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

실행 명령어

node nodejs/readdir.js

결과

[ 'CSS', 'HTML', 'JavaScript' ]

  • readFile 처럼 실행하는 위치가 중요하다.
  • 메서드명 그대로 파일목록을 확인할 때 사용한다.
  • 리스트로 나온다.

파일 목록 알아내기 (글목록 출력)

fs.readdir('./data', function(error, 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>';
  
  // ========== 본문에서 말하는 부분 ==========
  
  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);
})
  • 변수에 html 코드를 리스트의 원소를 더하여 저장한다.
  • readdir 을 활용하면 글목록을 동적으로 생성할 수 있다.

함수를 이용한 코드 정리

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;
    if(pathname === '/'){
      if(queryData.id === undefined){
        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>${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);
  • 함수의 이용
    • 코드의 간략화
    • 가독성 향상
    • 유지보수가 쉬워짐
profile
Daniel
폐쇄
다음 포스트

Node.js

0개의 댓글