NodeJS

• 생활코딩 Node.js 수업
• 생활코딩 Node.js 소스코드

Top

---

1. 수업소개

• HTML의 생성을 Web Application에게 맡김

• V8 엔진 기반 : 컴퓨터 자체를 제어

Top

---

2. 수업의 목적

• 생산성

  • 1억개의 웹페이지를 한번에 수정

• 사용자의 참여가 가능

Top

---

3. 설치

• 구조

  • WEB Browser, HTML, WEB Application

  • Node.js runtime, JavaScript, Node.js Application

• Node.js runtime 설치

  • nodejs
  • 설치확인 : 터미널 node -v

Top

---

4. 공부방법

• 공부순서
  • JavaScript 문법
  • Node.js runtime 기능
  • Node.js Application 만들기

Top

---

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

• Web Server
  • 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);

Top

---

9. URL의 이해

• 목표

  • 자바스크립트를 이용해서 node.js의 기능을 호출

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

  • http : protocol : 통신규칙 : 사용자가 서버에 통신할때 어떤 규칙을 이용할지
  • opentutorials.org : host(domain) : 인터넷에 접속되있는 각각의 컴퓨터 : 특정한 인터넷에 연결되어 있는 컴퓨터를 가리키는 주소
  • 3000 : port : 한 대의 컴퓨터 안에 여러 대의 서버 중에 3000번 포트와 연결
  • main : path : 컴퓨터 안에 있는 파일의 경로
  • id=HTML&page=12 : query string : 웹서버에게 데이터를 전달 가능 : ?로 시작, 값과 값은 &, 값의 이름과 값은 =로 구분

Top

---

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

• 목표

  • Query String 에 따라 다른 정보를 보여준다.

• url 값을 추출해 원하는 값을 얻어낼 수 있다.

  • localhost:3000/?id=HTML : id=HTML의 HTML 값을 알아내고 싶다.
  • 검색 : nodejs url parse query string
  • queryData = { id : HTML }
  • queryData.id = HTML

var url = require('url');
var _url = request.url;
    var queryData = url.parse(_url, true).query;
 response.end(queryData.id);

Top

---

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

• 타이틀을 정적으로 바꾸기

  • 본문의 ${title}
  • root로 접속시 제목 Welcome

 var title = queryData.id;
if(_url == '/'){
      title = 'Welcome';
var template =`
 <title>WEB1 - ${title}</title>
response.end(template)

Top

---

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

• CRUD

  • Create, Read, Update, Delete

• READ

  • 검색 : nodejs file read

// nodejs/readfile.js

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

Top

---

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

• 목표

  • Query string 에 따라서 본문이 변경되는 App

• 본문에 넣을 폴더 생성

• fs를 이용해 폴더안의 파일을 읽는다

fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
  var template =`
    <title>WEB1 - ${title}</title>
    <p>${description}</p>
  response.end(template)
}

Top

---

18. NodeJS - 콘솔에서의 입력값

• INPUT

  • Parameter, Argument
  • 검색 : nodejs console input parameters

• OUTPUT

• 배열의 3번째(인덱스2) 부터 값이 들어간다

// conditional.js
var args = process.argv;
if(args[2] === '1'){
  console.log('C1');
} else {
  console.log('C2');
}
console.log('D');

// 출력 : node conditional.js 1 -> C1 D
// 출력 : node conditional.js 2 -> C2 D

Top

---

19.1. App 제작-Not found 구현

• 목표

  • 존재하지 않는 정보에 대한 요청이 들어왔을 때 Not found 오류 메시지를 전송하는 방법

• url.parse(_url, true)

  • url 에 대한 정보가 객체로 담겨있다.
  • pathname : /
  • path : /?id=CSS : Query string 을 포함한 정보

var pathname = url.parse(_url, true).pathname;

