Node.js




Ubuntu 14.04에 Node.js 설치 및 간단한 예제

Ubuntu 14.04에 Node.js 설치 및 간단한 예제

Node.js
Site 바로가기: Ubuntu 14.04에 Node.js 설치 및 간단한 예제 라즈베리파이나 아두이노를 Node.js로 제어하는 것을 보고는...
Read More
[node.js] socket.io를 이용한 간단한 웹 채팅 프로그램

[node.js] socket.io를 이용한 간단한 웹 채팅 프로그램

Node.js
1. 기본 환경은 셋팅되었다는 전제하에 시작하겠습니다.(node.js, eclipse, node plugin) 2. Node Project를 생성합니다.(여기선 이름이 ChatTest입니다.)...
Read More
1장 Express.js란 무엇인가?

1장 Express.js란 무엇인가?

Node.js
Click the link to read the article: 내용보러가기 =============================== 1장 Express.js란 무엇인가? Express.js는 Node.js의 핵심 모듈인 http와 Connect 컴포넌트를...
Read More
노드제이에스(Node.JS)란 무엇인가?

노드제이에스(Node.JS)란 무엇인가?

Node.js
Click the link to read the article: 내용 보러가기 ================================ 종종 node.js 를 사용하여 몇몇 업체에서...
Read More
[Node.js 강좌] Node.js 란? 개념과 소개

[Node.js 강좌] Node.js 란? 개념과 소개

Node.js
Click the link to read to the article: 블로그 내용보러가기 ===== 요즘 웹언어에서는 정적인 홈페이지 뿐만...
Read More
Node.js란?

Node.js란?

Node.js
Click the link to read the article: 블로그바로가기... ============================== 이 글을 쓰게 된 계기는 다음과 같다....
Read More
Ubuntu 14.04에 Node.js 설치 및 간단한 예제
Node.js

Ubuntu 14.04에 Node.js 설치 및 간단한 예제

Site 바로가기: Ubuntu 14.04에 Node.js 설치 및 간단한 예제

라즈베리파이나 아두이노를 Node.js로 제어하는 것을 보고는 흥미가 생겨서 좀 더 공부해보려고 설치를 하게 되었습니다.  Node.js는 자바스크립트 기반으로 서버사이드 어플리케이션을 작성할수 있게 해줍니다.

우분투 14.04에서 다음처럼 해서 Node.js 설치를 진행했습니다.

sudo apt-get install curl

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash –

sudo apt-get install -y nodejs

설치된 버전은 다음과 같습니다.

webnautes@webnautes-PC ~ $ node –version

v4.2.3

webnautes@webnautes-PC ~ $ npm –version

2.14.7

server.js라는 이름으로 파일을 하나 작성합니다.. 3000번 포트에서 접속을 기다리는 서버를 하나 생성해서 접속이 이루어지면 Hello World를 화면에 출력할 수 있도록 문서를 전송해줍니다…

nano server.js

  1. var http = require(“http”);
  2. http.createServer(function(request, response) {
  3.   response.writeHead(200, {“Content-Type”“text/plain”});
  4.   response.write(“Hello World”);
  5.   response.end();
  6. }).listen(3000);
 
작성한 파일을 실행킨 후….
 
node server.js
이제 웹브라우저에서 태스트를 해봅니다. localhost:3000 주소로 접속을 시도해봅니다. 
Hello World라고 웹브라우저에서 보여집니다.
 

[node.js] socket.io를 이용한 간단한 웹 채팅 프로그램
Node.js

[node.js] socket.io를 이용한 간단한 웹 채팅 프로그램

1. 기본 환경은 셋팅되었다는 전제하에 시작하겠습니다.(node.js, eclipse, node plugin)

2. Node Project를 생성합니다.(여기선 이름이 ChatTest입니다.)

3. 생성되어진 package.json을 연후 아래와 같이 “socket.io”:”0.9.16″ 를 추가합니다.

(Express는 사용안하니 추가하지마세요.)

 

4. 그후 package.json파일에서 우클릭한후 npm install 을 클릭하여 socket.io 를 설치합니다.

 

5. 채팅에는 서버와 클라이언트가 필요하게 되는데 서버는 node.js로 만들고 클라이언트는 jQuery를 이용하여 만들었습니다.

– 서버(app.js)

var express = require(‘express’), app = express(), //

server = require(“http”).createServer(app), io = require(“socket.io”).listen(server), //

nicknames = [];

server.listen(3000);

app.get(“/”, function(req, res) {

res.sendfile(__dirname + “/index.html”);

});

