[웹개발 기초 스터디]Node.js (1)

✔ Node.js란 무엇인지

• 웹브라우저 밖의 자바스크립트

❓ 왜 사용하는지✔ Node.js란 무엇인지

• 웹브라우저 밖의 자바스크립트

❓ 왜 사용하는지

• 만약 1억 개의 웹페이지의 모든 ol태그를 ul태그로 바꾸려 할 때

→ 원래 html 페이지 같은 경우에는 파일 하나하나마다 태그들을 바꾸어줘야 함

 💡 Node.js를 사용하면 Template.js라는 파일 내용만 수정하면 됨!

 💡 Because 웹페이지를 일 억개를 저장한 것이 아니라, 사용자가 어떠한 페이지를 요청할 때마다 node.js와 같은 기술로 순간순간의 웹페이지를 프로그래밍적으로 생산해내기 때문에 가능

 💡 뿐만 아니라 Node.js는 사용자에게 컨텐츠 읽기 뿐만 아니라 생성, 수정, 제거도 웹을 통해 가능토록 제공함

 

🛰 설치(Window 기준)

• 웹브라우저 위에서 돌아가는 웹사이트 혹은 웹페이지 혹은 웹 어플리케이션이라는 것을 만든다
• 웹브라우저가 가지고 있는 여러가지 기능들 중에서 우리가 구현하고자 하는 웹 어플리케이션 기능에 기반해, html이라고 하는 컴퓨터 언어의 문법에 따라 호출함으로써 웹 어플리케이션을 만들게 됨

• 위와 유사하게 JavaScript라는 언어를 통해서 Node.js runtime이 가지고 있는 여러가지 기능들 중 우리가 필요한 것들을 호출함으로써 Node.js Application을 만들 수 있음.
• cmd(=명령 프롬프트, 콘솔창)로 node 버전확인

• node 명령어를 입력하면, 자바스크립트라는 문법을 이용해서 Node.js가 갖고 있는 기능을 사용가능 (ex 콘솔 로그 계산)

// console.log는 콘솔에 값이 찍히게 하는 것이고, return 값이 없으므로 undefined가 출력

• ctrl + c 를 눌러 중단 가능

But 이렇게 직접 입력하는 것보다, 파일에 저장해두고 원할 때마다 실행하게끔 할것임

 💡 1. js 파일에 원하는 명령어 입력

 💡 2. cmd에서 1에서 저장한 파일이 있는 경로로 이동

 💡 3. node <파일명> 하면 명령어 실행

그냥 cmd에서 명령어를 치는 것이 지금은 간단해보일 수 있지만, 코드가 더 길어지면 이렇게 파일에 저장해두고 사용하는 것이 훨씬 간편!!

---

🚩 수업의 목표는

노드 js 로 만들어진 웹 애플리케이션을 만드는 것

← 이걸 위해선 각 스텝마다 노드 js runtime이 갖고 있는 기능들을 실행시켜야 함

← 노드 js 기능을 실행하기 위한 조작 장치는 자바스크립트라는 컴퓨터 언어

‼ 따라서

1. 적당한 자바스크립트의 문법
2. 자스의 문법을 통해 적당한 노드 js의 기능 배우기
3. 노드 js 기능을 이용해 애플리케이션을 하나씩 완성

---

💫 Node.js로 웹서버 만들기

//main.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'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + url));
		// readFileSync는 node.js가 경로에 해당하는 파일을 가져오게함
		// response.end는 사용자에게 데이터 전송하고 응답 마무리하는 기능
 
});
app.listen(3000); 

Node.js는 프로그래밍적으로 사용자에게 전송할 데이터를 생성한다는 것이 힘

✅ JS 문법

- Number, String

• 숫자형: 그냥 숫자 입력
• 문자열: ""이나 ''안에 입력

- 변수

• 변수 앞에는 var 붙이기

- Template Literal - 줄바꿈

