프론트엔드/한 입 크기로 잘라먹는 리액트

Node.js - 모듈 시스템, 라이브러리

icems0428 2025. 1. 20. 00:09

Node.js란?

 들어가기에 앞서, node.js란 자바스크립트를 웹브라우저 밖에서도 실행시킬 수 있는 런타임, 즉 실행 환경이다. 브라우저는 클라이언트 측 UI 작업을 처리한다. 그러므로 브라우저 밖에서 실행된다는 건 서버 측 실행 환경이라는 뜻! 브라우저 쪽은 리액트가 처리한다.

 쉽게 말하자면 내 컴퓨터를 서버로 만들 수 있다는 것이다. 브라우저 밖에서 실행되기 때문에 파일, 데이터 접근이 가능하고 터미널에서 자바스크립트 코드를 실행시켜 볼 수가 있다. 그래서 node.js가 아니더라도 서버를 제공하는 다른 개발 환경을 사용해도 된다. 그렇지만 node.js가 웹 개발에 적합한 도구들이 많기 때문에 널리 사용되고 있다.


모듈 시스템

 먼저 모듈이란, 패키지(프로젝트)를 구성하는 요소를 말한다. 쇼핑몰 패키지를 만든다고 하면, 장바구니 기능, 결제 기능, 로그인 기능별로 모듈화하여 유지보수가 용이하게 만들 수 있다. 모듈 시스템은 이러한 모듈을 다루는 다양한 기능을 제공하는 시스템이다. 예를 들면 inport, export 시스템들이 있다.

  • CJS (Common JS) => 기본적으로 내장되어 있는 모듈 시스템.
  • ESM (ES Module) => 최신 기능을 제공하는 모듈 시스템. 
// export 하는 법 (ESM 기준)
// math 모듈

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;
}
// import 하는 법
// index.js

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

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

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

 

 ES Module 사용할 경우에, import from에 모듈은 확장자까지 경로를 모두 나타내야 하고, 라이브러리는 그럴 필요 없이 이름만 쓰면 된다. 또한 export default라는 기능도 있는데, 이는 중괄호 필요 없이 심지어 원하는 이름으로 import 해올 수 있다.


라이브러리

 프로그래밍에 필요한 다양한 기능들을 모듈화 해놓은 것. 내가 직접 만들 수도 있고, 사람들이 만든 라이브러리를 다운로드해 쓸 수도 있다. npmjs.com사이트가 라이브러리 백화점이라고 한다. 모든 라이브러리들이 모여 있으니 검색해서 사용하면 된다.