모듈 시스템

대형 어플리케이션을 만든다면 그 안에 여러 기능이 있을 것이다.

예를 들면 쇼핑몰이라는 사이트에 회원관리기능, 장바구니 기능, 결제 기능 등

이러한 기능들을 파일 하나로 묶어 만들면 생산성이 떨어지고 유지보수가 힘들다.

그래서 기능들을 각각 파일로 분리해 관리하는 것을 모듈시스템이라고 한다.

 

common Js 방법

예전부터 Node.js에서 사용하던 방식으로 동기 방식으로 requir는 코드 실행시 바로 처리한다.

// math.js
function add(a, b) {
    return a+b;
}

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

// common js를 사용해서 내보내기
module.exports = {
    add : add,
    sub : sub
}

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

console.log(moduleData);
// { add: [Function: add], sub: [Function: sub] }

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

 

 

ESM 방법

최신 ES6 방식으로 브라우저에서도 사용가능하다.

단, 비동기 방식으로 import는 최상단에 있어야한다.

common Js랑 ESM은 함께 사용할 수 없음

//math.js
function add(a, b) {
    return a+b;
}

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

export { add, sub };

 

export를 선언문 앞에 붙여도 된다.

//math.js
export function add(a, b) {
    return a+b;
}

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

//index.js
import { add, sub } from "./math.js"; //확장자까지 꼭 작성해야함!
console.log(add(1, 2));
console.log(sub(2, 1));

 

기본값으로 내보낼 수 있다.

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

import multiply from "./math.js";

// 이름은 자유임
import mul from "./math.js";

// 더 깔끔하게 작성 가능
import multiply, {add, sub } from "./math.js";

 

 

라이브버리 사용

구글에 npmjs 검색

https://www.npmjs.com/

 

오늘 예시는 랜덤컬러 라이브러리를 사용해보겠음

 

터미널에서 설치 실행

 

모듈 생성 확인

 

파일을 공유할 때 node_modules는 제외해도 된다. 파일만 무거워짐..

import randomColor from "randomcolor";
const color = randomColor();
console.log(color);

 

---

 

한 입 크기로 잘라먹는 리액트

https://inf.run/FiFhg