1st day

(2015) Summer/Node.js 2015. 8. 3. 10:24

share this post

Node.js

- trendy 한 기술

진행방식

- 수업시간: 45분 진행 / 15분 휴식

슬라이드

- 다운로드 받을 수 있는 URL 공유

출석

- 오전 10시 50분, 오후 16시 20분

코드 베이스로 진행

문성훈

moon9342@atglab.co.kr

i) Node.js 란 무엇인지

ii) Paypal 등 굴지의 기업이 사용하는데 왜 사용하는가?

iii) 어떤 상황에서 사용해야 하는지, 사용하면 안되는지 (b/c 장단점이 극명하게 갈리기 때문)

iiii) web application 에 특화된 Node.js

WebStorm Download

http://www.jetbrains.com/webstorm/

- Front-End Development 를 위해 많이 사용된다

- 유료 어플리케이션이지만, 30-day free trial 을 제공하기 때문에 uninstall-install 을 반복하여 사용 가능

자바스크립트 : 다른 랭귀지처럼 다 알 필요는 없다.

문성훈/moon9342@atglab.co.kr

노드

: 네트워크 프로그래밍을 하는데 특화, http에 특화, 웹 어플리케이션

모듈(라이브러리와 비슷)

http://www.jetbrains.com/webstorm 여기서 IDE 툴 다운로드, 크롬

www.jetbrains.com/webstorm/

자바스크립트 : 객체는 있으나 객체 지향적은 아님, 이벤트 기반의 펑셔널 기반

,화면제어에 사용, 자바스크립트 도큐멘트가 없지만 그만큼 블루오션

Web 개발 환경의 변화

1) 기존 방식의 문제점

- client 에서 request 를 보내면, server 가 내부 데이터베이스에서 데이터를 가져와 연산을 한 다음에 이 결과물을 client 로 데이터를 반환한다.

- 그런데 이 결과물의 데이터가 너무 크다. 고로, 데이터 이동량이 너무 많다.

- 예전에는 문제가 되지 않았지만, 모바일 시대로 넘어오면서 데이터 이동량이 많이 중요해졌다.

2) 새로운 방식

- Front End 와 Back End 양쪽 어플리케이션을 개발 (이전엔 Back End 만 했다면, 이젠 Front End Web Application 을 추가로 작성하게 됨)

- 데이터만 주고 받는다

- bandwidth 절약

- 단점: front-end 와 server 양쪽에 둘다 프로그램을 짜야 한다

**AngularJS - 구글에서 나온 것

기존의 방식 : 요청을 주면 많은 데이터를 받음,근데 모바일은 패킷때문에 요금이 많아짐

그래서 서버랑은 데이터만 받아오고 화면은 클라이언트에서 돌게 함, 그러면 프로그램을 두개 짜야하지만 유지보수성, 밴드위스가 이득

프론트 엔드 웹 어플리케이션 등장

-ajax,디자인 패턴,프레임워크,라이브러리

angularJS, backbone.js, ext JS, jQuery, ~ Mobile, Node.js, etc

http://demo.synology.com:5000/webman/index.cgi

웹 어플리케이션의 예. 이건 ext.js 로 만듬. 쉽게 말해서 자바스크립트로 만듬.

금융권에서 많이 쓰임, 일반 보다는 기업용

-------------------------------------------------------------------------------------------

HTML5

Recap

Javascript 의 위상 변경 -> 왜? -> Front End Web Application 의 등장

-> 무슨 의미? -> 서버와 클라이언트가 데이터만 주고받고 클라이언트 쪽에서 해당 데이터를 처리하는 구조로 변경

-> 이 때 클라이언트에서 해당 데이터를 처리할 때 사용되는 언어가 Javascript

1999년 12월에 W3C 가 HTML 4.01 을 마지막 버전으로 표준화

("우리 이제 HTML 그만 건드리자" 라고 함)

-> 왜?

1) 기존 HTML 은 정형성이 없다 (Java 나 C 등의 경우, 조금만 문법이 틀려도 빨간줄이 그어지는데, HTML 은 문법이 약간 틀려도 문제가 없다. 만들 땐 문제가 없는데,

나중에 유지보수가 어렵다)

2) 언어를 확장하기가 어렵다 (tag 가 정해져있기 때문. 즉, 새로운 tag 를 지정할 수 없기 때문)

=> 위 2 문제를 해결하기 위한 방향을 모색하던 중, XML 을 만들게 됨