io.sockets.on(“connection”, function(socket) {

socket.on(“new user”, function(data, callback) {

if (nicknames.indexOf(data) != -1) {

callback(false);

} else {

callback(true);

socket.nickname = data;

nicknames[socket.nickname] = socket;

updateNicknames();

}

});

function updateNicknames() {

io.sockets.emit(“usernames”, Object.keys(nicknames));

}

socket.on(“send message”, function(data, callback) {

var msg = data.trim(); // 앞과 뒤의 공백 제거

console.log(“after trimming message is : ” + msg);

if (msg.substr(0, 3) === “/w “) {

msg = msg.substr(3);

var ind = msg.indexOf(” “);

if (ind !== -1) {

var name = msg.substring(0, ind);

var sendmsg = msg.substring(ind + 1);

console.log(“whisper name send is : ” + name + “, ” + name.length);

console.log(“nicknames is : ” + nicknames + “, ” + (name in nicknames));

if (name in nicknames) {

nicknames[name].emit(“whisper”, {

msg : sendmsg,

nick : socket.nickname

});

console.log(“whisper message send is : ” + msg);

} else {

callback(“Error! Enter a valid user.”);

}

} else {

callback(“Error! Please enter a message for your whisper.”);

}

} else {

io.sockets.emit(“new message”, {

msg : data,

nick : socket.nickname

});

}

});

socket.on(“disconnect”, function(data) {

if (!socket.nickname)

return;

nicknames.splice(nicknames.indexOf(socket.nickname), 1);

updateNicknames();

});

});

– 클라이언트(index.html)

 

Enter a username:



/w 사용자명 귓속말




6. 두 파일을 생성후 app.js를 실행하고 http://localhost:3000 을 웹브라우저에 뛰우면 채팅이 실행되는것을 볼수 있습니다.
[출처] [node.js] socket.io를 이용한 간단한 웹 채팅 프로그램.|작성자 쐬주먹는재혀니

1장 Express.js란 무엇인가?
Node.js

1장 Express.js란 무엇인가?

Click the link to read the article: 내용보러가기

===============================

1장 Express.js란 무엇인가?

Express.js는 Node.js의 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크다. 그러한 컴포넌트를 미들웨어(middleware)라고 하며, 설정보다는 관례(convention over configuration)와 같은 프레임워크의 철학을 지탱하는 주춧돌에 해당한다. 즉, 개발자들은 특정 프로젝트에 필요한 라이브러리를 어떤 것이든 자유롭게 선택할 수 있으며, 이는 개발자들에게 유연함과 수준 높은 맞춤식 구성을 보장한다.

Node.js의 핵심 모듈만 이용해서 중요 앱을 작성한다면 다음과 같은 비슷한 작업을 위해 동일한 코드를 지속적으로 작성함으로써 바퀴를 재발명할 가능성이 높다.

  • HTTP 요청 본문 파싱
  • 쿠키 파싱
  • 세션 관리
  • URL 경로와 HTTP 요청 메서드를 기반으로 한 복잡한 if 조건을 통해 라우팅을 구성
  • 데이터 타입을 토대로 한 적절한 응답 헤더 결정

Express.js는 이러한 문제를 비롯해 다른 여러 문제를 해결함과 동시에 웹 앱에 MVC 형태의 구조를 제공한다. 이 같은 앱은 백엔드만 갖춘 REST API에서부터 온갖 기능을 제공하는 고도로 확장 가능한 풀스택(jade-browser와 Socket.IO를 포함하는) 실시간 웹 앱에 이르기까지 다양하다.

루비에 익숙한 일부 개발자들은 Express.js를 루비 온 레일스 프레임워크에 굉장히 다른 방식으로 접근하는 시나트라(Sinatra)와 비교하기도 한다.

2장 Express.js의 작동 방식

보통 Express.js에는 메인 파일이라고 하는 진입점이 있다. 메인 파일에서는 다음과 같은 단계를 밟는다.

  1. 컨트롤러, 유틸리티, 도우미, 모델과 같은 자체적인 모듈을 비롯한 서드파티 의존 모듈을 인클루드한다.
  2. 템플릿 엔진과 해당 템플릿 엔진의 파일 확장자와 같은 Express.js 앱 설정을 구성한다.
  3. 오류 핸들러, 정적 파일 폴더, 쿠키 및 기타 파서와 같은 미들웨어를 정의한다.
  4. 라우팅을 정의한다.
  5. MongoDB, Redis 또는 MySQL과 같은 데이터베이스에 연결한다.
  6. 앱을 구동한다.

고급 설정에서는 앱을 모듈로 공개하거나 up-time 모듈을 사용해야 할지도 모른다. 그뿐만 아니라 최근에 추가된 클러스터를 활용해(‘팁과 트릭’에서 설명하는 것처럼) 다수의 워커를 생성할 수도 있다.

up-time 모듈에 관해서는 “Node.js 계속 구동시키기“를 참고한다.

Express.js 앱이 실행되면 Express.js가 요청을 대기한다. 앱으로 들어오는 각 요청은 정의된 미들웨어와 라우팅에 따라 맨 위에서 시작해 맨 아래까지 처리된다. 이러한 측면은 실행 흐름을 제어하는 데 중요하다. 이를테면, 각 요청을 여러 개의 함수가 처리하게 할 수도 있다. 그러한 함수 중 일부는 중간에 위치할 것이며, 그래서 이름도 미들웨어다.

  1. 쿠키 정보를 파싱하고, 파싱이 완료되면 다음 단계로 이동한다.
  2. URL로부터 매개변수를 파싱하고, 파싱이 완료되면 다음 단계로 이동한다.
  3. 사용자가 인증되면(쿠키/세션) 매개변수의 값을 토대로 데이터베이스에서 정보를 가져와 일치하는 것이 있으면 다음 단계로 이동한다.
  4. 데이터를 표시하고 응답을 마친다.

