JavaScript와 Node.js 시작하기

[ JavaScript란 ]

JavaScript는 "객체기반의 스크립트 언어이다 (위키백과 왈)"라고 정의되어 있습니다. 그 말은 필요한 것들을 필요한 때에 꺼내 사용할 수 있다는 뜻이겠죠. 정확히 이 언어가 하는 일은 웹브라우저의 소프트웨어를 프로그래밍 언어로 제어합니다. 현재까지 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이기 때문에 그 중요성은 어느정도 대변되겠죠. 게다가 최근 Node.js의 등장으로 자바스크립트 언어로만 클라이언트, 서버를 구축할 수 있게 됐습니다. 이제 자바스크립트로 할 수 있는 일은 웹브라우저를 넘어서 굉장히 많아 졌습니다.

웹페이지 스크립팅(DOM), 서버 스크립팅(Node.js), 브라우저 확장기능(Chrome, Opera, Safari...), PDF, Adobe 어플리케이션, Unity 게임엔진, Google Apps Script, 채팅, OpenOffice 등등.. 자바스크립트의 확장성은 갈수록 커져가고 있죠.

[그림1] 자바스크립트의 "문법"은 다양한 "환경"에서 활용된다. 그리고 그 환경은 점점 커지고 있다.

[ Node.js란 ]

Node뒤에 js가 붙는 이유는 자바스크립트로 만든 기술이기 때문입니다. Node.js은 구글 크롬의 V8엔진과 Non-blocking I/O, Event-driven를 기반으로 시작된 프로젝트였습니다. 웹브라우저에 국한되어 사용됐던 자바스크립트는 그저그런 언어로 인식이 박혀있었습니다. 하지만 Google Gmail, Google Maps와 같은 웹어플리케이션이 등장하면서 웹브라우저의 무한한 가능성이 생기기 시작했죠. 그리고 마침내 Node.js의 등장으로 웹브라우저 뿐만 아닌 서버를 구축할 수 있게 됐습니다. 이로인해 자바스크립트의 인기는 폭발하게 되죠. 우리는 이제 자바스크립트를 알면 웹브라우저에서 사용하는 자바스크립트와 서버에서 사용하는 자바스크립트(Node.js)의 영역으로 뻗어나갈 수 있고 하나의 언어로 완전한 웹어플리케이션을 만들 수 있게 됐습니다. 자바스크립트로 서버부터 웹브라우저까지 제어할 수 있지만 완벽하게 똑같이 쓰이지는 않습니다. 자바스크립트 문법은 같지만 웹브라우저와 서버에서 쓰이는 명령어가 각각 다르기 때문에 주의 해야합니다.

[ 서버 구축해보기 ]

https://nodejs.org/ko/about/ 의 예제는 Node.js를 이용해 간단한 서버를 구축할 수 있습니다. 

const http = require('http');

const hostname = '127.0.0.1';

const port = 3000;

const server = http.createServer((req, res) => {

res.statusCode = 200;

res.setHeader('Content-Type', 'text/plain');

res.end('Hello World\n');

});

server.listen(port, hostname, () => {

console.log(`Server running at http://${hostname}:${port}/`);

});

이 코드를 node로 실행시키면 서버가 열립니다. 서버가 열렸다는 것은 '127.0.0.1:3000'에서 요청이 들어오길 기다린다는 뜻입니다. 그리고 "요청"이 들어오면 서버는 "응답"을 해주겠죠. 위 코드에서는 'Hello World'를 출력하는 응답을 하고 있는 것입니다. (res. = 응답)

(hostname은 ip주소입니다. ip주소는 각각의 컴퓨터가 가지고 있는 고유의 주소입니다. '127.0.0.1'의 주소를 가진 컴퓨터로 "첫 페이지를 보여달라"고 요청하는 과정인거죠. 그게 "Hello World"였습니다. 

port는 해당 컴퓨터의 수많은 서버들이 자리한 위치입니다. 해당 컴퓨터에 웹브라우저를 통해 요청하고 싶다면(웹사이트에 접속하고 싶다면) 웹서버에 해당하는 포트에 요청을 하게 됩니다. 반대로 웹서버 입장에서는 해당 포트에서 대기하고 있습니다. 이를 듣고 있다(Listen)라고 합니다. 참고로 http"s"를 붙여서 접근하면 자동으로 웹서버에 요청하는 것이라는 약속을 했기 때문에 포트를 생략할 수 있습니다.)

