[React] React 사용을 위한 Node.js 설정 및 사용법

Node.js 설치

Node.js 공식 사이트에서 LTS 버전으로 설치

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

 

설치 후 node -v, npm -v 명령어로 설치 여부 확인.

 

패키지 설정

패키지 -> Node.js에서 사용하는 프로그램의 단위

npm init 명령어를 이용해 패키지를 생성할 수 있다.

npm init

 

패키지 생성이 완료되면 package.json 이라는 설정 파일이 생성된다.

pacakage.json을 열어보면 아래와 같이 패키지를 생성할 때 설정한 기본적인 내용들이 들어있다.

{
  "name": "section03",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "author": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
   },
}

 

이 상태에서 새로운 자바스크립트 파일을 만들고 실행시킬 수 있다.

같은 폴더 내에 index.js 파일을 생성하고 아래와 같은 내용을 입력한다.

console.log("안녕 Node.js")

 

이제 node 명령어로 index.js를 실행시킬 수 있다.

 

단, node src/index.js 명령어로 노드를 실행할 수 있으나, package.json의 scripts에 명령어를 입력해주면 start에 node src/index.js로 값을 입력해주면 npm run start 명령어를 입력하여 실행 가능하다.

{
  "name": "section03",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "author": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node src/index.js"
  },
}

 

node index.js, npm run start

 

모듈 시스템 이해하기

기능별로 모듈을 생성하고, 불러오고, 사용하는 방법을 알아보자.

 

JavaScript의 모듈 시스템에는 아래와 같은 것들이 존재하지만, 가장 많이 사용하는 CJS와 EMS에 대해서만 알아본다.

Common JS(CJS)

ES Module(ESM)

AMD
UMD 

...

Common JS(CJS)

-> module.exports에 메소드를 등록해서 외부에서 불러올 수 있게 하고, 가져올 때는 require 메소드를 이용해서 모듈의 메소드를 불러올 수 있다. 

math.js

// math 모듈
function add(a, b) {
  return a + b;
}

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

// CJS (Common JS 모듈 시스템)

module.exports = {
  add, // 이렇게 key값과 value 값이 같을 경우에는 생략 가능.
  // add : add,
  sub: sub,
};

index.js

// CJS (Common JS 모듈 시스템)

// const moduleData = require("./math");
// console.log(moduleData.add(1, 2));
// console.log(moduleData.sub(1, 2));

const { add, sub } = require("./math");

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

 

EMS(ES Module 시스템)

-> export 키워드를 붙여 외부에서 불러올 수 있게 하였고, 가져오는 곳에서 import 키워드를 이용하여 불러올 수 있다.

// math 모듈
export function add(a, b) {
  return a + b;
}

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

// default 불러올 때 이름을 마음대로 정해서 불러올 수 있다.
export default function multiply(a, b) {

  return a * b;
}

// ESM (ES Module 시스템)
// 이렇게 안하고 function 앞에 export 키워드를 붙여줘도 된다!
// export { add, sub }; // export 키워드를 이용해서 객체를 리터럴로 생성해서 넘겨주기만 하면 된다.

index.js

// ESM (ES Module 시스템)
import mul, { add, sub } from "./math.js";
// import mul from "./math.js";
// import { add, sub } from "./math.js";

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

외부 패키지 설치하기

npmjs 사이트 ->  node.js 패키지 모음 사이트

https://www.npmjs.com/

-> npm i [패키지명] 명령어를 통해 설치 가능

 

npm i 명령어를 입력하여 패키지를 설치하면 node_modules 폴더와 package-lock.json 파일이 생성된다.

 

node_modules -> 설치한 라이브러리가 저장되는 곳

(node_modules가 지워졌다면 npm i 명령어를 입력하면 다시 설치됨.)

 

package-lock.json -> 패키지가 사용하고 있는 라이브러리의 정확한 버전이나 정보를 저장하는 파일

(package.json에는 대략적인 버전 정보만 저장됨.)