Node.js (4)

송예원·2024년 10월 3일

node.js

목록 보기

4/6

https://www.notion.so/Node-js-4-11683153044280118b59f3ddd844d194?pvs=4

0주차 워크북 복습!

OSI 7계층 모델
: ISO가 다영한 네트워크간의 호환을 위해 만든 표준 네트워크 모델

1계층: 물리계층 (= Physical Layer)
실제 장치를 연결하기 위한 전기.물리적 세부사항을 정의한 계층으로 랜선 등이 포함
CAT: 케이블의 종류를 일종의 묶음으로 분류. 굵기와 선의 수로 분류
외에도 케이블 선, 커넥터, 렌 케이블 등을 분류하는 기준도 존재
디지털 데이터를 아날로그적인 전기적 신호로 변환하여 네트워크 전선에 흘려보냄
네트워크 전선은 0101과 같은 디지털 신호를 이해할 수 없음
→ 이런 디지털 데이터를 네트워크 전선이 이해할 수 있는 아날로그 형태로 변환 (아날로그를 디지털 신호로 변환도 가능)
```
    
```
2계층: 데이터 링크 계층 (= Data Layer)
두 지점 간의 신뢰성 있는 전송을 보장하기 위한 계층으로, 16진수 12개로 구성된 MAC 주소 사용 (MAC 주소는 랜카드당 하나 존재, 변하지 않음)
MAC 주소를 사용해 네트워크 데이터를 어느 컴퓨터로 보낼지 정함
패킷이 여러개의 라우터를 지나는 동안 패킷의 헤더에 존재하는 MAC 주소는 계속 변함

3계층: 네트워크 계층 (= Network Layer)
IP 주소를 사용해 네트워크 데이터를 어느 컴퓨터로 보낼지 정함
IP 주소는 변할 수 있음 (MAC 주소와 달리)
패킷이 여러개의 라우터를 지나는 동안 패킷의 헤더에 존재하는 IP 주소는 변하지 않음
여러개의 노드를 거칠 때마다 경로를 찾아주는 역할을 하는 계층
다양한 길이의 데이터를 네트워크를 통해 전달하고, 전송 계층이 요구하는 서비스 품질을 위해 기능.절차적 수단을 제공
```
    
```
4계층: 전송 계층 (= Transport Layer)

컴퓨터로 들어온 네트워크 데이터를 어느 포트로 보낼지 정함
하나의 컴퓨터에는 여러 프로세스가 동작중인데, 각 프로세스마다 다른 네트워크 포트를 가지게 됨
양 끝단의 사용자들이 신뢰성 있는 데이터를 주고받게 함으로써 상위 계층이 데이터 전달의 유효성이나 효율성을 신경쓰지 않게 해줌 (신뢰성 있는 데이터 보장)

5계층: 세션 계층 (= Session Layer)
양 끝단의 응용 프로세스가 통신을 관리하는 법 제공
6계층: 표현 계층 (= Presentation Layer)
코드간의 번역을 담당하는 계층, 사용자 시스템에서 데이터 구조를 통일하여 응용 프로그램 계층에서 데이터 형식의 차이로 인해 발생하는 부담을 덜어줌 (이미지 압축, 데이터 암호화)
7계층: 응용 프로그램 계층 (= Application Layer)
응용 프로세스와 직접 관계하여 일반적인 응용 서비스 수행

웹 서비스의 UI, I/O 담당 (프론트엔드, 백엔드 서버의 동작 레이어)

→ 각 계층은 이전 계층으로부터 데이터를 전달받으며, 자신의 계층에서 필요한 데이터들을 기존 데이터에 추가로 덧붙임/ 필요한 데이터만 분리해 사용
계층을 나누면 해당 계층에서 어떤 행동을 할지 명확하게 구분할 수 있고, 그만큼 이해도 쉬워짐

또한 계층별로 필요한 데이터를 표준화할 수 있어짐