=> XML 은 두 가지를 충족한다. 문법을 맞추지 않으면, deploy 자체가 안 된다. tag 도 새롭게 만들 수 있기 때문에 언어를 확장할 수 있다)

-> XML + HTML => XHTML 1.0 2000 년도 표준화

-> 오페라, 모질라 를 만들던 회사들이 컨소시움을 구성 (WHATWG)

-> 이 컨소시움에 애플이 가세하면서 힘을 갖게 됨 -> 그러면서 HTML5 를 제안

-> W3C 가 보고 "괜찮네" 하고 채택하게 됨

-> 얼마 후, Steve Jobs 가 "우리 애플 기기는 더 이상 flash player 를 지원하지 않을 것" 이라 발표

-> "대신, HTML5 기반으로 갈 것" 이라 발표 -> 이후 Google 도 발맞춰 "우리도 HTML5 기반으로 갈 것" 이라 발표

-> 이러면서 flash 점유율이 낮아지고, HTML5 점유율이 증가하기 시작

HTML5 = HTML (5%) + CSS (25%) + JavaScript (70%)

즉, Javascript 를 배워야 한다!

근데, 왜 HTML5 를 지향하게 된 걸까?

-> 단지 flash 는 비표준이고, HTML5 가 표준이라서?

-> No, IT goes to CE (가전시장)

-> 그런데, 가전시장은 제조사가 매우 다양 -> Desktop 은 운영체제가

다양한 제조사들을 모두 만족시키는 OS 혹은 S/W 의 필요성이 대두되고 그것을 만족시키는 최고의 대안은, 표준화된 HTML5

=> 기기가 다양하기 때문에 프로그래밍 하기 힘들다. 그래서 html로 표준화. 하드웨어에 디팬던트하게 하지 않고 각각 되게 하기 위함, 근데 플래시는 비표준이기 때문에 표준으로 정해진 html5 지정, 그래서 이런거 하기 위해서 자바스크립트를 씀, 운영체제에 상관없이 되는 html5, html5는 자바스크립트를 많이 씀

서버쪽에서 HTML 을 작성한 다음, Web deploy 를 해야 client 가 사용할 수 있다

- 즉, 웹 서버가 있어야 한다

- 또한, 웹 서버에 우리 project 를 알려줘야 된다 (configure)

- 웹 서버를 통해서 웹에 deploy (WebStorm으로 자동처리)

- client browser 를 통해서 작성된 내용 확인 (WebStorm으로 자동처리)

보통 파일처리라 하면,

데이터베이스 파일 처리,

Blocking 방식: '순차처리'라 프로그래밍하기가 쉽다. 하지만 기존의 처리하고 있는 프로세스가 처리되어야지만 다음 순서로 넘어가기 때문에 시간이 오래 걸린다.

Non-blocking 방식: query (질의)를 보내면서 일급함수를 같이 보낸다. 그리고 끝나지 않았음에도 불구하고 blocking 을 하지 않는다. 즉, 다음 순서로 넘어가도록 허용한다.

따라서, 시간은 많이 절약되나 프로그래밍하기 무척 어렵다.

Multi-thread

JSP, Tomcat 등은 client 와 1대1로 대응하는 thread 들이 각 client 에 붙어 연산을 처리해준다.

Thead Pool 이 있고, 그곳에 있는 thread 들을 가져다 쓰는 것. Thread Pool 에 가지고 있을 수 있는

Single-thread Non-Blocking I/O

Node.js 는 Single Thread 기반의 Non-Blocking I/O Model 을 사용한다.

CPU 작업(연산)은 없는데, I/O 작업이 많은 경우엔 Node.js 가 탁월하다. 그런 경우엔 뭐가 있을까? SNS! 카톡! LinkedIn! Paypal! ebay (<- 이들의 특징! user 가 엄청 많다! 동시접속자가 많다!)

상대적으로 CPU intensive 하지 않고 많은 connection 을 동시에 처리해야 하는 경우에는 좋은 선택

비동기 I/O model 을 사용하기 때문에 file upload/download 와 같은 I/O intensive 한 network streaming service 에 적합

Client -- Single Thread Event Loop (CPU job) -- I/O job

서비스 성격에 따라 Node.js 로 구현할지 결정하면 되며,

Node.js 를 하기 위해선 Javascript 를 잘 해야 한다.

