02. node.js

node.js는 웹 브라우저가 아닌 환경에서도 자바스크립트 코드를 실행시켜주는 자바스크립트의 런타임, 자바스크립트의 실행환경(구동기)

node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임 입니다

npm

npm init

폴더안에 package.json 생성됨
index.js 파일 생성후 소스 작성

console.log("안녕 node js");

node로 실행

node index.js

패키지 스크립트

"scripts": {
    "start": "node src/index.js"
}

1
2
3

스크립트 작성 후 실행 가능

npm run start

모듈 시스템

모듈을 생성하고, 불러오고, 사용하는 등의 모듈을 다루는 다양한 기능을 제공하는 시스템

Common Js (CJS)
ES Module (ESM)
AMD
UMD

Common Js (CJS)

math.js

function add(a, b) {
  return a + b;
}

function sub(a, b) {
  return a - b;
}

module.exports = {
  add,
  sub,
};

1
2
3
4
5
6
7
8
9
10
11
12

index.js

const moduleData = require("./math.js");

console.log(moduleData);

console.log(moduleData.add(1, 2));
console.log(moduleData.sub(1, 2));

// 구조분해할당 가능
const { add, sub } = require("./math.js");
console.log(add(1, 2));
console.log(sub(1, 2));

1
2
3
4
5
6
7
8
9
10
11

ES Module (ESM)

package.js 에

"type": "module"

추가

math.js

function add(a, b) {
  return a + b;
}

function sub(a, b) {
  return a - b;
}

export { add, sub };

1
2
3
4
5
6
7
8
9

index.js

import { add, sub } from "./math.js";

console.log(add(1, 2));
console.log(sub(1, 2));

1
2
3
4

함수 앞에 export를 적어줘도 동일하다

export function add(a, b) {
  return a + b;
}

export function sub(a, b) {
  return a - b;
}

export default function multiply(a, b) {
  return a * b;
}

1
2
3
4
5
6
7
8
9
10
11

불러오기

import multiply from "./math.js";
// 이름 변경도 가능
import mul from "./math.js";
// 합치는것도 가능
import mul, { add, sub } from "./math.js";

1
2
3
4
5

node.js 라이브러리 사용하기

라이브러리 : 프로그램을 개발할때 필요한 다양한 기능들을 미리 만들어 모듈화 해놓은것

npm i randomcolor

package.json

"dependencies": {
    "randomcolor": "^0.6.2" // ^0 : 0점대 에서 1점대 버전 이전까지의 버전 중에 최신 버전으로 설치하겠다
  }

1
2
3

라이브러리 불러오기

import randomColor from "randomcolor";

라이브러리에서 어떠한 값을 가져올 때는 경로를 명시하는게 아니라 from 뒤에 라이브러리의 이름만 명시하면 된다.

const color = randomColor();
console.log(color);

1
2

npm i

npm install
npm i

1
2

package.json 의 dependencies의 정보를 기준으로 모든 패키지, 모든 라이브러리를 다시 다 설치해준다.

#react

← 01. javascript 기초03. react.js →