TCP/ IP 4계층 모델 ** TCP: 전송 제어 프로토콜
- 1계층: Network Interface Layer : OSI 7계층 모델의 1, 2계층
- 2계층: Internet Layer : OSI 7계층 모델의 3계층 (컴퓨터간 라우팅 담당)
- 3계층: Transport Layer : OSI 7계층 모델의 4계층 (TCP, UDP와 같은 프로토콜 사용)
- 4계층: Application Layer : OSI 7계층 모델의 5, 6, 7계층 (HTTP, Telent, SSH, FTP와 같은 프로토콜 사용)

: 실제 사용되는 인터넷 통신 모델로, IP와 TCP에 기반한 통신을 사용함

HTTP/ HTTPS : HTTP는 보안에 취약! (데이터를 있는 그대로 전송…) → 데이터를 암호화하기 위해 SSL이라는 레이어가 생성되고, 이 레이어를 기반으로 하는 HTTP 통신이 HTTPS

서버! : 서버: 클라이언트의 요청에 적절히 응답 주는 것
- 인터넷: 데이터를 전달하는 네트워크 망 여러 형태의 네트워크, 서브 네트워크, 다양한 개체로 구성
  - Network Edge: 끝에 있는 개체, End System으로 구성 ex) 웹 브라우저, 스마트폰, 서버 등 실제 어플리케이션
  - Access Network: End System이 인터넷의 첫 부분과 연결되는 구간 ex) 랜선, 와이파이
  - Network Core: End System의 정보를 실어 나르는 역할 ex) 라우터
- 인터넷 통신: End System간 패킷을 주고 받는 것
- 패킷: 인터넷 상에서 장치들이 서로 통신할 때 전송하는 데이터 조각 = Datagram
- IP: 네트워크 계층에서 작용하는, 인터넷 상에서 유일하게 상대를 식별할 수 있는 수단! (= 인터넷 상의 주소) : 클라이언트가 요청을 보낼 때 패킷에 IP주소를 담고, Access Network를 통해 Network Core로 전송함 → 패킷을 받은 라우터가 자신의 네트워크 계층에서 패킷 안에 있는 IP를 확인한 후 적당한 라우터에 전송하고, 최종적으로 Network Edge에 도착하면 네트워크 계층에서 패킷을 확인한 후 IP주소에 따라 전송할 곳을 정함 ⇒ 라우터는 실제 데이터를 확인하지 않고 패킷의 정보만을 해석해 목적지를 추적함!
- PORT=포트: 어느 프로그램으로 패킷을 이동할지 정함
- 3 way- handshake: 데이터를 보내기 전 수신처가 있는지 확인하는 것 syn: 클라이언트가 서버에 연결을 요청할 때 보내는 패킷 (받을 수 있는가?) syn-ack: 서버가 syn패킷을 받은 뒤 클라이언트에게 보내는 패킷 클라이언트의 요청을 확인했고, 서버와 연결하겠다는 뜻 ack: 서버의 syn-ack 패킷을 받은 뒤 연결 확립을 위해 서버에 보내는 패킷 (받을 수 있다!) ⇒ 이 과정을 거쳐 서로 데이터를 주고 받음!
- 데이터 전달 보증: 패킷이 전달 도중 소실되었다면? → 패킷의 수신 여부를 알려주면 됨!
- 순서 보장: 패킷의 양이 일정량 이상이 되면 나눠 전송하는데, 뒤에 보낸 패킷이 먼저 도착한다면… → sequence number를 패킷에 붙여 전송해 순서를 알려줌!
- UDP: User Datagram Protocol (사용자 데이터그램 프로토콜) : 3 way- handshake, 데이터 전달 보증, 순서 보장 없이 기존의 IP에 포트와 체크 섬만 추가한 프로토콜 ** 체크섬: 데이터의 무결성 확인을 위한 오류 검출 기법 → TCP에 비해 신뢰성은 떨어지지만 속도는 더 빠름
1. 클라이언트가 서버에게 3 way- handshake를 요청
2. 연결이 되면 Access Network를 통해 패킷+ a를 인터넷 망으로 전송
3. Network Core로 들어가 라우터의 네트워크 계층에서 패킷의 IP주소를 본 후 다음 라우터로 전송
4. Network Edge에 도달하면 물리 계층, 데이터 계층을 거쳐 네트워크 계층에서 IP를 확인
5. IP가 옳다면 전송 계층에서 포트 번호 확인 후 알맞은 애플리케이션으로 전송 후 처리
  
  +) 이후 응답을 해야한다면 다시 서버에서 클라이언트로 패킷 전송