동시에 수많은 사람들이 몰릴 수 있을 것 같다 싶으면 Node.js 로 가야 한다.

node.js 명언

node.js 는 네가 짠 코드 빼고는 모든 것이 비동기(asynchronous)다.

www.nodejs.org

install 을 눌러서 설치한다.

기본 Node.js 서버는 코어엔진(v8)

저수준의 API(내부 module)(8.8M)

WebStorm 에서 설정

(Node.js 와 WebStorm 연동 + 자동완성)

원래 위에 창에 'configure' 버튼이 있고, 그 configure 버튼을 눌러서 'download from internet' 으로 자동완성 파일을 다운받아야 한다.

위에 체크한대로 모두 다 체크

Node.js

외부 module 을 이용해서 프로그램 작성

module system의 이해

(외부 module, 내부 module 을 가져다가 사용하는 방법)

내가 필요한 module 을 internet 에서 download 해서 사용할 수 있어요!

이런 외부 module 들이 40,000개가 넘어요

=> 이런 module 을 이용해서 program 을 하게 되는데 이런 module 을 이용하기 쉽도록 만들어주는 module 이 있어요

NPM (Node Package Manager)

아래 그림에 선택되어 있는 'Node.js and NPM', 'npm' 이 위에서 이야기한 그 NPM 이다.

=> module 을 선택해서 설치

1. 프로젝트와 상관없이 내 컴퓨터 내에 있는 모든 프로젝트 내에서 사용할 수 있는 모듈

2. 내 프로젝트에서만 사용할 수 있는 모듈

index.html 파일

index.js 파일

// data type

// primitive data type vs reference data type

// literal
    // 데이터 타입이 코드로 표현되는 것.
    // javascript 는 변수를 지정할 때 type 을 명시하지 않아요 (다른 언어들과 가장 극명하게 대비되는 특징)
    // 변수를 생성(선언)할 때는 var keyword 를 이용.
    // e.g. var myNum = 10.5;

// 데이터타입을 명시할 필요가 없기 때문에 아무값을 넣어도 상관없다.
    // e.g.
    //              아래에서 보다시피 어떤 것을 하든 상관이 없음
    //      var myNum = 10.5; or var myNum = 10; or var myNum = "hello";

// primitive data type
    // 1. number
    // javascript 는 정수와 실수를 구분하지 않아요!
    // 내부적으로 처리될 때는 실수로 변환되서 처리

// 2. string
    // 문자열. 문자가 존재하지 않아요!!
    // 글자는 무조건 string!
    // 문자를 표현할 때는 '', ""

// 3. boolean
    // true, false 값이 존재

// 4. undefined
    // 값이 아직 정해지지 않았어.. 라는 의미
    // 프로그래머가 할당하는 값이 X

// 5. null
    // 값이 없어.
    // e.g.
          var myTmp = null; // "myTmp 에는 아직 값이 없어" 라는 의미

// 여기서 잠깐...
    // Javascript 의 함수는 크게 2가지 종류
    // 1. 선언적 함수 (우리가 알고 있는 함수)
    function myFunc() {

}
    // 2. 익명함수(람다함수)
    // 이름이 없는 함수이기 때문에 독립적으로 사용할 수 없다.
    // 따라서 아래 예제에서 볼 수 있듯이, 변수(myFunc1)에 저장하거나 다른 방법으로 사용한다
    var myFunc1 = function() {

}

// 6. Reference data type 객체
    // 함수는 객체예요!!
    // 객체는 field, method 가 존재
    // field 라는 용어 대신에 property 라는 용어를 쓴다
    // 똑같이 객체가 가지고 있는 데이터를 가리킨다. 표현만 다른 것 뿐.
    // method 는 그냥 method 라고 표현
    // key 와 value 의 쌍으로 표현
    // e.g.
    //      var obj = {}   <- 객체는 보다시피 '중괄호'로 구별할 수 있다
    //
      var obj = {
                  myName : "홍길동",   // 객체의 property. 객체의 데이터니까.
                  myAddress: "서울",  // 객체의 property. 객체의 데이터니까.

myInfo : function() { // 객체의 method.

}
      };

// return data type 을 명시하지 않아요
    function mySum(num1, num2) {
        var sum = num1 + num2;
        return sum;
    }

var n1 = 100;
    var n2 = 200;

var n3 = mySum(n1,n2);

console.log("결과값은 : " + n3);