var name ='Jay'
var letter = 'Dear' +name+'\\n\\nWhen I say I love'+name+',please believe its true';
console.log(letter);
// 개행을 원할 때마다 \\n을 작성, 변수를 추가하고 싶을 때 마다 '+name+' 작성하면 비효율적

var letter = `Dear ${name}

When I say I love ${name},please believe its true`;
console.log(letter);
// 문자열을 `으로 감싸고,엔터로 개행, 변수명을 ${변수}로 표기해 효율
// ${변수}는 변수로 치환

- Boolean

• 참과 거짓을 나타내는 비교연산자
• 데이터타입은 true/false (변수 사용 불가)

- 비교연산자

• == // 좌항 우항 비교
• === // 정확하게 같은지

console.log(undefined == null); //true
console.log(undefined === null); //false

- 조건문

console.log('혜은');
if(false){
console.log('재현'); 
} else {
console.log('도영'); 
}
console.log('백현');

// 출력: 혜은 도영 백현 

- 배열과 반복문

• 반복문 while
  • 복수의 반복되는 작업을 처리하는 도구
  • while(조건) {반복문}
• 배열: 복수의 데이터를 보관하는 그룹

var number = [1, 400, 12, 34];
var i = 0;
var total = 0;
while(i < number.length){
  total = total + number[i];
  i = i + 1;//반복하기
}
console.log(`total : ${total}`);

// 출력: total: 447

- 함수와 입출력

• return
  • 함수 값을 반환하고, 그 함수를 종료한다.
  • return 이후의 명령은 수행하지 않는다.

---

💽URL

같은 파일이지만 웹 브라우저에게 서로 다른 페이지를 만들어 보냄.

• http -> protocol (통신 규칙): 어떤 식으로 통신할 것인지. 웹 브라우저와 웹 서버가 데이터를 주고 받기 위해 만든 통신 규약
• opentutorials.org -> host(domain) : 인터넷에 연결 되어있는 컴퓨터를 가리키는 주소
• 3000 -> port: 3000번 포트에 연결되어 있는 서버와 통신
• main -> path : 컴퓨터 안의 어떤 디렉토리의 어떤 파일인지경로를 가리킴
• id=HTML&page=12 -> query string: 웹 서버에게 데이터 전달 가능. 맨 앞에 ?를붙이는 게 규칙. 각 문장은 &로 연결, =으로 값을 연결 → 내가 읽고 싶은 정보는 HTML이고 12페이지이다.

✒URL을 통해서 입력된 값 사용하기

url의 id 값이 다르고, query string 값에 따라 다른 정보 보여주기

var http = require('http');
var fs = require('fs');
var url = require('url'); // 이 애플리케이션이 url이라는 모듈 사용

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData =url.parse(_url,true).query; 
    

    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(queryData.id); //querystring에 따라 다른 정보를 출력
 
});
app.listen(3000);

⇒ 입력한 query string값에 따라서 웹페이지가 동적으로 변화한다.

📐App - 동적인 웹페이지 만들기

적절한 query string 값을 넘겨주고 그 값을 반영하도록 하는 웹페이지 만들기

var http = require('http');
var fs = require('fs');
var url = require('url'); //url이라는 모듈 사용할 것을 node.js에게 알리기

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData =url.parse(_url,true).query; // url의 query string에 담긴 정보 저장돼있음
    var title = queryData.id;
    console.log(queryData.id);

    if(_url == '/'){ // home. queryString에 아무것도 없을 때
     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> 
      <ol>
        <li><a href="/?id=HTML">HTML</a></li>
        <li><a href="/?id=CSS">CSS</a></li>
        <li><a href="/?id=Javascript">JavaScript</a></li>
      </ol>
      <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);

• 위 코드를 main.js 에 입력하고 cmd 에서 실행한 후, querystring 부분에 ?id=HTML 을 넣으면 title 부분만 바뀜

🎞Node.js - 파일 읽기

• 정보시스템에서 핵심: Create, Read, Update, Delete

