import와 require의 차이점이 무엇인가요?
import와 require의 개념
import와 require는 JavaScript 모듈을 불러오는 데 사용되는 키워드입니다. 그러나 import는 ES6 모듈 시스템의 구문이며, require는 Node.js에서 사용되는 CommonJS 모듈 시스템의 구문입니다. 이 두 모듈 시스템은 다음과 같은 차이점을 가지고 있습니다:
-
구문 및 사용법의 차이:
import: ES6 모듈 시스템의 키워드입니다.import는from키워드와 함께 사용되며, 필요한 모듈을 가져옵니다.
import { module } from 'module';require: CommonJS 모듈 시스템에서 사용되는 함수입니다.require함수를 사용하여 필요한 모듈을 가져옵니다.
const module = require('module'); -
호출 시점의 차이:
import:import구문은 모듈을 미리 로드하고 정적으로 평가됩니다. 모듈은 스크립트의 최상위 수준에서만import할 수 있으며, 조건문이나 함수 내부에서는 동작하지 않습니다.require:require함수는 동적으로 모듈을 로드합니다. 조건문이나 함수 내부에서도 사용할 수 있으며, 필요한 시점에 모듈을 동적으로 로드할 수 있습니다.
-
모듈 시스템 지원 여부:
import:import구문은 최신 버전의 브라우저와 일부 환경에서 지원됩니다. ES6 모듈 시스템은 정적인 모듈 로딩 및 트리 셰이킹(불필요한 코드 제거)과 같은 최적화를 제공합니다.require:require함수는 CommonJS 모듈 시스템의 표준입니다. Node.js 환경에서는 기본적으로 지원되며, 브라우저에서는 별도의 번들러나 변환 도구를 사용하여 CommonJS 모듈을 지원해야 합니다.
요약하자면, import는 ES6 모듈 시스템의 키워드로, 정적으로 모듈을 가져오고 최신 브라우저와 일부 환경에서 지원됩니다. 반면에 require는 CommonJS 모듈 시스템의 함수로, 동적으로 모듈을 가져오고 Node.js 환경에서 기본적으로 지원됩니다.
CommonJS란 무엇인가요?
CommonJS는 JavaScript를 위한 모듈 시스템 중 하나로, 서버 측 JavaScript인 Node.js에서 사용되는 표준입니다. CommonJS는 모듈을 정의하고 로드하는 방법을 명시합니다.
CommonJS 모듈 시스템은 모듈을 개별 파일로 구성하고 require 함수를 사용하여 다른 모듈을 가져옵니다. 각 모듈은 자신의 파일 스코프를 가지며, 모듈 내에서 정의된 변수, 함수, 객체 등은 기본적으로 해당 모듈 내에서만 유효합니다. 다른 모듈에서 사용하려면 exports 객체를 사용하여 외부로 공개해야 합니다.
예를 들어, 다음과 같이 모듈을 작성하고 사용할 수 있습니다:
// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
exports.add = add;
exports.subtract = subtract;
// main.js
const math = require('./math.js');
console.log(math.add(2, 3)); // 출력: 5
console.log(math.subtract(5, 2)); // 출력: 3위 예제에서 math.js 파일은 add와 subtract 함수를 내보내는 모듈로 정의되어 있습니다. 다른 파일인 main.js에서 math.js 모듈을 require 함수를 사용하여 가져와서 해당 모듈의 함수를 사용할 수 있습니다.
CommonJS는 동기적으로 모듈을 로드합니다. 즉, require 함수가 호출되면 해당 모듈의 내용이 동기적으로 로드되고 실행됩니다. 이러한 동기적인 특성은 Node.js의 I/O 작업과 호환되는데, 서버 환경에서 유용합니다.
CommonJS는 Node.js에서 주로 사용되며, 브라우저 환경에서는 번들러(Bundler)를 사용하여 CommonJS 모듈을 변환하여 사용해야 합니다. 예를 들어, Webpack이나 Browserify와 같은 번들러를 사용할 수 있습니다.
