Notice
Recent Posts
Recent Comments
Link
250x250
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 협업
- CSS
- es module
- route handler
- 개발
- Git
- Pr
- Fe
- github
- 개발자
- javascript
- 회고록
- 티스토리챌린지
- svelte
- typescript
- 오블완
- next.js
- react
- js
- turporepo
- tailwind css
- 비제어
- 프레임 워크
- form
- Study
- frontend
- JWT
- zustand
- barrel export
- SWR
Archives
- Today
- Total
ougi FE
CommonJS와 ES Module 정확히 무슨 차이를 갖고 있을까? 본문
728x90
오늘은 기본 중에 기본인 CommonJS와 ES Module에 대해서 알아보고 둘의 차이에 대해서도 알아보겠습니다
Module이란?
Module이란 코드를 기능별로 분리해서 재사용 가능하게 만든 단위입니다
JS에서 모듈은 변수, 함수, 클래스 등을 내보내고 다른 파일에서 가져올 수 있도록 해줍니다
CommonJS란?
CommonJS 모듈은 원래 nodejs에서 자바스크립트 패키지를 불러올 때 사용하는 근본있는 방식입니다
현재 여러 방식을 지원하지만 태초에는 CommonJS 방식이 유일 했다고 합니다
require() 함수를 사용하여 모듈을 가져오고 module.exports를 사용하여 모듈을 내보냅니다
동기적으로 작동하고 모듈이 로드될 때까지 코드 실행이 중단됩니다
트리쎼이킹이 어렵다는 단점을 가지고 있습니다
예제
// module.js
module.exports = {
hello: function() {
console.log('Hello'); // result: Hello
}
const module = require('./module');
module.hello(); //result: console.log Hello
ES Module이란?
ES Module은 최신 JS의 표준으로 ES6에 도입된 모듈 시스템입니다
import와 export 키워드를 사용하여서 모듈을 가져오고 내보낼 수 있습니다
비동기적으로 동작하고 트리 셰이킹에 용이합니다
예제
// module.js
export function hello() {
console.log('Hello');
}
import { hello } from './module';
hello(); // result: Hello
둘의 차이점
구분 | CJS | ESM |
사용 방식 | required() / module.exports | import / export |
동작 시점 | 런타임 | 빌드타임 또는 파싱타임 |
비동기 지원 | 지원 X | 지원 O |
기본 사용처 | Node.js (구버전) | 브라우저, 최신 Node.js |
글을 마치며
오늘 이렇게 둘의 차이점을 알아보았는데 알 맞는 상황에 둘 중 하나를 잘 선택해서 사용할 수 있는 멋진 개발자로 성장하고 싶다는 생각을
했습니다 글을 읽어주셔서 감사합니다

728x90