JavaScript 모듈 및 클래스

9일차: JavaScript 모듈 및 클래스

날짜: 2024년 12월 16일

9일차에 오신 것을 환영합니다! 오늘은 코드 구성, 재사용성, 가독성을 크게 향상시키는 두 가지 개념인 JavaScript의 모듈과 클래스를 살펴보겠습니다. 이러한 주제를 이해하면 JavaScript 기술이 향상되어 전문 개발자처럼 프로젝트를 구성할 수 있습니다.

---

1. 자바스크립트 모듈

모듈을 사용하면 코드를 재사용 가능한 더 작은 조각으로 나눌 수 있습니다. 하나의 큰 파일을 사용하는 대신 기능을 여러 파일로 구성하여 코드베이스를 더 쉽게 관리하고 유지할 수 있습니다.

모듈을 사용하는 이유

1. 관심사 분리: 각 모듈은 특정 책임을 처리합니다.
2. 재사용성: 한 모듈의 코드를 다른 모듈에서 재사용할 수 있습니다.
3. 유지관리성: 디버그 및 업데이트가 더 쉽습니다.

---

모듈로 내보내기 및 가져오기

모듈에서 내보내기

내보내기를 사용하여 모듈에서 변수, 함수 또는 클래스를 내보낼 수 있습니다.

지정 수출

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

기본 내보내기

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

모듈 가져오기

다른 모듈의 기능을 가져오려면 import 키워드를 사용하세요.

예: 명명된 내보내기 가져오기

// main.js
import { add, subtract } from './utils.js';

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

예: 기본 내보내기 가져오기

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

---

동적 가져오기

동적 가져오기는 import()를 사용하여 런타임에 모듈을 로드합니다.

예: 지연 로딩

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

---

2. 자바스크립트 클래스

JavaScript의 클래스는 객체를 생성하고 관련 데이터와 메소드를 캡슐화하기 위한 청사진을 제공합니다. 이는 ES6의 일부이며 JavaScript의 객체 지향 프로그래밍의 기본입니다.

클래스 정의

클래스는 class 키워드를 사용하여 정의됩니다.

예: 기초반

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

const person1 = new Person("John", 30);
console.log(person1.greet()); // Output: Hello, my name is John and I am 30 years old.

---

클래스 상속

상속을 통해 클래스는 확장 키워드를 사용하여 다른 클래스에서 속성과 메서드를 파생할 수 있습니다.

예: 상속

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.

---

정적 메소드

정적 메서드는 인스턴스가 아닌 클래스 자체에 속합니다.

예: 정적 방법

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

---

비공개 필드 및 방법

비공개 필드와 메서드는 클래스 내에서만 액세스할 수 있으며 # 접두사로 표시됩니다.

예: 비공개 분야

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

---

클래스와 객체 리터럴

객체 리터럴은 간단한 데이터 구조에 대해 빠르고 간단하지만 클래스는 다음을 제공합니다.

• 여러 개의 유사한 개체를 만들기 위한 명확한 청사진입니다.
• 상속 및 캡슐화 지원.

---

3. 모듈과 클래스 결합

모듈과 클래스는 최신 JavaScript 애플리케이션에서 서로를 아름답게 보완합니다. 한 모듈에서 클래스를 정의하고 이를 다른 모듈에서 사용할 수 있습니다.

예: 모듈과 클래스 결합

// main.js
import { add, subtract } from './utils.js';

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

---

4. 실제 예: 장바구니

다음은 모듈과 클래스를 결합한 실용적인 예입니다.

파일: cart.js

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

파일: main.js

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

---

주요 시사점

1. 모듈: 코드를 정리하고 재사용성을 높이는 데 도움이 됩니다.
2. 클래스: 상속 및 캡슐화와 같은 기능을 제공하여 객체 작업을 위한 구조화된 방법을 제공합니다.
3. 결합 사용: 모듈과 클래스를 함께 사용하여 확장 가능하고 유지 관리 가능한 애플리케이션을 구축하세요.

---

연습 과제

1. 기본 산술 연산을 위한 함수를 내보내는 모듈을 만듭니다.
2. 책을 추가하고 나열하는 메소드를 사용하여 도서관 시스템용 클래스를 작성합니다.
3. 모듈과 클래스를 결합하여 기본 전자상거래 장바구니를 시뮬레이션합니다.

---

다음은 무엇입니까?

내일 10일차에는 이벤트 루프 및 비동기 프로그래밍에 대해 자세히 알아보고 JavaScript가 동시성, 콜백, 약속 및 이벤트 루프를 처리하는 방법을 배우게 됩니다. . 계속 지켜봐주세요!

위 내용은 JavaScript 모듈 및 클래스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!