2nd day

Recap from yesterday

---

1. 저평가되던 Javascript 의 위상 변화

**왜 Javascript 의 위상이 바뀌었을까?**

-> 웹 개발 환경의 변화로 인한 결과

2. 과거에는 웹 베이스 프로그램을 할 때 

서버에서 모든 프로그램을 수행 결과만

클라이언트에게 전달 

-> 서버에 부하가 너무 가중

-> 네트워크를 통해서 전달되는 데이터량이 증가

e.g. 

사용자가 많이 몰릴 때 단순한 해결책은, 비용을 들여 서버를 더 증설하는 것이다

하지만, 특정 기간에만 사용자가 증가하는 경우엔 서버를 증설하기도 뭐하다.

예를 들어, 추석 기간에 기차 예매 홈페이지에 특별히 사용자들이 몰리는 경우

추석 기간에 사람들이 많이 몰리니까 서버를 증설하기도 참 애매하다..

추석 기간 외에는 서버가 그렇게 많이 필요하진 않으니까

Front-End Web Application

(Ajax을 이용해서 서버로부터 데이터만 가져오는 방식. 즉, 필요한 데이터만 가져와 서버 부하를 줄이는 통신 방식. 이 때, 자바스크립트가 이용된다.)

Back-End Web Application

Idea!

"이 좋은 Javascript 를 Client 에서만 쓸 필요 있어?"라는 질문을 하며 이것을

서버 쪽으로 가져온다.

Javascript 는 객체 기반언어

(Prototype 기반언어)

jQuery (가장 대중적인 Library) <- Javascript 를 할 줄 아는 사람들 90% 는 다 jQuery 를 쓴다.

여기서 한 가지! jQuery 는 오픈소스이다. 하지만 기업 상에서 쓸 때는 고려해야 할 부분들이 있다.

오픈소스가 가지는 한계는 명확.

회사마다 각자 나름대로의 framework 이 있다. 작은 회사의 경우엔, 그냥 framework 를 가져오고,

혹여나 회사 자체적인 framework 가 필요한데, 본인이 그걸 담당해야 한다면, Javascript 를 많이 파야 한다. 

그렇지 않은 경우, 일반적으로는 그렇게까지 팔 필요는 없다.

Javascript 는 모든 걸 함수로 표현해요!

1. 우리가 알고 있는 함수 - 선언적 함수 (코드 단위의 함수)

2. 함수가 값으로 사용이 될 수 있어요

(이름이 없는 함수로 사용 - 익명함수, 람다함수)

값이 사용이 될 곳에 함수가 들어갈 수 있어요

(변수에 함수를 저장, 다른 함수의 인자로 함수를 사용, 다른 함수의 return 값으로 사용)

3. 객체를 만들어내는 용도의 함수

Node 는 서버쪽 플랫폼.

플랫폼: 다른 프로그램을 실행시켜주는 실행 환경

기반: V8 엔진 (Chrome browser 안에 있는 Javascript engine)

용도: Network 프로그래밍 (HTTP protocol)

특징: Non-blocking I/O 지원

         I/O : 파일처리, 네트워크 소켓, DB 처리

-> Event Driven 방식의 Programming Multi Thread 기반의 프로그래밍을 했었는데 Node 는 Single Thread 를 이용

=> CPU Intensive 한 작업(데이터베이스에서 데이터를 가지고 와 빼고 곱하고 더하는 등)에는 사용을 하지 않는게 좋아요!!

기본 Node 시스템은 V8 엔진 + 기본 API 만 가지고 있어요 (8.8 Mb 정도밖에 안됨..)

프로그램을 작성하기 위해서는 Module 이란게 필요하게 되요!!

그런데 굉장히 많은 (40,000) 외부 module 이 존재해요!

Module 을 관리하는 용도의 Module 을 기본적으로 Node 가 제공 ( NPM - Node Package Manager )

Module 은 크게 몇 가지 카테고리로 분류

설치를 어떻게 하느냐에 따라서 분류

global module ( 시스템에 설치 )

local module ( 우리 프로젝트에서만 사용 )

Module 의 구현이 어떤 언어로 되어 있느냐 (즉, 꼭 Javascript 로 만들 필요는 없다)