Web Server, WAS
- Web Server (웹서버): 정적 리소스 처리 ** 정적 리소스: HTML, CSS, 이미지 등 정적 자원
- WAS: 동적 리소스 처리 ** 동적 리소스: DB조회나 다양한 로직 처리를 하는 것 대표적 WAS: 스프링 부트의 Tomcat WAS 안에는 Web Server가 포함되어 있기 때문에 정적 리소스도 처리 가능 ~.
- Web Server, WAS를 같이 사용하는 이유? WAS는 Web Server에 비해 더 비싸고 오류가 많이 남… → 정적 리소스를 많이 사용하면 Web Server만 사용! → WAS가 오류났을 떄 Web Server는 요청을 WAS로 보내지 않고 바로 오류페이지 제공 → Web Server에서 추가적인 보안 처리 가능 ⇒ Web Server를 WAS 앞단에서 사용 ~.

35. App 제작- 글수정- 수정할 정보 전송

: 수정할 내용을 서버로 전송하는 방법

hidden 기능을 사용해 바뀔 것과 바뀌지 않아야 할 것을 구분

main.js

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
 
function templateHTML(title, list, body, control){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${control}
    ${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}`,
            `<a href="/create">create</a>`
          );
          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}`,
              `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
            );
            response.writeHead(200);
            response.end(template);
          });
        });
      }
    } else if(pathname === '/create'){
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        var list = templateList(filelist);
        var template = templateHTML(title, list, `
          <form action="/create_process" method="post">
            <p><input type="text" name="title" placeholder="title"></p>
            <p>
              <textarea name="description" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
        `, '');
        response.writeHead(200);
        response.end(template);
      });
    } else if(pathname === '/create_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var title = post.title;
          var description = post.description;
          fs.writeFile(`data/${title}`, description, 'utf8', function(err){
            response.writeHead(302, {Location: `/?id=${title}`});
            response.end();
          })
      });
    } else if(pathname === '/update'){
      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,
            `
            <form action="/update_process" method="post">
              <input type="hidden" name="id" value="${title}">
              <p><input type="text" name="title" placeholder="title" value="${title}"></p>
              <p>
                <textarea name="description" placeholder="description">${description}</textarea>
              </p>
              <p>
                <input type="submit">
              </p>
            </form>
            `,
            `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
          );
          response.writeHead(200);
          response.end(template);
        });
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

36. App 제작- 글수정- 파일명 변경, 내용저장

: 전송된 수정 내용을 받아 파일명을 변경, 내용을 저장하는 방법

main.js

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
 
