728x90
반응형
SMALL
모듈 시스템 4가지
- CommonJS (이하 CJS) – NodeJS 환경을 위해 만들어진 모듈 시스템
- ES Module (이하 ESM) – ES6 에 도입된 자바스크립트 모듈 시스템
- AMD – 가장 오래된 모듈 시스템, require.js 라이브러리를 통해 개발됨
- UMD – AMD와 CommonJS 등 모듈 시스템을 함께 사용하기 위해 개발됨
모듈 내보내기, 불러오기
- CJS : require, module.exports, exports
- ESM : import, export, export default
CommonJS 문법
- require : 가져오기
- exports : 내보내기
- module.exports : 내보내기
require 특징
- NodeJS 에서 사용하고 있는 CommonJS 모듈 키워드
- 루비 언어 방식과 비슷함
- 파일 어느 지점에서든지 호출 가능
- require() : module.exports 를 리턴함
- exports 는 module.exports 를 refer 한 것이고, shortcut 에 불과함
require를 사용하는 경우
- Node.js 환경에서 사용되는 모듈 시스템(CommonJS)을 사용하는 경우
- 코드를 동기적으로 로드하고 실행할 필요가 있는 경우
- 모듈 전체를 가져와야 하는 경우
- ES6 모듈이 아닌 다른 모듈 포맷을 사용하는 경우
// CommonJS style using require
const express = require('express'); // Node.js에서 널리 사용되는 모듈 시스템
const myModule = require('./myModule'); // 코드를 동기적으로 로드할 필요가 있을 때
const utils = require('./utils'); // 모듈 전체를 가져와야 하는 경우
ES6 문법
- import : 가져오기
- export : 내보내기
- export defaults : 내보내기
import 특징
- ES6에서 새롭게 도입된 키워드
- 자바와 파이썬 언어 방식과 비슷함
- 파일 시작 부분에서만 호출 가능
- 필요한 모듈 부분만 선택하고 로드할 수 있어 더 선호함
- require() 에 비해 성능이 우수하며 메모리 절약
import를 사용하는 경우
- ES6 모듈 시스템을 사용하는 경우
- 비동기적으로 모듈을 로드하고 실행할 수 있는 경우
- 필요한 부분만 가져올 수 있는 경우
- TypeScript 등의 다른 언어에서 사용되는 모듈 시스템
// ES6 style using import
import React from 'react'; // ES6 모듈 시스템을 사용할 때
import { useState, useEffect } from 'react'; // 필요한 부분만 가져올 수 있을 때
import('./myModule').then(myModule => { // 비동기적으로 모듈을 로드할 수 있을 때
// 로드된 모듈 사용
});
💡 주의사항
출력할 때 export(ES6)와 exports(CommonJS)를 헷갈리지 않도록 주의해야 한다.
결론적으로, require는 Node.js에서 널리 사용되는 CommonJS 모듈 시스템을 사용하고 동기적으로 모듈을 로드할 때 유용하다.
반면에 import는 ES6 모듈 시스템을 사용하고 비동기적으로 모듈을 로드할 수 있으며 필요한 부분만 가져올 수 있어 유용하다.
출처
https://inpa.tistory.com/entry/NODE-📚-require-⚔️-import-CommonJs와-ES6-차이-1
https://rading.kr/programming/javascript/nodejs/3181/
https://stackdiary.com/require-vs-import-in-javascript/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://hacktam.kr/etclec/5?page=5
https://www.daleseo.com/js-module-require/
https://www.daleseo.com/js-module-import/
https://baeharam.netlify.app/posts/javascript/module
728x90
반응형
LIST
'기술 개발 > Javascript' 카테고리의 다른 글
순수 함수 (feat. 불변성, 사이드 이펙트) (0) | 2023.04.05 |
---|---|
const - 요소나 속성을 추가할 수 있는 이유 (0) | 2023.04.03 |
this 가 동작하는 원리와 용법 (0) | 2023.03.31 |
parameter와 argument의 차이 (0) | 2023.03.28 |
정규표현식(Regex) (0) | 2023.02.08 |