Node.js - 1.수업소개

자바스크립트에 익숙한 웹 개발자들이 새로운 컴퓨터 언어를 배우지 않고도 웹 페이지를 자동으로 생성하는 서버 쪽 애플리케이션을 만들 수 있도록 만들어진 것이 node.js이다.

 

2008년 구글이 자바스크립트의 성능을 개선하기 위해서 v8엔진을 개발해 오픈소스로 공개했다. node.js의 창시자인 라이언이 v8 엔진을 기반으로 하는 node.js를 만들었다. 태초의 자바스크립트가 웹 브라우저를 제어하는 것이었다면 node.js는 자바스크립트를 이용해서 컴퓨터자체를 제어한다. 

 

Node.js - 2. 수업의 목적

수업의 목적 : 생산성을 높이는 것

node.js의 템플릿을 사용하면 한번에 여러 코드를 바꿀 수 있다.

 

Node.js - 3.1.설치 (Windows)

https://nodejs.org/ko/

 

Node.js

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

nodejs.org

 

Node.js - 4.공부방법

목표 : node.js로 웹 애플리케이션 만들기

 

1. javascript 문법 배우기

2. node.js의 기능 배우기

3. node.js의 기능을 사용해서 웹 애플리케이션 만들기

 

아는 내용은 넘겨서 시간을 단축하자.

 

Node.js - 5.Node.js로 웹서버 만들기

웹 브라우저가 주소를 입력해서 요청하면 웹서버는 그 요청에 따른 정보를 찾아서 응답해주는 관계이다.

node.js는 아파치와 같이 웹서버의 역할도 할 수 있다. 

 

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);
    response.end(fs.readFileSync(__dirname + url));
 
});
app.listen(3000);

해당 코드를 실행하면 웹 서버를 실행할 수 있다.

사용자가 요청할 때마다 node.js가 경로에 해당하는 파일을 javascript를 통해 만들어서 읽는다.

 

Node.js - 6.1.JavaScript 문법 - Number Data type

숫자를 따로 '' 혹은 ""로 감싸지 않으면 number data type으로 처리한다.

node syntax/Number.js를 콘솔에 입력하면 Number.js 파일의 실행 결과를 확인할 수 있다.

 

Node.js - 6.2.JavaScript 문법 - String

어떠힌 문자를 '' 혹은 ""로 감싸면 string data type으로 처리한다.

.length를 이용하면 javascript에서와 같이 문자열의 길이를 얻을 수 있다.

 

Node.js - 7.1. JavaScript 문법 - 변수의 형식

상수 : 변하지 않고 하나의 값만 가리키는 수

변수 : 변할 수 있는 수

 

변수를 선언할 때는 앞에 var을 붙인다.

 

Node.js - 7.2.JavaScript 문법 - 변수의 활용

변수를 이용하면 데이터에 이름을 붙일 수 있기 때문에 많은 데이터를 관리하기 편하다.

또한 코드의 가독성을 높이고 중복을 제거할 수 있다.

 

Node.js - 8.JavaScript 문법 - Template Literal

var name = 'k8805';
// String literals
var letter = 'Dear '+name+'\n\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '+name+' Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa egoing qui officia deserunt mollit anim id est laborum. '+name;
 
// Template literals
var letter = `Dear ${name}
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ${name} Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ${1+1} Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa egoing qui officia deserunt mollit anim id est laborum. ${name}`;
 
console.log(letter);

\를 이용해서 줄바꿈을 하면 코드 상에서만 줄바꿈이 되고 출력 결과는 바뀌지 않는다.

\n을 이용해서 줄바꿈을 해야 한다.

 

이는 상당히 번거로운 작업이기 때문에 template literal(``)을 사용한다.

`` 안에서는 자연스럽게 줄을 평소대로 enter와 space로 바꿀 수 있고 문자 데이터 안에 변수도 ${ }를 활용해 치환시킬 수 있다.

 

Node.js - 9.URL의 이해

http - 통신 protocol, 웹 브라우저와 웹 서버가 서로 데이터를 주고 받기 위해서 만든 통신 규칙

opentutorials.org - host(domain), 인터넷에 접속되어있는 각각의 컴퓨터

3000 - port, 3000번 포트에 연결되어있는 서버와 통신, 기본이 80

main - path, 어떤 디렉토리의 어떤 파일인지 나타냄

id - query string, 웹서버에 전달하고자 하는 데이터

 

Node.js - 10.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;
    console.log(queryData.id);
    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(queryData.id);
 
});
app.listen(3000);

콘솔에서 node.js 서버가 돌아가고 클라이언트가 브라우저 상에서 주소:포트번호/?객체이름=값을 주면 js 서버가 입력값을 받아서 거기에 해당하는 값을 출력한다.

 

var url = require( 'url' )로 url에 url이라는 객체를 가져와 require로 url에 상속한다.

url.parse( http~ , true) parse의 인자로 url을 전달해주고 분리된 여러객체중에서 속성 query를 가져온다.

app.listen()으로 포트 번호를 지정한다.

 

Node.js-11.App 제작-동적인 웹페이지 만들기

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);
    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);
 
});
app.listen(3000);

해당 웹페이지를 실행하면 url에 입력하는 값에 따라 title과 h2의 값이 바뀐다.

사용자의 입력에 따라 웹페이지가 바뀌기 때문에 동적인 웹페이지라고 할 수 있다.

 

Node.js-12.Node.js의 파일 읽기 기능

CRUD는 정보 시스템에서 가장 중요한 기능들이다. 특히 C와 R는 없어서는 안된다.

 

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

sample.txt 파일을 읽는 방법이다.

 

Node.js-13.App 제작- 파일을 이용해 본문 구현

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

위에서 배운 내용을 총집합해서 파일을 이용한 웹 페이지 만들기에 성공했다.

 

Node.js-14.JavaScript-Boolean

boolean : True / False만을 가리키는 변수 타입

비교 연산자를 통해 참과 거짓을 나눈다.

조건문에 주로 사용된다.

티스토리툴바