[ npm ]

모듈(module)은 어플리케이션을 사용할 때, 편리하게 사용할 수 있도록 도와줍니다.  

예를들어 서버를 만들기 위해서 일일이 작업하기 힘들기 때문에 다음과 같이 편하게 사용할 수 있도록 도와줍니다.

const http = require('http');

http를 위해서 http 모듈을 가져옵니다.

const server = http.createServer((req, res) => {

res.statusCode = 200;

res.setHeader('Content-Type', 'text/plain');

res.end('Hello World\n');

}).listen(port, hostname, () => {

console.log(`Server running at http://${hostname}:${port}/`);

});

http모듈에서 createServer라는 메서드를 이용해 서버를 만들고, 그 서버는 hostname(선언된 변수)의 port(선언된 변수)를 듣고 있다(listen 메서드)는 뜻입니다.

npm(Node Package Manager)은 Node.js와 JavaScript가 제공하지 않는 다양한 모듈을 토대로 더 다양한 모듈을 제공합니다.  npm은 필요한 기능만 쓸 수 있는 모듈과 독립적인 소프트웨어도 제공하고 있습니다. 

npm으로 받을 수 있는 수많은 소프트웨어와 모듈은 https://www.npmjs.com/에서 확인할 수 있습니다.

대표적인 모듈 "underscore"를 설치해보겠습니다.

먼저, npm을 설치해야겠죠? 하지만 정말 편리하게도 Node.js를 설치할 때, npm이 안에 포함되어 있기 때문에 따로 설치할 필요가 없습니다. npm으로 underscore를 설치하기 전에 package(module or software)를 사용할 디렉토리(범주)를 설정해야 합니다.

$ npm init --save

(이후에 나오는 설정값(package name, description...)들은 알맞게 잘 사용하면 됩니다. 참고로 entry point는 package를 사용할 파일;나중에 바꿀 수 있음, test command는 test할 커멘드;skip하면 됨.)

(이렇게 설정하면 초기설정이 담긴 package.json 파일이 생긴다.)

$ npm install underscore --save

(설치하면 node_module 폴더가 생기고 underscore 모듈이 생성된다. --save는 이 모듈을 현재 작업공간에서 계속 사용할 것인가에 대한 옵션. 모르면 붙이면 된다! --save를 붙이면 init 했을 때 생긴 package.json 파일 제일 하단(dependencies부분)에 underscore가 추가된다.

node v11.3.0 기준 변경사항; 이제 --save를 붙이지 않아도 자동으로 dependcies에 추가 됨.)

이제 underscore 모듈을 사용할 수 있게 됐습니다. underscore는 대표적으로 배열을 쉽게 handling할 수 있는 모듈로 node.js 개발자에게 필수적인 모듈입니다.

const _ = require('underscore');

var arr = [2,4,1,5,2,4,6];

//모듈사용X

console.log(arr[0]);

//모듈사용

console.log(_.first(arr));

//모듈사용X

console.log(arr[arr.length-1]);

//모듈사용

console.log(_.last(arr));

결과는

2

2

6

6

으로 나오게 됩니다.

[ Callback 함수 ]

매개변수를 받는 함수에서 매개변수가 함수형태일 때, 그 함수를 Callback 함수라고 합니다. 매개변수는 해당 함수에서 필요할 때마다 가져다 쓰는 변수입니다. 그 변수가 함수일 때 Callback 함수라고 합니다. 말이 조금 어렵나요? 쉽게 말하면, 함수 안에 함수를 Callback 함수라고 합니다. 하지만 일반적으로 함수를 그대로 가져오는 것과는 조금 다릅니다. Callback 함수는 Background로 넘겨버리고 main 함수가 실행된 뒤에 다시 가져와 작업의 결과를 알려줍니다. Background에 있던 함수를 다시 불러오기 때문에 Callback이라는 말이 붙었습니다.

아래 코드를 보시죠.

function first(){

second();

console.log('first');

}

function second(){

third();

console.log('second');

}

function third(){

console.log('third');

}

first();