Javascript Module

Native Module

기본적으로 제공되느냐, 다운로드 받아야 되느냐

기본 module, 확장 module

NPM 을 이용해서 확장 module 을 설치할 때 

package.json 이라는 파일을 만들어서 여기에 명시한다.

---

Module 은 파일로 구성

앞으로 여러 모듈들을 사용하는 예제를 다룰 것이다.

먼저, Event 를 처리하는 Event 모듈 예제를 보자

CarEvent.js /** * Created by STEP on 15. 8. 4.. */ // 이벤트를 처리하려면 events.EventEmitter 를 상속 // events 내부 module 로 존재해요!! // 1. 필요한 module 을 require var events = require("events"); var util = require("util"); // util 이라는 module. 내장되어 있으며, 상속구현을 위해. // 객체를 생성하기 위해서!! function Car() { this.carName = "sonata"; } // 해당 함수로부터 객체를 생성해 낼 수 있는데 (Car 함수 in this case) // 해당 객체가 event 를 처리하려면 당연한 말이지만 // 함수가 event.EventEmitter 를 상속해야 한다 // 함수의 상속 util.inherits(Car,events.EventEmitter); // 이벤트를 처리하려면 // 이벤트를 등록해야해요!! // 이벤트 이름과 해당 이벤트가 발생됐을 때 처리할 // 내용을 등록 // handler <- event 가 발생했을 때 처리하는 메소드를 handler 라고 한다 var forward = function(){ console.log("차가 가요!!"); }; var stop = function() { console.log("차가 멈춰요!!"); }; // 객체를 생성해 보아요!! var car = new Car(); // 이벤트를 등록해보아요!! car.on("CAR FORWARD",forward); car.on("CAR STOP",stop); // 이벤트를 발생시켜보아요!! car.emit("CAR FORWARD"); // "CAR FORWARD" 라는 이름을 가진 event 를 발생시켜라 는 의미 car.emit("CAR STOP");

function myInfo() {
    console.log("홍길동이예요!!");
}

var myAge = 30;

// 여러개의 값을 return 시킬 때 exports 를 일반적으로 사용
exports.hahaha = { myName : "홍길동"};  // 가리키고 있는 module.exports 에 hahaha 라는 객체를 만든다.
exports.hohoho = 100;  // 가리키고 있는 module.exports 에 100 이라는 값을 가진 hohoho 라는 객체를 만든다.

var module1 = require("./moduleTest");
// 현재 폴더 밑에서 moduleTest.js 를 실행해서
// 그 결과를 가져와!!

console.log(module1.hohoho);

module1 은 exports 를 받지 안는다.

module.exports 를 받는다.

(i.e. module1 = module.exports)

그러나, module.exports 내부에 myName 과 hohoho 가 생성되었기 때문에

module1.hohoho 로 module.exports 내부의 변수를 마음대로 사용할 수 있다.

express 가 해주는 것

routing!

원래,

http://localhost:5000/

로 접속한 경우와

http://localhost:5000/hello 

로 접속한 경우에 반응하는 결과는 서로 달라야 한다.

URL 에 따라 다른 값을 내주는 이것을 routing 이 해준다. 

Event Module 예제!! 아래는 "exit" 이벤트를 handling 하는 예제이다.

processEvent.js /** * Created by STEP on 15. 8. 4.. */ // 우리 프로그램이 종료되면 // "exit"라는 이벤트가 process 에서 발생 // global object 인 process 객체에서 event 가 발생 // global object 중에 setTimeout()이라는게 있어요!! // 일정시간 뒤에 특정 함수를 호출해주는 함수 setTimeout(function() { console.log("3초뒤에 실행됬어요!!"); },3000); // 프로그램이(process) 가 종료되는 이벤트를 잡으려 해요!! process.on("exit",function() { console.log("프로세스 종료!!"); }); console.log("프로그램 종료");

 가장 많이 사용되는 module 중 하나.  파일 핸들링과 관련된 대부분의 method를 제공  Node.js에서는 대부분의 작업을 비 동기 방식으로 처리하도록 제안하고 있지만 특별한 경우 동기적으로 처리해야 하는 경우도 있음.  동기 형식의 경우 비 동기 method에 ~Sync 접미사를 붙여서 method 제공

