JavaScript 모듈 및 가져오기/내보내기 시스템 이해

JavaScript의 모듈 및 가져오기/내보내기

JavaScript에서 모듈을 사용하면 코드를 더 작고 재사용 가능한 조각으로 나누어 구성, 유지 관리 및 가독성을 향상시킬 수 있습니다. 모듈은 특히 코드베이스가 커질 때 확장 가능한 애플리케이션을 만드는 데 필수적입니다. ES6(ECMAScript 2015)의 도입으로 JavaScript는 서로 다른 파일 간에 코드를 가져오고 내보낼 수 있는 기본 모듈 시스템을 얻었습니다.

JavaScript의 모듈 이해

모듈은 본질적으로 자체 파일에 저장되는 코드 조각입니다. 이 코드는 애플리케이션의 다른 부분에서 사용할 수 있도록 만들고 싶은 변수, 함수, 클래스 또는 기타 구성을 정의할 수 있습니다.

모듈에서 내보내기

한 파일의 변수, 함수 또는 클래스를 다른 파일에서 사용할 수 있도록 하려면 내보내기 키워드를 사용합니다. JavaScript의 모듈에서 내보내는 방법에는 named 내보내기와 기본 내보내기

두 가지가 있습니다.

1. 지정 수출

이름이 지정된 내보내기를 사용하면 모듈에서 여러 항목(변수, 함수 등)을 내보낼 수 있습니다. 이름을 지정하여 내보냅니다.

// math.js (Module File)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

2. 기본 내보내기

기본 내보내기를 사용하면 함수, 클래스 또는 개체일 수 있는 단일 값을 내보낼 수 있습니다. 기본 내보내기는 일반적으로 모듈의 주요 기능 하나를 내보내려는 경우에 사용됩니다.

// math.js (Module File)
export default function multiply(a, b) {
  return a * b;
}

모듈 가져오기

다른 파일의 모듈에서 내보낸 값에 액세스하려면 import 키워드를 사용합니다. 가져오기에는 named imports와 default imports의 두 가지 유형이 있습니다.

1. 명명된 수입품

이름이 지정된 내보내기를 가져올 때 내보내기 명세서에 사용된 정확한 이름을 사용해야 합니다.

// app.js (Main File)
import { add, subtract } from './math.js';

console.log(add(2, 3));  // Output: 5
console.log(subtract(5, 3));  // Output: 2

2. 기본 가져오기

기본 내보내기를 가져올 때 가져온 값의 이름을 선택할 수 있습니다.

// app.js (Main File)
import multiply from './math.js';

console.log(multiply(2, 3));  // Output: 6

3. 명명된 가져오기와 기본 가져오기 결합

이름이 지정된 가져오기를 동일한 모듈의 기본 가져오기와 결합할 수도 있습니다.

// math.js
export const add = (a, b) => a + b;
export default function multiply(a, b) {
  return a * b;
}

// app.js
import multiply, { add } from './math.js';

console.log(multiply(2, 3));  // Output: 6
console.log(add(2, 3));  // Output: 5

클래스 내보내기 및 가져오기

함수 및 변수와 동일한 방식으로 클래스를 내보내고 가져올 수 있습니다.

예: 클래스 내보내기 및 가져오기

// math.js (Module File)
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

동적 가져오기

JavaScript는 런타임에 조건부로 모듈을 로드할 수 있는 동적 가져오기도 지원합니다. 이는 필요할 때만 모듈을 로드하여 초기 로드 시간을 줄이는 코드 분할에 유용할 수 있습니다.

// math.js (Module File)
export default function multiply(a, b) {
  return a * b;
}

브라우저의 모듈

최신 브라우저에서는 ES6 모듈을 기본적으로 사용할 수 있습니다. <script>에 type="module" 속성을 추가하기만 하면 됩니다. HTML에 태그를 추가하세요.<br> </script>

// app.js (Main File)
import { add, subtract } from './math.js';

console.log(add(2, 3));  // Output: 5
console.log(subtract(5, 3));  // Output: 2

결론

가져오기/내보내기 시스템은 코드를 모듈화하고 문제를 분리할 수 있는 JavaScript의 강력한 도구입니다. 코드를 더 작고 재사용 가능한 조각으로 나누어 애플리케이션의 유지 관리성과 확장성을 향상시킬 수 있습니다. 모듈을 효과적으로 내보내고 가져오는 방법을 이해하는 것은 JavaScript를 마스터하는 데 중요한 부분입니다.

---

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어 및 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일인 kaashshorts28@gmail.com으로 언제든지 연락주세요.

위 내용은 JavaScript 모듈 및 가져오기/내보내기 시스템 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!