function templateHTML(title, list, body, control){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${control}
    ${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}`,
            `<a href="/create">create</a>`
          );
          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}`,
              `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
            );
            response.writeHead(200);
            response.end(template);
          });
        });
      }
    } else if(pathname === '/create'){
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        var list = templateList(filelist);
        var template = templateHTML(title, list, `
          <form action="/create_process" method="post">
            <p><input type="text" name="title" placeholder="title"></p>
            <p>
              <textarea name="description" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
        `, '');
        response.writeHead(200);
        response.end(template);
      });
    } else if(pathname === '/create_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var title = post.title;
          var description = post.description;
          fs.writeFile(`data/${title}`, description, 'utf8', function(err){
            response.writeHead(302, {Location: `/?id=${title}`});
            response.end();
          })
      });
    } else if(pathname === '/update'){
      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,
            `
            <form action="/update_process" method="post">
              <input type="hidden" name="id" value="${title}">
              <p><input type="text" name="title" placeholder="title" value="${title}"></p>
              <p>
                <textarea name="description" placeholder="description">${description}</textarea>
              </p>
              <p>
                <input type="submit">
              </p>
            </form>
            `,
            `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
          );
          response.writeHead(200);
          response.end(template);
        });
      });
    } else if(pathname === '/update_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          var title = post.title;
          var description = post.description;
          fs.rename(`data/${id}`, `data/${title}`, function(error){
            fs.writeFile(`data/${title}`, description, 'utf8', function(err){
              response.writeHead(302, {Location: `/?id=${title}`});
              response.end();
            })
          });
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

37. App 제작- 글삭제- 삭제버튼 구현

: 링크 대신 form을 사용해 삭제 버튼을 만드는 방법

v 링크를 사용하면 안되는 이유@ :

링크를 사용하면 버튼을 클릭했을 때 페이지로 이동함! (오류 발생 가능?)

→ 삭제 클릭시 바로 삭제될 수 있게 구현해야 함

⇒ POST 방식으로 설정

main.js

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
 
function templateHTML(title, list, body, control){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${control}
    ${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}`,
            `<a href="/create">create</a>`
          );
          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}`,
              ` <a href="/create">create</a>
                <a href="/update?id=${title}">update</a>
                <form action="delete_process" method="post">
                  <input type="hidden" name="id" value="${title}">
                  <input type="submit" value="delete">
                </form>`
            );
            response.writeHead(200);
            response.end(template);
          });
        });
      }
    } else if(pathname === '/create'){
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        var list = templateList(filelist);
        var template = templateHTML(title, list, `
          <form action="/create_process" method="post">
            <p><input type="text" name="title" placeholder="title"></p>
            <p>
              <textarea name="description" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
        `, '');
        response.writeHead(200);
        response.end(template);
      });
    } else if(pathname === '/create_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var title = post.title;
          var description = post.description;
          fs.writeFile(`data/${title}`, description, 'utf8', function(err){
            response.writeHead(302, {Location: `/?id=${title}`});
            response.end();
          })
      });
    } else if(pathname === '/update'){
      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,
            `
            <form action="/update_process" method="post">
              <input type="hidden" name="id" value="${title}">
              <p><input type="text" name="title" placeholder="title" value="${title}"></p>
              <p>
                <textarea name="description" placeholder="description">${description}</textarea>
              </p>
              <p>
                <input type="submit">
              </p>
            </form>
            `,
            `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
          );
          response.writeHead(200);
          response.end(template);
        });
      });
    } else if(pathname === '/update_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          var title = post.title;
          var description = post.description;
          fs.rename(`data/${id}`, `data/${title}`, function(error){
            fs.writeFile(`data/${title}`, description, 'utf8', function(err){
              response.writeHead(302, {Location: `/?id=${title}`});
              response.end();
            })
          });
      });
    } else if(pathname === '/delete_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          fs.unlink(`data/${id}`, function(error){
            response.writeHead(302, {Location: `/`});
            response.end();
          })
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

38. App 제작- 글삭제 기능 완성

main.js

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
 
function templateHTML(title, list, body, control){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${control}
    ${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}`,
            `<a href="/create">create</a>`
          );
          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}`,
              ` <a href="/create">create</a>
                <a href="/update?id=${title}">update</a>
                <form action="delete_process" method="post">
                  <input type="hidden" name="id" value="${title}">
                  <input type="submit" value="delete">
                </form>`
            );
            response.writeHead(200);
            response.end(template);
          });
        });
      }
    } else if(pathname === '/create'){
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        var list = templateList(filelist);
        var template = templateHTML(title, list, `
          <form action="/create_process" method="post">
            <p><input type="text" name="title" placeholder="title"></p>
            <p>
              <textarea name="description" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
        `, '');
        response.writeHead(200);
        response.end(template);
      });
    } else if(pathname === '/create_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var title = post.title;
          var description = post.description;
          fs.writeFile(`data/${title}`, description, 'utf8', function(err){
            response.writeHead(302, {Location: `/?id=${title}`});
            response.end();
          })
      });
    } else if(pathname === '/update'){
      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,
            `
            <form action="/update_process" method="post">
              <input type="hidden" name="id" value="${title}">
              <p><input type="text" name="title" placeholder="title" value="${title}"></p>
              <p>
                <textarea name="description" placeholder="description">${description}</textarea>
              </p>
              <p>
                <input type="submit">
              </p>
            </form>
            `,
            `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
          );
          response.writeHead(200);
          response.end(template);
        });
      });
    } else if(pathname === '/update_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          var title = post.title;
          var description = post.description;
          fs.rename(`data/${id}`, `data/${title}`, function(error){
            fs.writeFile(`data/${title}`, description, 'utf8', function(err){
              response.writeHead(302, {Location: `/?id=${title}`});
              response.end();
            })
          });
      });
    } else if(pathname === '/delete_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          fs.unlink(`data/${id}`, function(error){
            response.writeHead(302, {Location: `/`});
            response.end();
          })
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