3장 설치

Express.js는 두 가지 버전이 있다.

  1. 스캐폴딩을 위한 명령줄 도구
  2. Node.js 앱 안의 모듈(예: 실제 의존 모듈)

명령줄 도구를 설치하려면 맥/리눅스 장비의 아무 곳에서나 $ npm install -g express를 실행한다. 이렇게 하면 도구를 내려받아 $ express 터미널 명령어를 적절한 경로로 링크해서 나중에 새로운 앱을 만들 때 CLI에 접근할 수 있다.

물론 $ npm install -g express@3.3.5와 같이 NPM을 통해 좀 더 구체적으로 3.3.5 버전을 설치할 수도 있다.

참고

대부분의 경우 시스템에서 폴더에 쓰기 위한 루트/관리자 권한이 필요할 것이다. 이러한 경우 $ sudo npm install -g express를 실행하면 된다.

npm-g

그림 3.1 NPM에 -g와 $ express -V를 지정해서 실행한 결과

참고로 위 그림에서 지정한 경로는 /usr/local/lib/node_modules/express다.

이번에는 Node.js 앱 안의 모듈(예: 의존 모듈로 로컬 Express.js 모듈을 설치하는 경우)을 설치하기 위해 $ mkdir expressjsguide로 새 폴더를 만들자. 이 폴더는 이 책에서 사용할 프로젝트 폴더가 된다. 이제 $ cd expressjsguide로 해당 폴더로 이동할 수 있다.

프로젝트 폴더로 이동하고 나면 직접 텍스트 편집기에서package.json을 만들거나 $ npm init 터미널 명령어를 실행해서 만들 수 있다.

npm-init

그림 3.2 $ npm init을 실행한 결과

$ npm init만 실행했을 때 만들어지는 package.json 파일의 예는 다음과 같다.

{
  "name": "expressjsguide",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD"
}

마지막으로 NPM을 활용하는 모듈을 설치하면 된다.

$ npm install express

또는 좀 더 구체적으로 지정하고 싶다면 된다(더 나은 방법이다).

$ npm install express@3.3.5

참고

package.json 파일이나 node_modules 폴더가 없는 상태에서 앞에서 언급한 $ npm install express 명령어를 실행하면 똑똑한 NPM이 디렉터리 트리를 탐색해서 package.json 파일이나 node_modules 중 하나가 들어 있는 폴더를 찾는다. 이러한 동작 방식은 Git의 로직을 다소 흉내 낸 것이다. NPM 설치 알고리즘에 관한 더 자세한 사항은 공식 문서를 참고한다.

아니면 package.json 파일에 의존 모듈("express": "3.3.x"나 "express": "3.3.5")을 지정해서 업데이트한 후 $ npm install을 실행하면 된다.

Express.js v3.3.5 의존 모듈이 추가된 package.json 파일은 다음과 같다.

{
  "name": "expressjsguide",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "express": "3.3.5"
  },
  "author": "",
  "license": "BSD"
}
$ npm install

다음 그림에서 express@3.3.5 문자열 다음에 나오는 경로를 눈여겨보자.

npm-install

그림 3.3 $ npm install을 실행한 결과

기존 프로젝트에 Express.js를 설치해서 package.json 파일(이미 해당 프로젝트 폴더에 존재하는)에 의존 모듈을 저장하고 싶다면(이렇게 하는 것이 현명하다!) $ npm install express --save를 실행한다.

Express.js와 관련 의존 모듈이 설치됐는지 검사하려면 $ npm ls 명령어를 실행하면 된다.

npm-ls

그림 3.4 $ npm ls를 실행한 결과

4장 헬로 월드 예제

4장에서는 첫걸음을 떼기 위해 필수 프로그래밍 예제인 “헬로 월드(Hello World)” 앱을 만들겠다. 온라인 튜토리얼을 통해 이미 헬로 월드 앱을 만들어봤다면 2부(인터페이스)로 곧바로 건너뛰어도 된다.

expressjsguide 폴더에서 hello.js 파일을 만든다. VIM이나 이맥스(Emacs), 서브라임 텍스트 2(Sublime Text), 텍스트메이트(TextMate)처럼 즐겨쓰는 텍스트 편집기를 이용한다. hello.js 서버 파일에서는 Express.js를 활용할 것이므로 다음 라이브러리를 인클루드한다.

var express = require('express');

이제 애플리케이션을 생성한다.

var app = express();

애플리케이션은 로컬의 3000번 포트에서 동작하는 웹 서버다.

var port = 3000;

app.get() 함수를 이용해 와일드카드 라우팅(*)을 정의한다.