// javascript code 가 실행이 될 때
    // 우리가 생각하는 것처럼 한 줄 한 줄 실행되지 않는다.
    // 전체를 한번 scan 한다.
    // <script src = " "> 구문이 있어서 외부에서 js 코드를 불러오는 것이 있을 때,
    // 이 javascript code 들을 불러오고, 기존의 페이지 전체를 scan 하면서
    // 외부의 js 코드에 등장하는 변수와 함수를 찾는다.

// 전체 코드를 한번 스캔
    // 변수를 찾아서 메모리에 공간 확보
    // 함수를 찾아서 메모리에 함수이름과 똑같은
    // 이름의 변수를 만들어요 (함수변수)

// mySum 이라는 이름의 변수 생성
    // -> 실행코드 는 메모리 어딘가에 저장
    // -> mySum 은 이 실행코드들을 가리키는 (reference) 형태를 띄게 된다

// 또 하나의 예를 보자
    // function myInfo() {
    //     console.log("소리없는 아우성!!");
    // }
    // 이것도 마찬가지로 컴파일러가 스캐닝하면서 myInfo 라는 이름의 변수가 생성된다
    // console.log("소리없는 아우성!!"); 이라는 실행코드 내용은 메모리 어딘가에 저장된다
    // 그리고 생성된 myInfo 변수는 이 실행코드 내용을 가리킨다.(referencing)

// 이 개념을 이해하는 게 필요하다. 왜냐면..
    // (function myInfo() {
    //      console.log("소리없는 아우성!!");
    // }) ();
    // 위와 같이 함수의 선언과 동시에 실행이 가능한데 위 개념을 이해해야지만
    // 이러한 성질이 이해되기 때문이다.

// 결국 함수가 어떻게 표현될 수 있냐하면...
    // 변수에 저장되서 표현이 가능
    // 함수를 값으로 사용 가능
    // 일급함수(first-class function)
    // 더 확장해서 생각해보면, 함수를 변수에 넣고 변수로 쓸 수 있기 때문에
    // 함수를 다른 함수의 인자로 넘겨줄 수 있다.
    // 이러한 성질이 비동기 event-driven 통신을 할 때 중요하게 쓰인다.
    //

function mySum(input1, input2) {
        var sum = input1 + input2;
        return sum;
    }

var result = mySum(1,2);
    // Javascript 는 인자의 개수와 상관없이 함수 호출이 가능
    // 아래 코드도 실행이 가능한다. 함수 이름만 맞으면 호출한다.
    var result = mySum(1,2,3);
    // 따라서 Javascript 에는 '오버로딩' 개념이 없다.
    var result = mySum(1);
    // 위 코드는 input1 에 1 을 넣는다. input2 에는 아무것도 안 집어넣는데,
    // input2 에는 처음에 undefined 로 초기화 되어 있다.
    // 이 때, 1 + undefined 는 당연히 undefined 이기 때문에
    // sum 은 undefined 로 저장된다. 그래서 undefined 를 return 한다.

clock.html 파일

clock.js 파일

자, 이제 기존의 프로젝트를 닫고 새로운 프로젝트를 만들어서 진행해보자.

File->Close Project 로 기존의 프로젝트를 닫고

Create New Project 로 새로운 프로젝트를 만들자.

NodejsStart 라는 이름의 새로운 프로젝트를 만들었다.

아래 사진과 같이 'package.json' 를 만들자.

'dependencies' 에 가져오고 싶은 module 들을 설정하면 된다.

아래

"//module 설정" 이라고 작성한 부분은 지워야 한다.

안 그러면 에러가 발생한다.

아래에서 볼 수 있다시피,

'express',

'grunt'

'ejs'

라는

모듈을 가져오고자 하는 것이다.

우리가 만드는 이 파일은, Server-side program 이다.

Javascript 파일을 하나 만들자.

HTML 파일은 만들지 않는다.

서버 측에서 javascript 만 돌릴 것이기 때문.

자바스크립트 파일 '01.helloWorld' 생성

브라우저에 'localhost:5000' 를 검색했을 때 위와 같이 우리가 생성한 서버로부터 값을 반환받는다.

package.json 파일

circle.js 파일 helloWorld.js 파일

/**
 * Created by STEP on 15. 8. 3..
 */

// 1. 프로그램에서 필요한 module을 불러들여요!
    // http server 를 만들거예요!
    // http 는 워낙 많이 사용이 되요.. 외부 module 이
    // 아니라 내장 module 입니다.
    var http = require("http");

