[포스코X코딩온] Node.js 설치 및 모듈, Express 사용법

포스팅 주제

• Node.js에 대한 설명
• 모듈의 사용법

---

node.js

 

Node.js란?

• Node.js는 구글 크롬의 자바스크립트 엔진(V8 Engine)을 기반해 만들어진 Javascript "런타임"이다.
• 이벤트 기반, 비동기 I/O 모델을 사용해 가볍고 효율적이다.
• npm 패키지는 세계에서 가장 큰 오픈 소스 라이브러리이다.

 

"런타임" - 여기서 사용되는 런타임이란 어떤 프로그램이 동작할 때, 프로그램이 동작하는 장소를 가리키는 말이다.

 

기존 Javascript의 런타임 환경은 웹 브라우저에서만 존재 했는데, 브라우저 밖에서도 작동하게 만드는게 Node.js이다.

이는 javascript를 서버단 언어로 사용하기 위해 만들어 졌다.

 

Node.js 설치 방법

Node.js를 설치하는 방법으로는 직접 웹 사이트에서 접속하여 설치하거나, Homebrew를 통해 설치 가능하다.

https://nodejs.org/en

Node.js

 

 

Homebrew에서 설치하기 위해서는 Homebrew가 먼저 터미널(cmd)창에 설치가 되어 있어야한다.

 

이후 커맨드 brew install node 를 입력하면 설치가 가능하다. 

 

Homebrew가 설치되어 있지 않은 분은 아래 글을 참조하여 설치 해주시면 됩니다.

https://minsu-jeong.tistory.com/6

[포스코X코딩온] 웹개발자 풀스택 과정 OT

 

이후 node.js가 설치 되었다면 콘솔창(터미널)에서 node -v를 입력해서 버전을 확인할 수 있습니다.

 

node 버전확인

 

node.js를 설치 완료했다면, npm도 같이 설치 되었을 겁니다.

 

npm은 노드 패키지를 관리해주는 틀로 js로 개발된 각종 모듈의 설치, 업데이트, 구성, 제거 과정을 자동으로 관리 해주는 프로그램 입니다.

 

npm도 설치가 완료 되었는지 확인합시다. npm -v

npm 버전확인

 

아래 나오는 숫자들은 버전을 나타냅니다.

 

REPL

 

node.js는 터미널이나 cmd처럼 REPL콘솔이 존재합니다.

R(Read) -> E(Evaluate) -> P(Print) -> L(Loop)

REPL사용법은 콘솔창에서 node를 입력하고 js처럼 사용가능합니다.

 

REPL 사용법

 

package.json

package.json 이란?

패키지들이 서로 의존되어 있어 문제가 발생할 수 있는데 이를 관리하기 위해 npm이 필요합니다.

또한 프로젝트에 대한 정보와 사용중인 패키지 이름 및 버전 정보가 담겨 있는 파일 입니다.

 

"name" : 패키지 이름
"version" : 패키지의 버전
"main" : 자바스크립트 실행 파일 진입점 (문답식에서의 entry point)
"description" : 패키지의 대한 설명
"scripts" : npm run을 이용해 정해놓는 스크립트 명렁어
"license" : 해당 패키지의 라이센스

 

<npm 사용하기>

npm init

• 프로젝트를 시작할 때 사용하는 명령어
• package.json에 기록될 내용을 문답식으로 입력한다.

 

npm init --yes

• package.json이 생성될 때 기본 값으로 생성된다.

 

npm install 패키지 이름

• 프로젝트에서 사용할 패키지를 설치하는 명령어
• 설치된 패키지의 이름과 정보는 package.json의 dependencies에 입력된다.

 

 

package.json을 만들 폴더로 이동해서 npm init or npm init --yes를 입력해서 package.jsond을 생성가능하다.

 

Node.js의 특징은?

1. 자바스크립트 언어를 사용할 수 있다.
2. Single Thread
3. Non-blocking I/O
4. 비동기적 Event-Driven

 

아래는 Single Thread의 장점이다.