app.get('*', function(req, res){
  res.end('Hello World');
});

위의 app.get() 함수는 문자열 형식으로 URL 패턴에 대한 정규 표현식을 받는다. 위 예제에서는 와일드카드 * 문자를 통해 모든 URL을 처리한다.

app.get()의 두 번째 매개변수는 요청 핸들러(request handler)다. 일반적인 Express.js 요청 핸들러는 Node.js의 네이티브 메서드이자 핵심 메서드인 http.createServer()에 콜백으로 전달하는 것과 비슷하다.

http 모듈에 익숙하지 않은 분들을 위해 설명하자면 요청 핸들러는 서버가 특정 요청을 받을 때마다 실행되는 함수다. 여기서 특정 요청이란 보통 HTTP 메서드(예: GET), URL 경로(예: 프로토콜이 지정되지 않은 URL), 호스트와 포트로 정의된다.

Express.js 요청 핸들러에는 최소한 두 개의 매개변수(더 자세한 사항은 후반부의 “오류 처리”를 참고한다)를 필요로 하는데, 요청(간단히 req)과 응답(간단히 res)이 여기에 해당한다. 이와 비슷하게 res.pipe()와/또는 res.on('data', function(chunk) {...})를 통해 읽기 가능 및 쓰기 가능한 스트림 인터페이스를 활용할 수 있다.

마지막으로 Express.js 웹 서버를 구동하고 콜백에서 사용자 친화적인 터미널 메시지를 출력해보자.

app.listen(port, function(){
  console.log('The server is running, ' +
    ' please, open your browser at http://localhost:%s',
    port);
});

스크립트를 실행하려면 프로젝트 폴더에서 $ node hello.js를 실행한다.

node-hello

그림 4.1 $ node hello.js를 실행한 결과

이제 브라우저에서 http://localhost:3000(http://127.0.0.1:3000이나 http://0.0.0.0:3000/과 같다)로 들어가 보면 URL 경로와 상관없이 “Hello World”라는 메시지가 표시될 것이다.

hello

그림 4.2 브라우저에서 http://localhost:3000/ads를 연 모습

참고로 hello.js의 전체 코드는 깃허브 저장소에서도 확인할 수 있다.

var express = require('express');
var port = 3000;
var app = express();

app.get('*', function(req, res){
    res.end('Hello World');
});

app.listen(port, function(){
    console.log('The server is running, ' +
    ' please open your browser at http://localhost:%s',
        port);
});

“Hello” 문구와 함께 서버로 전달한 이름을 되돌려줌으로써 예제를 좀 더 상호작용이 풍부하게끔 수정할 수 있다. 그러자면 cp hello.js hello-name.js 명령어로 hello.js 파일을 복사한 다음 이전 예제에서 모든 것을 포괄하는 라우팅 앞에 다음과 같은 라우팅을 추가하면 된다.

app.get('/name/:user_name', function(req,res) {
  res.status(200);
  res.set('Content-type', 'text/html');
  res.send('<html><body>' +
    '<h1>Hello ' + req.params.user_name + '</h1>' +
    '</body></html>'
  );
});

/name/:user_name 라우팅 안에서는 적절한 HTTP 상태 코드(200은 ‘문제 없음’을 의미한다)와 HTTP 응답 헤더를 설정한 다음 동적 텍스트를 HTML body 태그와 h1 태그로 감쌌다.

참고

res.send()는 우리의 오랜 친구인 http 모듈의 res.end()가 하던 일보다 더 많은 일을 편리하게 해주는 특별한 Express.js 메서드다. 예를 들어, res.send() 메서드는 자동으로 Content-Length HTTP 헤더를 추가한다. 그뿐만 아니라 제공하는 데이터를 토대로 Content-Type 인자를 지정하기도 한다. 더 자세한 사항은 후반부의 “응답(Response)” 장을 참고한다.

hello-name.js 파일의 전체 소스코드 또한 깃허브 저장소에서 확인할 수 있다.

var express = require('express');
var port = 3000;
var app = express();

app.get('/name/:user_name', function(req,res) {
  res.status(200);
  res.set('Content-type', 'text/html');
  res.end('<html><body>' +
    '<h1>Hello ' + req.params.user_name + '</h1>' +
    '</body></html>'
  );
});

app.get('*', function(req, res){
  res.end('Hello World');
});

app.listen(port, function(){
  console.log('The server is running, ' +
    ' please open your browser at http://localhost:%s',
     port);
});

이전 서버를 종료했다가 hello-name.js 스크립트를 실행하고 나면 브라우저에서 http://localhost:3000/name/azat와 같은 식으로 들어갔을 때 다음과 같은 동적 응답을 볼 수 있다.

hello-name

그림 4.3 역동적인 헬로 사용자 예제
노드제이에스(Node.JS)란 무엇인가?
Node.js

노드제이에스(Node.JS)란 무엇인가?

Click the link to read the article: 내용 보러가기

================================

