1. Node.js란? / 설치 / 웹 구조, 포트 / 모듈 / NPM, uglify install / npm module, underscore, dependency / Callback, 익명함수 / 동기와 비동기

Node.js란?

 

Node.js의 경쟁자

Node.js와 같은 런타임 기술인 Python, Ruby, PHP, JAVA는 

서버쪽에서 동작하면서 DB에 접속, 웹 페이지를 프로그래밍적으로 생산

 

Node.js의 장점

V8엔진

event-diven-programming

non-blocking IO

웹 브라우저(클라이언트쪽)과 웹 서버(서버쪽)에서 JS를 사용하여 하나의 언어로 완결된 앱 제작 가능

JS로 웹 브라우저 및 Node.js 제어하려면 웹 브라우저 및 Node.js의 고유 기능들에 대해 알고 있어야 한다.

Node.js 설치

다운로드 사이트(운영체제에 맞는 버전으로 다운)

정상적으로 설치됐는지를 확인하기 위해

node -v

npm -v

를 입력하여 설치된 버전을 확인할 수 있다.

 

 

웹 구조

Domain(naver.com)은 그냥 전번처럼 우리가 인식하기 쉽게 만든 것이고

접속할때는 IP주소를 통해 진행한다.

​

*요청하기 Request

Client -> Server 방향으로 요청

특정사이트를 요청함

그런데

하나의 서버컴터에 설치된 여러 서버앱 중

서버컴터는 어떤 서버앱을 연결해서 응답할 수 있느냐 하는 것이 중요

 

포트의 개념

컴퓨터에는 다음과 같은 종류의 문 즉, 포트가 있다.

이중에서 80번 포트에 웹 서버가 듣고있음

사용자가 이 서버에 접속할 때

http://a.com:80으로 입력하면

a.com에 해당하는 컴터를 찾고

이 컴터에 80번 포트에 연결하고 싶다고 함

그러면 그 컴터는 80번 포트에 연결해줌

그러나

80번포트는 생략해도 연결가능함

http를 통해서 접속하는 경우에는 80번포트를 쓰자는 약속이 있기때문.

 

모듈