fileSystem.js /** * Created by STEP on 15. 8. 4.. */ // 1. 제일 먼저, 필요한 module require 하기! var fs = require("fs"); /* ** 성능은 비동기 메소드가 좋지만, 동기 메소드가 프로그래밍하기 쉽다. 순차적으로 짜면 되니까.** */ // 동기 method 가 있고 console.log("--------동기 method--------") console.log("현재 폴더 : " + __dirname); // readFile() 은 비동기, readFileSync() 은 동기 메소드이다. var result = fs.readFileSync("sample","utf8"); console.log("데이터는 : " + result); console.log("프로그램 종료!!"); // 비동기 method 가 있어요 console.log("----------비동기 method----------") fs.readFile("sample","utf8",function(err,data) { console.log("데이터는 : " + data); }); console.log("프로그램 종료"); // 처음에 시작하면, 비동기 method 이기 때문에 fs.readFile()로 인해 block 되지 않고 지나간다. // 그런 다음, console.log("프로그램 종료"); 에 도달하여 "프로그램 종료" 을 출력하고, // 그 다음에 function(err,data) 이라는 call-back method 가 호출된다. // 동기와는 반대로, 코드 내부 내용이 이후에 호출된다. // 이렇게 인자로 함수가 들어오는데, 앞에서 배운 일급함수(first-class method)가 가능하기 때문에 // 이러한 call-back 이 가능한 것이다. 이러한 특성이 가능한 Javascript. // 그렇기에 Javascript 가 Node 에 중요한 역할을 하는 것

아래는 HTTP 모듈 예제이다

기본적으로 서버로서 작동하기 위해 필수적인 모듈이라 보면 된다.

HttpServer.js /** * Created by STEP on 15. 8. 4.. */ // 1. 필요한 module require var http = require("http"); http.createServer(function(req,res) { // 1. 클라이언트의 request 를 분석해요 // 2. 로직처리해요!! // 3. response 를 보내요!! // 3-1. 헤더부터 보내줘야 해요! res.writeHeader(200, { // 200 은 OK 라는 status code "content-type" : "text/html; charset=utf8" }); res.write("<h1>이것은 소리없는 아우성!</h1>"); res.end(); }).listen(5000,"localhost"); console.log("서버실행 - 5000"); // 클라이언트( web browser) 가 접속 // 접속할 때 // 클라이언트가 여러가지 아래와 같은 정보들을 보내요 // "내가 사용하는 browser 는 어떤건지" // "서버로 전송하는 데이터는 무엇인지" // "전송방식은 어떤 전송방식인지~~"

아래는 client 측에서 HTML request (요청)을 보내는 예제이다.