종종 node.js 를 사용하여 몇몇 업체에서 나오는 엔진 혹은 홈페이지 등 소식을 접할 때가 있습니다.

예로 WordPress 역시 php 플러그인 일부를 node.js 인 REST API 로 노선을 갈아탄 사례가 있습니다. 

여기서 node.js 란 무엇인지를 알아 보았습니다.

1. 노드제이에스는 정확히 무엇인가

– 노드제이에스는 무엇인가?

노드제이에스는 정확히 말을 한다면 자바스크립트를 서버에서도 사용을 할 수가 있도록 설계가 되어 있는 서버사이트 스크립트 언어로 서버

개발을 위해서 나온 언어로 v8이라는 자바스크립트 엔진위에서 동작하는 이벤트 처리 I/O 프레임워크로 웹서버와 같이 확장성 있는 네트워크

프로그램을 제작하기 위하여 고안이 된 것입니다.

 

– 그러면 등장을 한 이유가 무엇인가?

노드제이에스가 등장을 하게 된 이유에는 바로 서버와 관련이 있는데 기업에서는 한정적인 자원을 최대한 그리고 최적화 적으로 효율적인

사용을 할 수가 있도록 하는 것을 원한다고 보시면 되십니다.  이 노드제이에스는 기존의 서버처리방식과는 다르게 하나의 처리 방법을

변경해서 서버자원의 활용성을 극대화 시키기 위해서 나온 것입니다.

 

 

2. 그러면 어떠한 역할을 하고 있는가?

– 기존의 서버가 어떻게 작동을 하는지?

그러면 어떠한 역할을 하는지를 이해를 하고자 한다면 기본의 서버가 어떻게 작동이 되는지를 아실 필요성이 있으십니다.

기존의 네트워크 방식은 스레드를 기반으로 하는 동기 방식인데 이 처리 방식인데 이 방식을 쉽게 표현을 한다면 처리를 해야할 곳이

4군데 인데 몸은 하나라고 치고 또한 대기시간이 있으실 것입니다.

이럴 경우에 처리를 할 수가 있는 방식은 몸을 복제하여 동시에 처리를 하는 방식이 있는데 이 방법은 좋은 것 같아 보이지만

일이 많아질 수록 스레드를 더 많이 나누어야 하기때문에 메모리 사용량이 폭발적으로 증가를 하게 되어 결국에는 서버가 다운이 되는

원인이 되기도 하는 것입니다.

 

– node.js를 적용하면 어떻게 작동이 되는가?

그러면 기업에서 내놓을 수가 있는 해결책은 서버를 무한정 증설을 하는 것인데 문제는 기업에서는 이 서버를 계속 증설하는데 매우 제한적

이고 한계가 많고 또한 한번의 이슈가 지나가면 증설된 서버가 아무런 도움이 되지가 않는다는 것입니다.

그래서 node.js를 사용을 하게 된 것인데 이벤트형태로 일을 처리하기대문에 처리를 해야할 곳을 번호표로 주어서 처리를 하는 방식이기

때문에 스레드를 하나만 사용을 해도 굉장히 빠르게 일을 처리를 할 수가 있기때문에 어지간히한 서버로 다운이 되지가 않는 문제가

많이 나오지를 않는 것입니다.  이 방식은 전문가에게는 문제점을 볼 수가 있지만 그렇게 자주 나타나지를 않는 방식인 것입니다.

 

3. 이것을 배우게 된다면 어떤 부분에서 좋은 것일까?

– 노드제이에스가 사용이 되는 분야

노드제이에스가 많이 사용이 되는 분야는 당연히 서버와 밀접한 인터넷에서는 매우 좋다고 볼 수가 있습니다.  서버의 상태가 계속 유지가

되어야 지속적으로 서비스가 가능한 메신저나 혹은 대규모 거래사이트등에서는 매우 좋습니다. 그런 이유로 서버의 사용의 최적화이기때문에 다운현상이 매우 크게 줄어든다는 것도 인터넷분야에서는 매우 좋은 분야라고 보셔도 무관하십니다.

 

– 노드제이에스가 적용이 된 기업사례

이 부분은 해외에서 많이 사용이 되고 있는 그중의 하나가 전투기도 판다는 eBay가 대표적으로 이미 node.js가 적용이 되어있으며 클라우드

에서도 적용이 되어 있는데 그 예로 마이크로소프트의 windows Azure서비스에서도 사용을 하고 있으며 node.js SDK를 배포를 하고 있다는

것입니다.  이런 점만 보아도 노드제이에스가 많은 기업이 적용을 하고 있다는 것을 알 수가 있습니다.

4. 끝으로..

인터넷 서비스는 사용자의 요구에 빠르게 반응하는 것이 중요합니다. 생산성이 높은 node.js는 인터넷 서비스 개발에 사용할 수 있는 좋은 도구이며, 기존 코드를 고려하지 않아도 되는 새로운 서비스를 개발한다면 node.js를 사용하는 것을 고려해 보면 좋을거 같습니다. API를 하나씩 추가하다 보면 node.js 의 매력이 무엇인지 알 수 있을 것입니다.