var fs=require('fs');//filesystem 모듈 다루기
fs.readFile('sample.txt','utf8',function(err,data){//파일 읽고
console.log(data);//data 출력
});
// 파일의 내용 출력됨

📂App 제작 - 파일을 이용해 본문 구현

• query string에 따라 본문이 바뀌는 웹을 구현
• data의 파일의 내용이 변경되었을때 명령어를 다시 사용할 필요 없이 즉각적으로 반영이 된다. Because 사용자가 querystring을 요청했을 때 node.js가 프로그램 줌

var http = require('http');
var fs = require('fs');
var url = require('url'); //url이라는 모듈 사용할 것을 node.js에게 알리기

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData =url.parse(_url,true).query; // url의 query string에 담긴 정보 저장돼있음
    var title = queryData.id;
    console.log(queryData.id);

    if(_url == '/'){ // home. queryString에 아무것도 없을 때
     title='Welcome';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);// 에러
    }
    response.writeHead(200);
    fs.readFile(`data/${queryData.id}`,'utf-8',(err, description)=>{
       
        var template = `<!doctype html>
        <html>
        <head>
          <title>WEB1 - ${title} </title>
          <meta charset="utf-8">
        </head>
        <body>
          <h1><a href="/">WEB</a></h1> 
          <ol>
            <li><a href="/?id=HTML">HTML</a></li>
            <li><a href="/?id=CSS">CSS</a></li>
            <li><a href="/?id=Javascript">JavaScript</a></li>
          </ol>
          <h2> ${title}</h2>
          <p>
          ${description} 
          </p>
        </body>
        </html>
        `;
        response.end(template); // 파일 내용을 변수에 저장해서 가져오기
    });
   
  
   
 
});
app.listen(3000);

📢Node.js - 콘솔에서의 입력값

프로그램의 구성 요소

• INPUT
  • parameter: 입력되는 정보의 형식
  • argument: 형식에 맞춰 실제로 입력한 정보
• OUTPUT- 콘솔 화면, 파일에 저장 ... 등

🔧App 제작 - Not found 구현

유효하지 않은 웹페이지에 접속한다면 Not found를 화면에 출력해보기

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;
 
// _url 은 querystring을 포함하기때문에 querystring이 포함된 주소의 경우 notfound 라는 결과 호출
// querystring을 활용하기 위해 pathname 사용
    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);

🛠App 제작 - 홈페이지 구현

• home과 다른 페이지가 pathname이 /이므로 중첩 if문을 통해 구분
• query string이 존재하지 않는다면 queryData.id의 값도 존재하지 않을 것임을 이용해 다른 값이 들어가도록 세팅 후 웹페이지 출력

📃Node.js에서 파일목록 알아내기

Node.js에서 특정 디렉토리 하위에 있는 파일과 디렉토리의 목록을 알아내는 방법

• 검색어: nodejs file list in directory → fs.readdir

var testFolder = './data'; // 파일목록을 알고싶은 곳의 경로
var fs = require('fs');
 
fs.readdir(testFolder, function(error, filelist){
  console.log(filelist);// 파일리스트 가져오기
})

⇒ data에 존재하는 파일들이 배열 형태로 filelist에 저장

App 제작 - 글목록 출력하기

data 디렉토리에 있는 파일명을 활용해 글 목록을 생성하는 기능 구현

• fs.readdir(경로명,function(error,filelist 등) 활용하여 파일목록 가져오기

var list='<ul>'; 
    
        for(var i=0;i<filelist.length;i++){
          
          list+=`<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
        }

→ 디렉토리에 파일이 추가됨에 따라 자동으로 글목록에 반영

→ querydata, fa.readfile, fs.readdir을 통해 실시간으로 디렉토리를 읽고 파일을 읽게 해 데이터가 바뀌었을 때 로직을 변경할 필요가 없게끔 한다.

 

다음 글은 아래를 확인해주세요.

[웹개발 기초 스터디] Node.js