// 아래 createServer() 명령어로 웹서버가 만들어진다.
    // 5000 은 포트 번호를 설정하는 것
    // webserver 를 생성하고 5000번 포트로 클라이언트가 접속하길 기다리는 코드
    http.createServer(function(req,res){
        res.writeHeader(200, {
            "Content-Type" : "text/html; charset=utf8"
        });              // 200 은 OK 라는 상태코드값이다
        res.write("<h1>안녕하세요!!</h1>");
        res.end();
    }).listen(5000,"localhost");
    // 클라이언트가 접속했을 때 서버가 어떤 작업을 해서
    // 다시 클라이언트에게 응답을 돌려줘야 해요
    console.log("파일이름은 : " + __filename);
    console.log("서버기동 - 5000");
    // console 은 global scope 를 가지는
    // global 객체예요!!
    // 즉, console 은 모든 모듈에서 다 쓸 수 있으며,
    // 아무리 여러번 console.log.. console.log.. 를 쓰더라도
    // 여기서의 console 은 아래 console 창 '하나' 를 의미하게 된다.

global.myName = "홍길동";
    // Javascript 는 객체의 property 나 method 를
    // 동적으로 할당할 수 있어요.

test.js

/**
 * Created by STEP on 15. 8. 3..
 */

(function myFunc() {
    console.log("하하하");

})();

// 노드 코드를 넣어서 프로그램을 만들어요!!
(function() {
var test = 10;

console.log("test의 값은 : " + test);
})();

// node interpreter 작동방법
    // 일반적인 Java 나 C interpreter 처럼 한 줄 한 줄 내려가며 읽지 않는다.
    // 함수를 wrapping 한 다음에, 그 함수를 호출하여 실행하는 방식으로 작동한다.
    //

(function(exports, require, module, __filename, __dirname) {

global.myName = "홍길동";
        var test = 10;
        console.log("test의 값은 : " + test);

}
    */

/*
    ************************************************
    Global Scope 과 Local Scope
    ************************************************
    위 function 에서 인자(parameter)로 exports, require, module, __filename, __dirname
    이 들어온다. 이들은 local scope 를 가지고 있다고 한다.
    이들은, function 안에 인자로 들어왔기 때문에 function 내에서 쓸 수 있다.
    인자로 가져오지 않았다면, function 내에서 사용하지 못했을 것이다.
    그래서 이 인자들은 local scope 을 가지고 있다고 한다.
    반면, function 내의 global 객체나 console 은 parameter 로 받아온 것이 아닌데도
    function 내에서 그냥 쓰인다. Global scope 을 가지고 있기 때문에 가능한 것이다.

위에서 설명했듯이, 원래 function() {} 이 우리가 쓴 코드를 wrapping 한 다음에
    interpret 되는데 그걸 일일이 쓰기 귀찮기 때문에, 우리는 쓰지 않아도 되는 것이다.

이처럼, node interpreter 가 lambda 함수로 wrapping 하기 때문에 우리 코드는
    그 function (a.k.a module), 즉 그 모듈 scope 안에 있다고 표현할 수 있다.
    */

이해해야 하는 부분

Node 는 Global Objects 가 존재해요.

모든 module 에서 사용가능한 객체의 집합-> 문제는 이 Global Object의 scope 가 달라요! => local scope vs global

**내가작성한, 짧은 코드로 구성된 프로그램도 모듈이다.

**결국, Node.js 는 '모듈의 집합'이다.

오늘 배운 내용 정리

특징.. 데이터 타입.. 객체의 표현.. 일급함수! (<- 알아야 할 몇 가지들)

왜 JavaScript 를 해야하나요??

Node.js 는 플랫폼이다 (플랫폼이란? "다른 프로그램을 실행시킬 수 있는 실행환경").

다시 말해, 우리가 쓴 자바스크립트를 서버쪽에서 실행시킬 수 있게 해주는 '서버 플랫폼'

따라서 자바스크립트를 알아야 한다!

Node 시스템의 특징 (장,단점)

Module system, Global objects

내일 할 내용

Module system 이해!!

Event 처리 -> Web Chatting 이용

채팅으로 글 왔다갔다 하는게 Event 기반

Express Module

저작자표시 비영리

WRITTEN BY

: 서상호

1st day

티스토리툴바