Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- webpack
- Stack
- hook
- EC2
- Next.js
- FigJam
- 해시
- 자료구조
- 프로그래머스
- SSR
- docker
- Taillwind
- express
- 코딩테스트
- render
- react
- HTML
- FIGMA
- 피그마
- github
- CSS
- TAILWIND
- axios
- Babel
- grid
- git
- useMemo
- TypeScript
- Javascript
- useCallback
Archives
- Today
- Total
나는 오늘도 멋있다
ESmodule 과 CommonJs 비교 (mjs, cjs) 본문
1. 구문
ESmodule
import {useState} from "reacrt"
export = {}
CommonJs
const {useState} = require("react")
module.exports = {}
2.동작 방식
ESmodule
- 모듈을 비동기 환경에서 다운로드(import, export)
- 정적모듈 시스템으로 의존성을 파악하고 필요한 모듈을 미리 로딩함으로써 오류를 사전에 감지
- package.json에 type: module 을 사용하거나 .mjs 확장자를 사용
- this는 undefinde 이다.
- 순환의존성 지원: 인스턴스가 생성되어 독립적인 스코프를 가지게 된다.(변경된값이 적용됨)
- entry point를 기점으로 import문을 따라가며 찾는다.
- Top-level await 가능하다
// esmodule.mjs
import {num} from "./esmoduleNum.mjs"
const test = await num();
console.log(test)
// esmoduleNum.mjs
function num (){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve("ESmodule모듈")
},2000)
})
}
export {num};
CommonJs
- 모듈을 동기적으로 다운받음(require, module.export)
- 동적 모듈시스템으로 실행후에 의존성 오류를 확인할수 있다.
- 기본적으로 설정되어 있으며, .js 확장자의 파일이 CommonJs로 간주된다. .cjs 확장자를 사용하여 구분 할 수 있다.
- this는 현재 모듈을 가리킨다.
- 순환의존성 지원하지않음: 모듈이 한번 로드되면 캐시에 저장된다. (변경된 값이 적용되지않음)
- Top-level await 불가능하다.
//common.js
const {num} = require("./commonNum")
async function test(){
const log = await num();
return console.log(log)
}
test();
//commonNum.js
function num (){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve("CommonJS모듈")
},2000)
})
}
module.exports = {num}
3.순환 의존성 테스트
// a.js or b.mjs
let foo = "hello";
let bar = { baz: "world"};
setTimeout(()=>{
foo = "esm";
bar = {baz: "module"};
}, 1000)
module.exports = {foo, bar} // common
export {foo, bar} // ESM
// index.js or index.mjs
const {foo, bar} = require("./a.js"); // common
import {foo, bar} from "./b.mjs" // ESM
console.log(foo);
console.log(bar);
setTimeout(()=>{
console.log(foo);
console.log(bar);
},1000)
같은 코드이지만 모듈에따라 값이 틀려진다. 이유는 위 글을 읽어보면 이해할수있다.
'Web > JavaScript' 카테고리의 다른 글
ec2 인스턴스에 JSP 환경구축하기 (0) | 2024.02.14 |
---|---|
AWS ec2설정 및 인스턴스 접속 (2) | 2024.02.06 |