함수 안에 함수가 호출되면 가장 안쪽에 있는 함수부터 실행됩니다. 이 함수들은 동기방식으로 작동합니다. 뒤에서 설명이 다시 나오겠지만 이 함수들은 순차적으로 하나의 함수가 수행될 때까지 기다렸다가 다음 함수를 실행시킵니다. 그렇다면 비동기 방식으로 작동되는 Callback함수는 어떤식으로 작동 되는지 알아보겠습니다.

[ Event-Driven, 이벤트 기반 ]

이벤트 기반은 Callback함수를 사람이 아닌 시스템에서 결정하는 것을 의미합니다.  우리는 먼저 비동기 방식을 이해하기 위해 이벤트루프가 어떻게 생겼는지 확인 해봐야합니다. 코드를 보면서 이해해보겠습니다.

function run(){

console.log('execution');

}

console.log('start');

setTimeout(run,1000);

console.log('end');

setTimeout 함수에서 run이라는 함수를 Callback하고 있습니다. 하지만 run함수는 1초 뒤에 실행되죠. 이렇게 이벤트가 발생했을 때(클릭, 네트워크 요청, Time...), 어떤 작업을 할지 미리 정해둔 뒤 시스템이 판단하에 그 작업의 순서를 정하죠. 위 코드에서는 'execution'이라는 작업을 정해뒀습니다. 1초 뒤의 작업을 미리 정해둔 상태입니다. 1초의 기다림이 필요하니 'start, end, execution' 순으로 출력됩니다. 작업순서는 시스템이 무작위로 정하지 않습니다. 바로 Event-loop, 이벤트 루프를 통해서 작업의 순서를 결정합니다.

[그림2] 호출 순서대로 Stack에 함수들이 쌓이고 Event가 발생하는 함수들은 Background로 이동해 Event가 수행됩니다. 그리고 Queue로 이동해 차례대로 작업들이 다시 Stack으로 쌓여 각 함수들의 작업이 수행됩니다.

[ 비동기 함수 ]

동기(Synchronous), 비동기(Asynchronous)는 데이터를 받는 방식입니다. 동기는 동시에 일어나고 비동기는 동시에 일어나지 않는 뜻을 가지고 있죠. 다시 표현하면 동기는 작업을 수행했을 때 결과를 그 자리에서 받아야하고 비동기는 결과를 그 위치에서 받지 않습니다. 그래서 동기방식은 한 작업을 수행했을 때, 다른일을 하지 않고 결과가 나올 때까지 기다립니다. 

이메일을 보내는 작업을 예로 들겠습니다. 동기방식은 100명에게 메일을 보내고 싶을 때, 한명에게 메일을 보내고, 다음사람에게 메일을 보내고, 그 다음사람에게 메일을 보내고... 100번을 반복합니다. 그렇다면 메일을 100명에게 모두 보내기 전까지 다른일을 하지 못합니다. 하지만 비동기 방식은 100명의 이메일을 한번에 적고 메일을 보냅니다. 비동기방식을 가진 이메일 시스템은 이 작업을 받아 백그라운드에서 메일을 보내는 작업을 수행하죠. 그동안 우리는 다른 일을 할 수 있습니다. 그리고 시간이 지나면 100명에게 모두 메일을 보냈다는 확인창을 확인할 수 있습니다.

//Async

console.log(2);

fs.readFile('text.txt',{encoding:'utf8'},function(err,data){

console.log(3);

})

console.log(4);

비동기방식으로 숫자를 출력하는 코드입니다.(filesystem이라는 내장된 모듈로 'text.text'파일을 가져오는 readFile메서드를 사용했습니다. 대표적인 비동기 함수입니다.

fs. readFile(path,[option],callback)

위 코드에서 경로와 callback함수를 적어주면 어떻게 출력되는지 생각해봅시다. 순서대로라면 "2, 3, 4"가 출력되어야 하지만 "2, 4, 3"으로 출력됩니다. 그 이유는 readFile이 비동기 함수이기 때문에 callback함수에서 어떤 작업을 할지 미리 정해두고(console.log(3)) background로 넘겨 main function의 작업들이 진행된 이후에 callback함수를 다시 가져와 미리 정해둔 작업의 결과가 나타나기 때문입니다.