if(pathname === '/'){

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

Top

---

19.2. App 제작-홈페이지 구현

• 목표

  • 조건문을 활용해서 홈페이지를 표현하는 방법

• queryData.id === undefined

  • root 경로

if(queryData.id === undefined){
  // root 경로일 때 정보를 보여준다.  
} else {
  // url에 맞는 정보를 보여준다.
}

Top

---

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

• 목표

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

• 검색 : nodejs file list in directory

• 배열로 출력

var testFolder = './data';
var fs = require('fs');
 
fs.readdir(testFolder, function(error, filelist){
  console.log(filelist);
})

Top

---

24. App 제작 - 글목록 출력하기

• 목표
  • data 디렉토리에 있는 파일들의 이름을 이용해서 글 목록을 생성하는 기능을 구현

if(pathname === '/'){
  if(queryData.id === undefined){
    fs.readdir('./data', function(error, 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>';
        ${list}
  })
} else {

}

Top

---

26. App 제작-함수를 이용해서 정리 정돈하기

• 목표
  • 함수를 이용해서 코드를 정리 정돈하는 모습을 경험

function templateHTML(title, list, body){
  // 중복내용
}

function templateList(filelist){
  // 중복내용
}

Top

---

28.1. Nodejs에서 동기와 비동기 1

• 목표

  • Node.js 실행순서를 파악하는 것

• asynchronous

  • 병렬적 처리

Top

---

28.2. Nodejs에서 동기와 비동기 2

• 차이

  • readFileSync : 동기
  • readFile : 비동기

// result == B
var fs = require('fs');
 
console.log('A');
var result = fs.readFileSync('syntax/sample.txt', 'utf8');
console.log(result);
console.log('C');
// 출력 : A B C
 
console.log('A');
fs.readFile('syntax/sample.txt', 'utf8', function(err, result){
    console.log(result);
});
console.log('C');
// 출력 : A C B

Top

---

28.3. JavaScript-callback

var a = function(){
  console.log('A');
}
 
function slowfunc(callback){
  callback();
}
 
slowfunc(a); // A

Top

---

29. Node.js의 패키지 매니저와 PM2

• NPM

  • pm2 설치 : npm install pm2 -g
  • 실행 : pm2 start app.js

Top

---

30. HTML-form

• 목표

  • 컨텐츠를 사용자가 웹을 통해 생성하고 수정하고 삭제하는 방법

• post

  • 편지봉투에는 받는 주소만, 편지지에는 내용을 적는다.
  • 편지지가 허용하는 만큼 데이터 전달 용량이 상대적으로 크다.
  • 내용 노출도 안된다.

• get

  • 편지봉투 겉면 주소란에 모든 내용을 다 적었다.
  • 노출이 되고, 편지봉투에 뭐 열심히 적을래도 공간 부족하니 용량 제한이 있다.

<form action="http://localhost:3000/process_create" method="post">
  <p><input type="text" name="title"></p>
  <p>
    <textarea name="description"></textarea>
  </p>
  <p>
    <input type="submit">
  </p>
</form>

Top

---

31. App - 글생성 UI 만들기

• 목표

  • 글 작성을 할 수 있는 UI를 구현해봅시다.

• 소스코드

Top

---

32. App - POST 방식으로 전송된 데이터 받기

• 목표

  • POST 방식으로 전송된 데이터를 받아서 파일로 저장하는 방법에 대해서 알아보겠습니다.

• 소스코드

Top

---

33. App - 파일생성과 리다이렉션

• 목표

  • 전송된 POST 데이터를 받아서 파일에 저장하고, 그 결과 페이지로 리다이렉션하는 방법에 대해서 알아보겠습니다.

• 소스코드

Top

---

34. App - 글수정 - 수정 링크 생성

• 목표

  • 글 수정 기능을 구현하기 위해서 수정 링크를 추가하는 법을 살펴봅니다.

• 소스코드

Top

---

35. App - 글수정 - 수정할 정보 전송

• 목표

  • 수정할 내용을 서버로 전송하는 법을 살펴봅니다.

• 소스코드

Top

---

36. App - 글수정 - 수정된 내용 저장

• 목표

  • 전송된 수정 내용을 받아서 파일명을 변경하고, 내용을 저장하는 방법을 알아봅니다.

• 소스코드

Top

---

37. App - 글삭제 - 삭제버튼 구현

• 목표

  • 삭제 작업을 하기 위해서는 삭제 버튼이 있어야 합니다. 이 때 링크를 사용하는 안됩니다. 링크 대신 form을 이용해서 삭제 버튼을 만드는 방법을 살펴보겠습니다.

• 소스코드

Top

---

38. App - 글삭제 기능 완성

• 목표

  • 글삭제 기능을 완성해봅시다!

• 소스코드

Top

---

39. App -객체를 이용해서 템플릿 기능 정리 정돈하기

• 목표

  • 객체를 이용해서 탬플릿 기능을 정리 정돈하는 법을 소개합니다.

• 소스코드

Top

---

40. 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(); // v

Top

---

41. App 제작 - 모듈의 활용

• 목표

  • 모듈을 활용해서 템플릿 기능을 모듈화 해보겠습니다.

• 소스코드

Top

---

42. App - 입력 정보에 대한 보안

• 목표

  • 입력정보와 관련해서 보안적으로 처리해야 할 이슈를 살펴보겠습니다.

• 검색 : node path parse

• 소스코드

Top

---

43. App - 출력정보에 대한 보안

• 목표

  • 출력정보에서 발생할 수 있는 보안적인 이슈를 살펴보겠습니다.

• 소스코드

Top

---

44. API

• 목표

  • API라는 중요한 개념의 의미를 알아보고, 지금까지 베일에 쌓여있었던 createServer API의 의미를 살펴보겠습니다.

Top

---