• Single Thread는 주어진 일을 하나 밖에 처리하지 못한다.
• Non-blocking I/O 기능으로 일부 코드는 백그라운드에서 실행이 가능하다.
• 에러를 처리하지 못하는 경우 멈춘다.
• 프로그래밍 난이도가 쉽고, CPU, 메모리 자원을 적게 사용한다.

 

**여기서 에러를 처리하지 못하면 프로그램이 아예 중단되기 때문에 예외처리가 중요하다.

 

Node.js는 Multi Thread를 지원하지만 Js가 Single Thread만 지원하기 때문에 여기서 Node.js는 Single Thread를 사용한다.

 

Non-blocking I/O

동기 (Synchronous)

• 데이터의 요정과 결과가 한 자리에서 동시에 일어난다.
• 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어진다.
• 한 요청에 서버의 응답이 이루어질 때까지 계속 대기해야 한다.

 

단점 - 처리속도가 느리고 사용자 입장에서는 멈춰 있는것 처럼 보인다.

 

비동기 (Asynchronous)

• 동시에 일어나지 않는다.
• 요청한 후 응답을 기다리지 않고 다른 활동을 한다.

 

단점 - 코드짜기가 동기 시스템보다 복잡하고 비 직관적이다.

 

Node.js는 비동기 I/O 방식을 사용한다.

 

포스코x코딩온 교육자료

 

 

Event-Driven

Event-Driven은 이벤트가 발생할 때 미리 지정해둔 작업을 수행한다.

ex) 클릭, 네트워크 요청, 타이머 등

이벤트 리스너(Even Lister)

• 이벤트 등록 함수

콜백 함수(Callback Function)

• 이벤트가 발생했을 때 실행되는 함수

 

Call Stack

Call Stack (호출 스택) 시스템을 사용한다.

LIFO (Last In First Out) 방식으로 후입 선출 방식이다.

 

function first(){
    second();
    console.log(1);
}
function second(){
    third();
    console.log(2);
}
function third(){
    console.log(3);
}

first();

출력 결과

 

실행하기 위해서는 node를 입력해줘야 한다.

출력 결과를 보면 first()함수를 실행했지만 third()함수가 가장 먼저 실행되는 것을 볼 수 있다.

 

Event Loop

function run(){
    console.log('3초뒤 실행');
}
console.log('시작');
setTimeout(run, 3000);  // ms 단위
console.log('끝');

 

포스코x코딩온 교육자료

 

포스코x코딩온 교육자료

 

setTimeout(함수, 시간)을 주면 정해진 시간 뒤에 함수가 실행된다.

해당 방식이 이루어지는 과정은 호출 스택에 먼저 호출된 값들을 올려 놓고 실행 시킨다.

이 때 setTimeout을 실행 시 콜백 run을 백그라운드에 옮기고 나머지 값들을 먼저 실행 시킨다.

이 후 3초뒤 run함수는 태스크 큐에 값이 올라가고 이후 다시 호출 스택에 올라가면서 값이 실행된다.

 

 

모듈

• 모듈은 특정한 기능을 하는 함수나 변수들의 집합이다.
• 재사용 가능한 코드들로 코드 효율성을 높일 수 있다.

 

모듈 만들기

const add = (a,b) => a + b; // 모듈 만들기

module.exports = add; //모듈화

const add = require('./math'); //모듈 불러오기
console.log(add(3,6));

 

출력 결과

 

모듈 서버 만들기 http

// http 모듈로 웹 서버 생성

const http = require('http');
const fs = require('fs'); // 파일 관련 내장 모듈 (파일을 읽어와서 전송)
const server = http.createServer(function(req, res){
    // req : request 객체 (클라이언트에서 서버로 들어온 요청)
    // res : response 객체 (서버에서 클라이언트로 보내는 응답)

    // 응답 head, 본문, end를 지정
    // res.writeHead(200, {'content-type': 'text/html; charset=utf8'});  // 응답 헤더
    // res.write('<h1>Hello, node.js!</h1>'); //응답 본문
    // res.end('<p>My First Node Server!</p>'); //응답 종료 주석 처리 시 무한 로딩
    // 위 코드는 localhost:8000 접속 시 일어남


    try{
    const data = fs.readFileSync('./inde.html'); //경로에 있는 파일을 읽어 오겠다.
    res.writeHead(200, {'content-type': 'text/html; charset=utf8'});
    res.write(data);
    res.end();
    }catch(error){
        // 실습 : 404.html 만들어서 해당 html 파일을 응답으로 보내도록 코드 작성!
        console.log(error);
        const data = fs.readFileSync('./404.html');
        res.writeHead(200, {'content-type': 'text/html; charset=utf8'});
        res.write(data);
        res.end();
    }
});
const PORT = 8000;