[Node.js 강좌] Node.js 란? 개념과 소개
Node.js

[Node.js 강좌] Node.js 란? 개념과 소개

Click the link to read to the article: 블로그 내용보러가기

=====

요즘 웹언어에서는 정적인 홈페이지 뿐만 아니라 쇼핑몰, 티켓 예메사이트, 블로그 등 data가 변하는

사이트를 만들고 심지어 게임도 웹에서 만들고 있습니다. 과연 이것들은 어떤 방식으로 만들어져 오는 것일까요?

오늘은 네트워크 어플리케이션 개발에 사용되는 플랫폼 Node.js 를 소개해보겠습니다.

1. Node.js 란?


Node.js는 확장성 있는 네트워크 어플리케이션 개발에 사용되는 소프트웨어 플랫폼입니다. 특시 서버사이드에서 많이 사용되곤 합니다. 사용되는 언어로는 자바스크립트(Javascript)를 활용하며, Non-blocking I/O 와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있는 특징을 가지고 있습니다.

내장 HTTP 서버 라이브러리르 포함하고 있어 웹 서버에서 아파치 등의 별도 소프트웨어 없이 동작하는 것이 가능하며, 이를 통한 웹 서버의 동작에 있어 더 많은 통제에서 벗어나 여러가지 기능을 가능하게 합니다.

즉 Node.js 를 통해 웹어플리케이션이 더욱 발전하게 되었으며, 정적인 홈페이지 뿐만 아니라 쇼핑몰, 티켓 예메사이트, 블로그 등 data가 변하는 사이트를 만들 수 있으며, 여러 개발자들이 만든 프로그램과 게임을 웹상에서 구동시켜 안드로이드폰, 아이폰, 윈도우PC, 맥 등 플랫폼의 제약에 벗어나 어디든 상관없이 실행이 가능하게 해줍니다.

물론 단순히 웹에서 실행가능한 게임을 만들려면 javascript 만으로도 가능하지만 좀더 진화된 프로그램으로 실시간 온라인 채팅, 실시간 온라인 게임 등 실시간 기능을 넣거나, 로그인 기능을 넣어 유저를 관리하고 점수를 관리하는 데이터베이스 기능을 Node.js 를 통해 만들 수가 있습니다.

2. Node.js 사용이유


Node.js 를 이해하려면 먼저 javascript를 배우셔야 합니다. 그 이유는 node.js는 javascript 기반으로 개조하여 만들어졌기 때문입니다.

Javscript는 C/C++, Java와 같은 프로그래밍 언어입니다. 하지만 이름에서 알 수 있듯이 Javascript는 독립적인 언어가 아니라 스크립트 언어입니다. 스크립트 언어는 특정한 프로그램 안에서 동작하는 프로그램이기 때문에 웹브라우저 프로그램 안에서만 작동을 하게 됩니다. 즉 웹브라우저(크롬, 파이어폭스, 사파리, 익스플로러 등등) 가 없으면 사용할 수 없는 프로그램이죠.

여기서 Node.js 가 나오는 이유가 됩니다. 즉 javascript를 웹 브라우저에서 독립시킨 것으로 Node.js를 설치하게 되면 터미널프로그램(윈도우의 cmd, 맥의 terminal 등)에서 node를 입력하여 브라우져 없이 바로 실행할 수 있습니다. 하지만 javascript에서 분리된 언어이기 때문에 문범은 같습니다. 이렇게 .node.js를 이용하여 웹브라우져와 무관한 프로그램을 만들 수 있게 되었고, 중요한 것은 node.js를 이용하여 서버를 만들 수 있다는 것입니다. 중요한 이유는 이전까지 server-clint 웹사이트를 만들 때 웹에서 표시되는 부분은 javascript를 사용하여 만들어야만 했으며, 서버는 ruby, java 등 다른 언어를 써서 만들어야 했는데, 마침내 한가지 언어로 전체 웹페이지를 만들 수 있게 된 것입니다.

3. node.js의 framework Express


Express는 node.js 의 framework 입니다. framework 라는 것은 어떠한 작업을 쉽게 완성하기 위한 라이브러리의 집합이라고 할 수 있습니다. 작업을 시작부터 끝까지 라이브러리로 지원한다는 점이 단순한 라이브러리와 차이가 나는 부분입니다. 예를 들면 JQuery는 javascript 라이브러리로 다양한 용도를 가지고 있지만, jquery 자체가 무엇 하나를 이루기 위한 목적을 가지고 있지는 않습니다. express는 node.js를 이용하여 웹 어플리케이션을 만들기위한 틀(frame)을 제공하는 라이브러리의 집합입니다.

현재 javascript는 git-hub(git을 이용한 소셜 코딩 사이트)에서 1위의 사용률을 보이는 언어이며 이는 node.js의 덕이 크다고 할 수 있습니다. 앞으로의 포스팅을 통해 node.js와 express를 이용한 웹어플리케이션을 만드는 방법을 강좌해보도록 할 예정입니다.

