MIND UPLOAD

# node.js

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

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

# npm

npm init
1

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

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

node로 실행

node index.js
1

# 패키지 스크립트

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

스크립트 작성 후 실행 가능

npm run start
1

# 모듈 시스템

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

  • 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"
1

추가

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
1

package.json

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

라이브러리 불러오기

import randomColor from "randomcolor";
1

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

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

# npm i

npm install
npm i
1
2

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

#react

← 03. react.js →