39. JavaScript 객체의 형식

object와 array의 공통점: 정보를 정리정돈하는 수납상자

object (객체):

순서가 없는 정보를 저장/

이름으로 식별자를 가질 수 있음 (key/ value 형식)

var roles = {
  'programmer':'egoing',
  'designer' : 'k8805',
  'manager' : 'hoya'
}
console.log(roles.designer); //k8805

array (배열):

정보를 순서에 따라 정리정돈/

고유한 숫자 식별자를 가짐 (인덱스)

var members = ['egoing', 'k8805', 'hoya'];
console.log(members[1]); // k8805

40. JavaScript- 객체- 반복

: 객체와 반복문을 함께 사용하는 방법

// array
var members = ['egoing', 'k8805', 'hoya'];
console.log(members[1]); // k8805
var i = 0;
while(i < members.length){
  console.log('array loop', members[i]);
  i = i + 1;
}

// object
var roles = {
  'programmer':'egoing',
  'designer' : 'k8805',
  'manager' : 'hoya'
}
console.log(roles.designer); //가능, k8805
console.log(roles['designer']); //가능, k8805
 
for(var name in roles){ // in 중요!!
  console.log('object => ', name, 'value => ', roles[name]);
}

41. JavaScript- 객체- 값으로서 함수

자바스크립트에서의 함수:

처리해야 될 일에 관한 어떠한 정보를 담고 있는, 구문 (statement)이자 값

** 값: 함수를 변수에 넣을 수 있다면 값으로 판단 가능

함수 ⇒ 배열의 원소로도, 객체로도… 사용 가능

var f = function(){
  console.log(1+1);
  console.log(1+2);
}
var a = [f];
a[0](); // 함수 f (function) 실행 
 
var o = {
  func:f
}
o.func(); // 함수 f (function) 실행

42. JavaScript- 객체- 데이터와 처리 방법을 담는 그릇으로서 객체

객체에 함수를 담으면…

→ 자바스크립트에서는 함수가 값이기 때문에 함수 안에 함수를 객체의 멤버로 추가 가능

! this: 객체 안에 함수가 있고, 그 함수에서 같은 객체 내의 변수를 참고한다면…

알아서 지정! (해당 객체인걸로 ~.)

var q = {
  v1:'v1',
  v2:'v2',
  f1:function (){
    console.log(this.v1); // 객체 q 가리키기
  },
  f2:function(){
    console.log(this.v2); // 객체 q 가리키기
  }
}
 
q.f1();
q.f2();

> v1
v2

43. App제작- 템플릿 기능 정리정돈하기

리팩토링: 이전의 코드와 동작방법은 똑같이 가져가면서

내부의 코드를 더 효율적으로 바꾸는 행위 ex) 객체화

main.js

var template = {
  HTML:function(title, list, body, control){
    return `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      ${control}
      ${body}
    </body>
    </html>
    `;
  },list:function(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;
  }
}

44. Node.js 모듈의 형식

모듈을 이용하면 객체도 정리가 가능!