// request 이벤트 : 클라이언트 요청
// 서버단에서 결과를 확인가능
server.on('request', function(req, res){
    console.log('request 이벤트 발생', req.url);
})

// connection 이벤트 : 클라이언트가 접속(클 - 서 연결됐을 때)했을 때 발생
server.on('connection', function(req, res){
    console.log('connection 이벤트 발생');
})

// 10초 후 서버 종료
// setTimeout(function(){
//     console.log('10초가 지나서 서버 종료');
//     server.close(); //서버 종료 메서드
// }, 10000);

// 

server.listen(PORT, function(){
    console.log(`sever listening on ${PORT}`);
})

index.js

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node HTTP 모듈</title>
</head>
<body>
    <h1>Node~ Hello Node</h1>
    <p>많이 어렵나요?</p>
    <p>조금요</p>
</body>
</html>

index.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error</title>
</head>
<body>
    <h1>404.Error</h1>
</body>
</html>

404.html

 

Express 모듈

Express 모듈을 사용하기 위해서는 npm install express를 해야한다.

npm을 설치하면 너무 많은 파일들이 생기기 때문에 github에 올리기전 .gitignore을 통해 항목을 제외해야 한다.

 

/node_modules
package-lock.json

.gitignore

 

const express = require('express');

const app = express();
const PORT = 8000;

//express에 사용할 템플릿 엔진 종류를 ejs로 등록
app.set('view engine', 'ejs');
// 템플릿 엔진 파일(.ejs)을 저장할 위치 등록
app.set('views', './views')

// static 미들웨어 등록 (정적 파일 로드 ex. css, js) 등록하지 않으면 직접 경로를 넣더라도 사용 불가
// static 이라는 실제 폴더를 static 이름으로 접근하겠다.
app.use('/static', express.static(__dirname + '/static'));
console.log(__dirname); // ~~/07-3-express

// static 이라는 실제 폴더를 public 이름으로 접근하겠다.
// app.use('/public', express.static(__dirname + '/static'))
//__dirname = /Users/jeongminsu/Desktop/github/kdt10/07-3-express



//app.get(경로, 해당 경로로 들어왔을 때 실행할 콜백함수)
// localhost:8000/ 경로로 접속했을 때
app.get('/', function(req, res){
    // res.send(응답내용)
    // res.send('<h1>Hello Express!</h1>');

    // index라는 파일명을 찾아서 해당 파일 렌더
    res.render("index");

})

app.get('/kdt', function(req, res){
    // res.send(응답내용)
    res.send('<h1>Hello KDT!</h1>');
})

app.listen(PORT, function(){
    console.log(`server listening on ${PORT}`);
})

 

express는 EJS 템플릿을 사용하는데

EJS의 특징은 html과 Js를 같이 사용할 수 있다는 점이다.

html문법은 기존과 같지만 Js문법을 사용하기 위해서는 <% %>을 사용해서 지정해줘야 한다.

 

포스코x코딩온 교육자료

 

ejs는 npm install ejs 를 통해 설치 가능하다.

res.render('파일명')을 통해 ejs 템플릿 렌더링이 가능하다.

 

미들웨어 static

이미지, css파일 및 JS파일(front)과 같은 정적 파일 제공 등과 같은 기능을

서버와 클라이언트 중간단(미들웨어)에서 컨트롤 하는 기능이다.

 

Express에 있는 static 메소드를 이용해 미들웨어로 로드 가능하다.

 

등록방법

*등록하지 않으면 경로가 맞더라도 미들웨어에 접근하지 못한다.

변수이름.use("/사용할이름", express.static(__dirname + '/실제경로'));