코딩을 시작했을 때 모듈을 가져오기 위해 require()를 사용하는 일부 js 파일과 가져오기를 사용하여 다른 파일을 보았던 것을 기억합니다. 차이점이 무엇인지, 왜 프로젝트 간에 불일치가 있는지 이해하지 못했기 때문에 항상 혼란스러웠습니다. 같은 내용이 궁금하시다면 계속 읽어주세요!

CommonJS란 무엇인가요?

CommonJS는 서버 측 JavaScript, 주로 Node.js 환경에서 모듈을 구현하는 데 사용되는 표준 세트입니다. 이 시스템에서는 모듈이 동기식으로 로드됩니다. 즉, 모듈이 로드될 때까지 스크립트 실행이 차단됩니다. 이는 간단한 접근 방식을 제공하지만, 다른 모듈을 실행하기 전에 차례로 로드해야 하기 때문에 여러 다른 모듈을 로드하려고 하면 성능이 저하된다는 단점이 있습니다.

CommonJS를 사용하는 경우 module.exports를 사용하여 기능을 내보내고 require()를 사용하여 가져옵니다.

다음은 코드에서 어떻게 보이는지에 대한 예입니다.

// In file multiple.js

module.exports = function multiply(x, y) {
    return x * y;
};

// In file main.js

const multiply = require(‘./multiply.js’);

console.log(multiply(5, 4)); // Output: 20

ECMAScript(ES6)란 무엇입니까?

ECMAScript라고도 알려진 ES6은 2015년에 출시된 JavaScript의 최신 버전입니다. 이번 릴리스에서는 import 및 내보내기 문을 사용하여 비동기적으로 모듈을 가져오는 기능이 제공되었습니다. 이는 모듈이 로드되는 동안 실행 중인 스크립트가 계속 실행될 수 있으므로 병목 현상이 발생하지 않음을 의미합니다. 이는 또한 이후 게시물에서 다루게 될 트리 쉐이킹이라는 효율성을 허용하지만 기본적으로 이는 사용 중인 모듈에서만 JavaScript를 로드하고 데드 코드(사용되지 않는 코드)는 로드되지 않음을 의미합니다. 브라우저에. ES6는 정적 및 동적 가져오기를 모두 지원하기 때문에 이 모든 것이 가능합니다.

이전과 동일한 예가 있지만 이번에는 가져오기 및 내보내기를 사용합니다.

// In file multiply.js

export const multiply = (x, y) => x * y;

// In file main.js

import { multiply } from ‘./multiply.js’;

console.log(multiply(5, 4)); // Output: 20

주요 차이점: require Vs import

require()는 CommonJS 모듈 시스템의 일부이고 가져오기는 ES6 모듈 시스템의 일부입니다. 아직 ES6를 채택하지 않은 레거시 프로젝트에서 주로 서버측 개발을 위해 Node.js 환경에 사용되는 require()를 볼 수 있습니다. 서버측 및 프런트엔드 개발, 특히 최신 프로젝트와 React 또는 Vue와 같은 프런트엔드 프레임워크에서 가져오기가 사용되는 것을 볼 수 있습니다.

수입이 요구보다 나은 이유는 무엇입니까?

앞서 언급했듯이 가져오기는 비동기식이므로 특히 대규모 애플리케이션에서 성능이 향상될 수 있습니다. 또한 가져오기를 정적으로 분석할 수 있으므로 린터 및 번들러와 같은 도구는 코드를 보다 효과적으로 최적화하고 트리 쉐이킹을 구현하여 번들 크기를 줄이고 로드 시간을 단축할 수 있습니다. 또한 require()보다 구문이 읽기 쉬워 더 나은 개발자 경험을 제공하며 우리 모두는 그것을 원합니다!

언제 require Vs import를 사용하시겠습니까?

다음과 같은 경우에 require()를 사용합니다:

• ES6가 출시되기 전에 시작되어 업데이트되지 않은 레거시 Node.js 프로젝트를 작업하고 계십니다.

• 구성 파일과 같이 런타임에 모듈을 동적으로 로드해야 하거나 조건부로 모듈을 로드해야 하는 경우.

다음과 같은 경우에 가져오기를 사용합니다.

• 이것이 현재 표준이므로 언제든지 더 효율적입니다.

요약

일반적으로 import는 더 많은 이점을 제공하고 더 새롭고 널리 채택되는 모듈 시스템이므로 가능할 때마다 사용하는 것이 좋습니다. 그러나 특정 요구 사항과 작업 환경에 따라 require()가 여전히 더 나은 선택인 경우가 있을 수 있습니다.

이 기사가 도움이 되었다면, 이와 같은 더 많은 콘텐츠를 매주 받은편지함으로 직접 보내드릴 뉴스레터를 구독하세요!