모듈을 받으면 다른 파일에서도 받은 모듈안에 있는 기능 사용 가능…

(모듈의 일부분만 가져와서 사용할수도 있음)

nodejs/mpart.js

var M = {
  v:'v',
  f:function(){
    console.log(this.v);
  }
}
 
module.exports = M;

muse.js

var part = require('./mpart.js');
part.f();

이렇게 작성하면 mpart.js에서 만들어진 객체 M을 muse.js 파일에서 사용 가능!

45. App 제작 - 모듈의 활용

라이브러리: 작은 프로그램들의 조각… (재사용 가능)

template.js

module.exports = { // 가능!
  HTML:function(title, list, body, control){
    return `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      ${control}
      ${body}
    </body>
    </html>
    `;
  },list:function(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;
  }
}

main.js

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
var template = require('./lib/template.js');
 
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 = template.list(filelist);
          var html = template.HTML(title, list,
            `<h2>${title}</h2>${description}`,
            `<a href="/create">create</a>`
          );
          response.writeHead(200);
          response.end(html);
        });
      } else {
        fs.readdir('./data', function(error, filelist){
          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
            var title = queryData.id;
            var list = template.list(filelist);
            var html = template.HTML(title, list,
              `<h2>${title}</h2>${description}`,
              ` <a href="/create">create</a>
                <a href="/update?id=${title}">update</a>
                <form action="delete_process" method="post">
                  <input type="hidden" name="id" value="${title}">
                  <input type="submit" value="delete">
                </form>`
            );
            response.writeHead(200);
            response.end(html);
          });
        });
      }
    } else if(pathname === '/create'){
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        var list = template.list(filelist);
        var html = template.HTML(title, list, `
          <form action="/create_process" method="post">
            <p><input type="text" name="title" placeholder="title"></p>
            <p>
              <textarea name="description" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
        `, '');
        response.writeHead(200);
        response.end(html);
      });
    } else if(pathname === '/create_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var title = post.title;
          var description = post.description;
          fs.writeFile(`data/${title}`, description, 'utf8', function(err){
            response.writeHead(302, {Location: `/?id=${title}`});
            response.end();
          })
      });
    } else if(pathname === '/update'){
      fs.readdir('./data', function(error, filelist){
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = queryData.id;
          var list = template.list(filelist);
          var html = template.HTML(title, list,
            `
            <form action="/update_process" method="post">
              <input type="hidden" name="id" value="${title}">
              <p><input type="text" name="title" placeholder="title" value="${title}"></p>
              <p>
                <textarea name="description" placeholder="description">${description}</textarea>
              </p>
              <p>
                <input type="submit">
              </p>
            </form>
            `,
            `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
          );
          response.writeHead(200);
          response.end(html);
        });
      });
    } else if(pathname === '/update_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          var title = post.title;
          var description = post.description;
          fs.rename(`data/${id}`, `data/${title}`, function(error){
            fs.writeFile(`data/${title}`, description, 'utf8', function(err){
              response.writeHead(302, {Location: `/?id=${title}`});
              response.end();
            })
          });
      });
    } else if(pathname === '/delete_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          fs.unlink(`data/${id}`, function(error){
            response.writeHead(302, {Location: `/`});
            response.end();
          })
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

송예원

이전 포스트

Node.js (3)

다음 포스트

Node.js (4)

node.js

0주차 워크북 복습!

35. App 제작- 글수정- 수정할 정보 전송

36. App 제작- 글수정- 파일명 변경, 내용저장

37. App 제작- 글삭제- 삭제버튼 구현

38. App 제작- 글삭제 기능 완성

39. JavaScript 객체의 형식

40. JavaScript- 객체- 반복

41. JavaScript- 객체- 값으로서 함수

42. JavaScript- 객체- 데이터와 처리 방법을 담는 그릇으로서 객체

43. App제작- 템플릿 기능 정리정돈하기

44. Node.js 모듈의 형식

45. App 제작 - 모듈의 활용

Node.js (3)

Node.js (8)

0개의 댓글