Node.js란?
Node.js

Node.js란?

Click the link to read the article: 블로그바로가기…

==============================

이 글을 쓰게 된 계기는 다음과 같다.

Q: Node.js는 서버인가요?
A: 네, 백엔드 개발자들이 Node.js를 씁니다.

‘백엔드 개발자 쓸 뿐, 프론트 엔드 개발자도 쓸 수 있다’가 내가 내린 결론이고,
오늘은 그에 대해 하나 하나 검증해보는 시간을 가져보고, 다른 사람들에게 잘못된 지식이 전파되는 걸 막고자 한다.
혹시 내가 내린 결론이 잘못된 부분은 무한 태클을 환영한다.

Node.js란…?

Node.js 공식 사이트에서 내린 Node.js의 정의Node.js 공식 사이트에서 내린 Node.js의 정의
Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다.
V8 자바스크립트 엔진은 여기서 중요한 포인트가 아니므로 직접 찾아보길 바란다.

런타임에 대해 정리한 다른 블로그의 포스트를 빌려보자면 다음과 같다.

런타임이란 프로그래밍 언어가 구동되는 환경

예전에는 자바스크립트 런타임이 브라우저 밖에 존재하질 않았다.
하지만 그러한 한계를 극복하고 Node.js가 나왔다.

Javascript 실행 환경?

첫 번째로 Node.js는 REPL(Read, Eval, Print, Loop)을 통해서 런타임을 제공한다.

  1. Read: 유저의 입력 값을 받아서 메모리에 저장
  2. Eval: 입력 값의 평가, 실행
  3. Print: Eval로 인해 반환된 값을 출력
  4. Loop: 1~3을 반복.

이러한 REPL은 Babel REPL과 같이 웹에서 제공해주기도 하고,
Node.js에서 제공하는 REPL은 윈도우의 CMD, 맥의 터미널 등등에서 제공을 해준다.
터미널에서 node라고 입력을 하면 node repl이 실행된다.터미널에서 node라고 입력을 하면 node repl이 실행된다.

두 번째로 따로 자바스크립트 파일을 Node.js에서 제공하는 자바스크립트 런타임을 통해 실행이 가능하다.
위와 같이 REPL에서 개발을 하면 간단한 테스트 정도면 몰라도 어플리케이션을 개발하는 데 적합하지 않다.
따라서 repl 보다는 따로 스크립트 파일을 만들어서 그 스크립트 파일을 node.js, V8이 해석 후 실행하는 형태로 작업을 많이 하게 된다.
아래 소스 코드를 node.js에서 돌리는 것은 위의 REPL에서 실행한 것과 동일하다.

1
2
3
4
5
// a.js
const a = 2;
a;
a + 4;
console.log(a);

그럼 왜 Node.js는 백엔드 영역이라는 오해가 생겼을까?

Node.js를 통해서 서버 만들 수 있기 때문이다.

1
2
3
4
5
6
// server.js
const http = require('http');
http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end("Hello World\n");
}).listen(8080);

node.js를 통해 실행한 server.jsnode.js를 통해 실행한 server.js
node.js를 통해 구현한 서버node.js를 통해 구현한 서버

그럼 프론트 엔드 개발자는 언제 Node.js를 쓰는가?

매우 빈번하게 쓰이는데 그 중에서 대표적으로 ES2015+ 문법을 ES5 문법으로 트랜스파일 해주는 Babel을 예로 들어보겠다.
먼저 babel의 기본적인 요소들을 설치하겠다.

1
npm i -S babel-cli babel-preset-env

babel-cli, CLI이기 때문에 터미널 위에서 돌아간다는 점을 염두해두자.

그리고 간단한 바벨 설정 파일(.babelrc)을 만들어주자.

1
2
3
{
  "presets": ["env"]
}

그 다음에 package.json의 npm script 부분을 다음과 같이 추가해주면 된다.

1
2
3
4
5
{
  "scripts": {
    "babel": "babel"
  }
}

그리고 ES2015+의 간단한 파일을 하나 만들어보겠다.

1
2
// a.js
const a = 1;

터미널에서 babel-cli를 통해 해당 파일을 ES5로 트랜스파일 된 결과를 보자.
"use strict" 구문 부터가 실제로 트랜스파일 된 결과“use strict” 구문 부터가 실제로 트랜스파일 된 결과

이게 뭐가 Node.js를 통해 실행한 내용인지 확인해보자.
기본적으로 npm script는 node_modules 디렉토리 안의 .bin 디렉토리에 있는 디렉토리를 인식한다.
node_modules/.bin 디렉토리 안에 babel 파일이 존재한다.node_modules/.bin 디렉토리 안에 babel 파일이 존재한다.

그리고 그 내용은 다음과 같다.

1
2
3
#!/usr/bin/env node

require("../lib/babel");

#!/usr/bin/env node 요 구문으로 인해 node.js에서 cli를 만들 수 있게 해주는 것이라고 생각하면 된다.
그럼 직접 ../lib/babel을 찾아가보자.