모듈 = 부품 이라고 보면된다.

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}/`);
});

web페이지를 만드는 것은 어렵기때문에

사이트에서 위처럼 간단한 예시를 제공해준다.

노드는 웹을 쉽게 만들 수 있도록 모듈, 부품을 제공해주는데 대표적인것이 바로 http이다.

 

모듈 사용방법알기

 

노드 사이트에서 DOCS에 들어가면

모듈을 어떻게 사용하는지, 어떤 의미를 지녔는지를 알 수 있다.

그리고 위의 간단한 예시에 사용된 함수, 메소드의 의미를 알 수 있다.

예를들어

하단 처럼 server.listen 부분을 보면

위 예시에서 사용된 createServer.listen이 무엇을 의미하는지 알 수 있다.

NPM, uglify install

Node.js가 제공하는 모듈. 이는 노드에서만 가능

HTTP

OS

​

JS가 제공하는 모듈. 이는 JS가 동작하는 모든 곳에서 사용가능한 모듈

Date

String

Array

 

NPM

Node계의 앱스토어

설치, 삭제, 업글, 의존성 관리 를 하기 쉽도록 도와줌

Node가 굉장히 빠른 속도로 성장했기에

오늘날 노드라는프로그래밍을 할때 뿐만아니라 다른 것을 개발할때도

이를 기반으로 만든 것이 많음.

고로 NPM을 잘 아는 것이 좋다.

www.npmjs.com NPM홈페이지에서 모듈 검색 가능하다

​

추가 참고 사이트

 

npm uglify 설치

 

설치방법은 크게 두가지

npm install uglify-js -g

npm install uglify-js

여기서 -g는 global을 의미한다.

컴퓨터 전역에 사용하는 독립적 sw로 설치

​

-g 없는것은 local을 의미

즉 현 프로젝트 내에서의 부품으로만 쓰겠다는 의미

 

uglifyjs --help를 입력하면 어글리파이 SW의 사용법을 알려줌

uglify는 작성한 소스코드를 일부러 못생기게 함

이유는 예시로 설명하겠음

하단처럼 소스 작성

cmd창에 uglifyjs pretty.js를 입력하면

하단 처럼  가독성을 높이는 줄바꿈을 없앤 상태로 나타난다.

여기서 끝에 -m을 추가하면 하단처럼 나타난다.

m은 mangle(짓이기다)의 약자이며

지역변수처럼 이름을  바꿔도 상관없는 변수를 한글자의 가장 짧은 o로 (짓이겨서) 출력시킨다.

그리고 하단처럼 입력하여

uglify형태(-m형태 추가)로 저장할 수 있다.

uglify형태로 저장하고자 한다면 똑같은 파일 이름 뒤에 -m을 붙여서 이 파일이 최소화(min) 되었다는 표시를 한다.

이것은 해당파일이 min파일이라는 것을 나타내는 일종의 규칙이다.

npm module, underscore, dependency

패키지 설치

현재 underscore 패키지는 다른 사람이 만든 모듈,패키지을 가져올 수 있게 하는 것이다.

underscore패키지를 가져오기 위해 가장 먼저 현재 디렉터리를 패키지로 지정하고

npm init 를 입력한다.

이를 입력하면 cmd창에 다음과 같은 입력창이 뜬다.

name 은 이프로젝트의 이름

description 은 그냥 프로젝트에 대한 설명란

entry 이 프로젝트를 구동시키는 js파일을 설정

test command 어떤 명령을 입력하면 테스트할 수 있는가

git repository 깃 허브 주소

​

npm init 설치가 끝나면

다음과 같은 폴더와 파일들이 형성

package.json 파일 내부엔 cmd에서 입력한 값들이 나타남

이를 바탕으로 내가 만든 sw를 npm통해 쉽게 설치할 수 있다.

 

underscore 설치 dependency ?

underscore홈페이지로 접속하면

다음과 같이 여러방식으로 설치할 수 있다는 것을 알 수 있다.

​

우리는 Node로 설치할 것이므로 하단을 입력

npm install underscore

하단과 같이 underscore폴더가 생성됨

그런데, 다음과 같이 extraneous라는 키워드가 cmd창에 나타난다.

extraneous라는 의미는 외부의 부가적인 이라는 의미의 단어로

온전하게 underscore를 프로젝트에 포함시키지 않은 상태라는 것을 의미

​

그래서

끝부분에 플래그,옵션 --save를 붙여준다.

npm install underscore --save

​

이렇게 설치를 하면

package.json에 다음과 같이 dependency에 내용이 추가된다.

위 패키지는 underscore라는 프로젝트에 1.8.3버전에 의존하고 있다는 것을 의미

이렇게 디펜던시가 있는 package.json파일만 있으면

언제든지 underscore 1.9.1버전을 내 프로젝트에 포함시킬 수 있다는 의미

즉, 어떤 모듈을 프로젝트에 반드시 포함시키여만 한다면 --save를 입력할 것

--save의 유무 의미를 잘 안다면 빼도 좋다.

 

underscore.js

underscore.js 파일을 생성하여

하단 처럼 작성

underscore모듈이 가지고 있는 first 메소드 기능을 써보자.

arr[0] = _.first(arr)

이므로 똑같이 3이 출력된다.

​

그리고 마지막 원소를 출력하려면

기존에는 하단처럼 썼으나

arr[arr.length-1]

underscore 모듈인 last메소드를 쓰면

_.last(arr)

이면 된다.

 

var _ = require('underscore') // 언더스코어를 프로젝트에 포함시키기
// _이 변수를 이용해서 underscore 모듈을 사용함
// 이 모듈을 가져온 뒤 객체를 리턴

var arr = [3,6,9,1,12];
// 기본적으로 빈약한 자바스크립트의 배열기능을 언더스코어가 채워줌
// underscorejs.org 사이트에서 Arrays를 클릭하면 관련된 기능들이 나옴
// 이름 보고 판단

console.log(arr[0]);

console.log(_.first(arr));
//underscore를 이용해서 출력하기. 그리고 언더스코어의 함수인 first
//first라는 함수, 입력값으로 들어온 arr배열값의 첫번째 원소를 꺼낸다는 의미

console.log(arr[arr.length]);
console.log(arr[arr.length-1]);
// 인덱스는 시작점 0,갯수는 1부터 카운팅하기 때문

console.log(_.last(arr)); // 위와 동일한 결과지만 가독성이 높다

독립적(전역적)으로 실행되는 npm으로 만들어진 sw를 설치하고 싶다면

하단의 sample은 설치하고픈 sw

npm install sample -g

-g가 없으면 현 프로젝트에서 단순 부품으로만 쓰겠다는 의미.

 

Callback 함수, 익명 함수

콜백함수는 node와는 큰 상관없으나

js에서 중요

​

cmd에 node 입력하면 기존웹 개발자 모드처럼 사용가능

같은 라인에 세미콜론쓰면 한 줄에 여러개의 JS코드 입력 가능

​

sort()함수의 사용법에 대해 검색해보면 다음과 같이 뜸

a.sort(b) => b라는 함수를 인자,매개변수로 받아 b형식에 따라서 a함수는 정렬된다.

이 인자,매개변수를 콜백함수라고 한다.

만약 함수가 일회성으로만 사용된다면

인자자리에 직접 함수를 정의하도록 한다. 이름없는 함수를 익명함수라 한다.

더 간결해진 것을 볼 수 있다.

콜백 함수

 

익명 함수

 

sort라는 함수를 추정해서 한 번 정의해보자.

sort라는 함수는 인자가 전달되어야 작동한다.

그러나 sort()로 하면 에러 발생

함수를 전달하고 그 함수의 함수가 sort안에서 실행될 수 있도록 모든 것은 sort 내부에서 작성한다.

동기와 비동기

동기적

이메일을 한명한명에게 보내야함

비동기적

이메일을 보내는 별도의 시스템에게 시킴. 순식간에 전송가능

그렇다면 코드상에서의 동기적/ 비동기적은 무엇일까

​

www.npmjs.com 에서 DOCS로 들어간다

FileSystem을 보면

다음처럼 fs.readFile로 나타나는 것은 비동기방식

그리고

fs.readFileSync가 나타나는 것이 동기방식이다.

​

node.js는 비동기적으로 처리하는 것이 가장 큰 특성, 특징.

기본적으로 시간이 필요한 작업들(IO작업)은 node.js에선 비동기적으로 처리

원할경우 동기적으로 처리할 수 있도록 Sync를 붙여서 쓸 수 있도록 함(그러나 가급적 쓰지 않길 권장함)

​

그리고 저 빨간 밑줄을 클릭해서 들어가면

readFile을 어떻게 쓰는 지 나온다.

sync_async.js 파일을 만들고

하단 소스를 입력한다.

다음 처럼 입력 한 뒤, 출력되는 순서를 보자.

정리하자면

동기식은 입력된 순서대로 출력되지만

비동기식은 입력 순이 아닌 처리된 순서대로 출력되므로 노드의 반응속도는 빠르다.