[새싹x코딩온] 웹 개발자 부트캠프 과정 5주차 회고 | Node.js

Node.js란?

서버 측 자바스크립트 런타임 환경으로, 브라우저 밖에서 자바스크립트를 실행할 수 있다. 이벤트 기반, 비동기 I/O 모델을 사용해 가볍고 효율적이다.

---

Node.js 특징

1. JavaScript 언어를 사용한다

• JS를 웹 브라우저 없이 터미널에서도 바로 실행할 수 있게 해줌
• 그로 인해 JS 하나로 프론트엔드와 백엔드를 모두 만들 수 있게 됨

2. Single Thread

• 한 번에 하나의 작업만 가능
• Non-blocking I/O 기능으로 일부 코드는 백그라운드에서 실행 가능
• 장점 : 프로그래밍 난이도 쉬움, CPU, 메모리 자원 적게 사용
• 단점 : 에러를 처리하지 못하면 멈춤

3. Non-blocking I/O

• 작업이 완료될 때까지 대기하지 않고 다음 작업 수행
• 시간적 이득 획득

4. 이벤트 기반(Event-Driven) 아키텍처

• 이벤트(클릭, 네트워크 요청, 타이머)등이 발생했을 때 지정해둔 작업 수행
• 1. 이벤트 리스너에 콜백 함수 등록
• 2. 이벤트 발생
• 3. 등록된 콜백 함수 호출

---

NPM

NPM이란, Node Package Manager로 노드 패키지를 관리해주는 틀이다.

npm init (프로젝트를 시작할 때 사용하는 명령어)

npm init --yes (기본값으로 npm init하기)

npm i(install) 패키지 이름 (패키지 설치 명령어)

---

모듈

모듈이란, 특정한 기능을 하는 함수나 변수들의 집합으로 재사용 가능한 코드 조각이다.

모듈 만들기

const add = (a, b) => a + b;	
module.exports = add;

모듈 불러오기

const add = require('./math');
console.log(add);

여러개의 모듈 만들기

const add = (a, b) => a + b;
const E = 2.718;
const PI = 3.141592;
// case1
module.exports = {add,E,PI};
// case2
module.exports.add = add;
module.exports.E = E;
module.exports.PI = PI;
// case2 생략
exports.add = add;
exports.E = E;
exports.PI = PI;

여러개의 모듈 불러오기

const math = require('./math2');
console.log(math);
console.log(math.add(math.PI, math.E));

객체 구조분해 주의점

• const { } 로 가져올 때는 객체 구조분해해 가져오기에 이름이 동일해야 함

const math = require('./math2');
console.log(math);
const { add, E, PI } = require('./math2');
console.log(add(E, PI));

• 하나만 내보낸 모듈은 이름이 달라져도 불러올 수 있음

const onlyOne = require('./math');
console.log(onlyOne);

---

ES2015 모듈

ES2015 모듈

• 자바스크립트 자체 모듈 문법으로, 노드 모듈과 방식이 약간 다름
• package.json에 “type”: “module”을 추가해 사용함

모듈 만들기

const a = "a 변수";
const b = "b 변수";
export = { a, b };
function connect() {
    return a + b ;
}
export default connect; (default : 한개만, 혹은 대표로 export 할 때)

모듈 불러오기

import { a, b } from "./var.js";
import connect from "./var.js";

---

Express 모듈

express 모듈 설치하기

npm install express

express 사용 예시

const express = require("express");
const app = express();
const PORT = 8000;
app.get('/', function (req, res) {
  res.send('hello express');
});
app.listen(PORT, function () {
  console.log(`Listening on port ${PORT}!`);
});

const express = require("express");
=> Express 모듈이 export 하는 최상위 함수로, express application을 만듦

const app = express();
=> Express() 함수를 호출함으로써 만들어진 express application

---

EJS 템플릿

Embedded JavaScript의 약자로, 자바스크립트가 내장된 파일을 html 형식으로 변환시키는 모듈이다.

ejs 템플릿 시작하기

npm install ejs

app.set('view engine', 'ejs');
=> view engine을 ejs로 설정
app.set('views', './views');
=> views 폴더로 경로 지정

app.use('/static', express.static(__dirname + '/static'));
=> static(이미지, css, js(front))한 정적 파일 제공하는 메소드

ejs 문법

• <% %> : 내부에 자바스크립트 코드 작성
• <%= %> : 변수 값을 템플릿에 출력
• <%- include('view의 상대주소') %> : 다른 view 파일 불러옴
  
  
  간단한 사용 예시

<ul>
<% items.forEach(function(item) { %>
  <li><%= item %></li>
<% }); %>
</ul>