node_modules/babel-cli/lib/babel 디렉토리가 존재한다.node_modules/babel-cli/lib/babel 디렉토리가 존재한다.
Node.js에서 기본적으로 디렉토리 뒤에 따로 파일이 명시되지 않으면 index.js 파일을 찾아가는 규칙이 있다.
index.js 파일의 상단 부분을 보면 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#!/usr/bin/env node
"use strict";

var _keys = require("babel-runtime/core-js/object/keys");

var _keys2 = _interopRequireDefault(_keys);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var fs = require("fs");
var commander = require("commander");
var kebabCase = require("lodash/kebabCase");
var options = require("babel-core").options;
var util = require("babel-core").util;
var uniq = require("lodash/uniq");
var glob = require("glob");

// 이하 생략

소스 코드 첫 라인에 #!/usr/bin/env node을 보면 CLI임을 짐작할 수 있다.
그럼 다음과 같이도 실행을 해볼 수도 있다는 말이 된다.

npm script가 아닌 직접 파일로 접근해서 CLI를 실행npm script가 아닌 직접 파일로 접근해서 CLI를 실행

하지만 우리가 접근한 파일은 우리가 흔히 보고 있는 js 파일이다.
Node.js는 자바스크립트를 실행해줄 수 있는 환경인 런타임을 제공해주기 때문에 다음과 같이도 할 수 있다.
Node.js에서 바벨을 실행시킨 결과Node.js에서 바벨을 실행시킨 결과

즉, 바벨을 쓴다면, 프론트 엔드 개발자도 Node.js를 쓴다는 결론을 내릴 수가 있다.
바벨 뿐만 아니라 웹팩, 걸프, CRA, Vue-CLI 등등 npm으로 설치하는 모든 CLI는 Node.js를 이용한다고 보면 된다.
그리고 npm(Node Package Manger)을 쓴다는 것 자체가 Node.js를 이용한다고 보면 된다.

웹을 벗어난 Node.js

Node.js 공홈 about 페이지Node.js 공홈 about 페이지
Node.js는 확장성 있는 네트워크 애플리케이션을 위해 설계했다고 나온다.
네트워크 어플리케이션, 즉 서버, 서버를 위해서 설계된 플랫폼이다.
따라서 Node.js로 실제 구현하는 내용도 서버가 많다는 것에는 동의한다.
또한 많은 프론트 엔드 개발자들이 주로 노드를 이용하는 사례인
npm으로 의존성 모듈 관리, 바벨, 웹팩과 같은 CLI를 Node.js 위에서 구동하는 경우
이 경우에

나 노드 할 줄 안다

라고 누군가에게 어필하기에는 다소 무리가 있을 수가 있다.
왜냐면 노드로 서버를 구축하는 사례가 너무 많고, 이미 그런 오해가 정석처럼 받아들여지는 상황이라
필드에 나가서 노드 할 줄 안다고 했을 때

  • 나 노드로 서버 만들 줄 안다.
  • 나 노드로 의존성 모듈 관리하고 CLI를 Node.js 위에서 돌릴 줄 알아.
    둘 중에 누구의 말로 받아들이는 경우가 더 많을까…
    이런 고민을 하다보니 그럼 웹이 아닌 경우에는 무엇이 있을까 고민하게 됐다.

데스크탑 어플리케이션을 제작해주는 일렉트론(Electron)

Electron의 정의Electron의 정의
맥, 윈도우 등등의 크로스 플랫폼 데스크탑 어플리케이션을 HTML, CSS, JS를 통해 만들 수 있다.
자세히 몰라서 아래의 사진으로 대체하겠다.
출처: http://blog.dramancompany.com/2015/12/electron%EC%9C%BC%EB%A1%9C-%EC%9B%B9-%EC%95%B1-%EB%A7%8C%EB%93%A4%EB%93%AF-%EB%8D%B0%EC%8A%A4%ED%81%AC%ED%86%B1-%EC%95%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0/출처: http://blog.dramancompany.com/2015/12/electron%EC%9C%BC%EB%A1%9C-%EC%9B%B9-%EC%95%B1-%EB%A7%8C%EB%93%A4%EB%93%AF-%EB%8D%B0%EC%8A%A4%ED%81%AC%ED%86%B1-%EC%95%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0/
슬랙과 atom, vs code가 일렉트론으로 만들어졌다 하니 믿을만 하다고 할 수 있을 것 같다.

결론

Node.js를 할 줄 안다고 하면 Node.js로 서버를 구성할 줄 안다라고 인식되는 것은 어느 정도 이해할 수 있다.
하지만 Node.js 그 자체를 백엔드 자체만의 기술, 웹 서버 자체만으로 받아들이고
프론트 엔드 개발자들은 Node.js를 쓸 줄 모른다는 그런 잘못된 지식으로 남들에게 더 이상 인식되지 않는 환경이 조성되길 바란다.
명심하자.
Node.js는 백엔드, 웹 서버가 아니라 자바스크립트 실행 환경에 불과하다