HttpClient.js /** * Created by STEP on 15. 8. 4.. */ var http = require("http"); var option = { host : "localhost", // host 는 url 을 의미 port : 5000, // server 에서 포트 5000번을 열어놨기 때문 method : "GET", // 어떤 방식으로 호출할 것인지 path : "/" }; var req = http.request(option, function(res) { console.log("상태코드 : " + res.statusCode); console.log("헤더정보 : " + res.headers); res.setEncoding("utf8"); res.on("data", function(result) { console.log("전달받은 데이터 : " + result); }); // "data"라는 이름의 event 가 발생하면, 두 번째 인자로 // 들어오는 함수를 call-back 한다. }); req.end();

 웹 어플리케이션 architecture의 design pattern  Model 1 ( 한 소스에 UI와 business logic code가 공존 – 유지보수의 어려움 )  Model 2 ( MVC Pattern이 대표적 )  소프트웨어 패턴의 적용을 쉽게 해주는 자바스크립트 라이브러리가 다수 존재 ( AngularJS , Backbone.js, Knockout )  Node.js에서 웹 어플리케이션 작성 시 MVC pattern 적용을 쉽게 해주는 가장 인기 있는 module : express

Express module 은 매우 중요한 module 이며, 크게 3가지 기능을 제공한다.

1. Routing

2. Template을 이용한 View 처리 기능

3. 향상된 Request Handler

다음은 express 모듈을 이용하여 경로처리를 하는 ExpressRouting.js 예제이다.

ExpressRouting.js /** * Created by STEP on 15. 8. 4.. */ // 1. 필요한 module require var http = require("http"), // require 해서 기존의 모듈을 불러오면 이것은 메모리에 올라가게 된다. express = require("express"), // 다른 곳에서 require 할 때 또 새로 메모리에 올라가는 것일까? // 아니다. 메모리에 올라가 있는 것을 끌어다 쓴다. // require("express") 는 함수를 return 한다. // 그러나 우린 객체가 필요하다 app = express(); // express() 는 함수를 실행시킨 것이다. 그리고 express() 함수 실행 결과 // 또한 함수인데, 이 함수를 app 에다 넣은 것 // 2. Routing module 을 require var routes = require("./routes"); var product = require ("./routes/product"); // 3. express 설정 app.use("*",function(req,res,next) { // 들어오는 것을 모두 받고 res.writeHeader(200, { // 모든 request 에 respond 할 때 "Content-Type" : "text/html; charset=utf8" // header 를 넣고 return 해야 하기 }); // 때문에 "*" 모두에게 writeHeader 를 한다 next(); // next()를 안해주면 writeHeader 를 하고 client request 가 끝나기 때문에 }); // 아래로 내려보내기 위해 강제로 next() 를 해서 아래로 흘려보낸다 app.use("/",routes); // "/" 로 시작하는 prefix 를 가진 것들은 모두 routes 로 보낸다 app.use("/product",product); // routes 로 갔는데 못 찾았거나 "/product"로 시작하는 prefix 가 // 있다면, product 로 보낸다 app.get("*", function(req,res) { // "GET" 방식으로 들어오는 모든 것들 처리!사실 use 로 해도 상관 없음 res.write("<h1> 페이지가 존재하지 않아요 </h1>"); // 위에 routes 랑 product 거쳤는데도 res.end(); // 안 걸렸다면, 페이지가 없는 것이기에 }); // '페이지가 존재하지 않아요' 를 출력 http.createServer(app).listen(5000,"localhost"); // createServer 안에 넣은 app 을 주목하라 // express 를 왜 쓰는지 여기서 알 수 있다. 아래 코드를 보면 craeteServer() 안에 // function (req, res) { ....} 이렇게 일일이 함수를 정의한 것을 확인할 수 있다. // express 에서 받은 함수 app 은 이걸 대신해준다! 그래서 express 를 쓰는 것 console.log("Express 서버 기동 - 5000"); /* express 를 안 썼다면 ServerRouting.js 에서 구현한 것처럼 메소드의 동작방법을 이렇게 일일이 정의해야 한다 http.createServer(function(req,res) { var reqPath = req.url; req.writeHeader(200, {"Content-Type" : "text/html; charset = utf8" }); if ( reqPath == "/" ) { res.write("<h1> 환영합니다. </h1>"); } else if ( reqPath == "/intro") { res.write("<h1>회사소개 페이지 입니다. </h1>"); } else if ( reqPath == "/product"){ res.write("<h1>제품소개 페이지 입니다.</h1>"); } else if ( reqPath == "/product/notebook") { res.write("<h1>notebook 페이지 입니다</h1>"); } else { res.write("<h1>존재하지 않는 페이지 입니다.</h1>"); } res.end(); }).listen(5000,"localhost"); */

ExpressView.js /** * Created by STEP on 15. 8. 5.. */ // 1. 필요한 module require!! var http = require("http"), express = require("express"), app = express(), path = require("path"), //경로 작성시 좀 더 함수 틱하게 만들기 위한 모듈(유틸리티~) bodyParser = require("body-parser"); // 2. 필요한 routing module require var routes = require("./routes/viewRouter"); // 3. view setting app.set("views",path.join(__dirname,"views")) // view들이 모여잇는 폴더 app.set("view engine", "ejs"); // view 엔진~ // 4. express 에 필요한 module 을 설정해요!! 라우터 설정~ 이 라우터 쓸꺼야 app.use(bodyParser()); app.use("/", routes); app.get("*", function(req,res) { //못찾으면 밑으로~ res.render("error"); }); http.createServer(app).listen(5000,"localhost"); console.log("서버기동 - 5000");