P5.js는 모듈 시스템을 사용하여 코드를 구성하고 재사용하는 기능을 제공합니다. 모듈 시스템은 코드를 작은 단위로 분할하여 관리할 수 있게 해주어 더 효율적인 개발을 가능하게 합니다.

모듈 시스템을 사용하기 위해서는 다음 단계를 따라야 합니다:

1. 모듈로 만들 코드를 작성합니다. 모듈은 P5.js 함수, 변수, 클래스, 또는 객체 등을 포함할 수 있습니다. 간단한 예를 들어보면 다음과 같습니다:

   // module.js 파일
   
   export function sayHello() {
     console.log("Hello!");
   }
   
   export class Shape {
     constructor(x, y) {
       this.x = x;
       this.y = y;
     }
   
     display() {
       console.log(`Shape at (${this.x}, ${this.y})`);
     }
   }
   

2. 다른 파일에서 모듈을 사용합니다. 이를 위해 import 문을 사용하여 필요한 함수, 변수, 클래스, 또는 객체를 가져올 수 있습니다. 다음은 모듈을 사용하는 예입니다:

   // main.js 파일
   
   import { sayHello, Shape } from "./module.js";
   
   sayHello(); // "Hello!"를 출력합니다.
   
   const shape = new Shape(10, 20);
   shape.display(); // "Shape at (10, 20)"을 출력합니다.
   

모듈 시스템을 사용하는 것은 P5.js 코드를 구조화하고 관리하기 쉽게 만들어줍니다. 중복 코드를 제거하고 코드를 모듈로 분리하여 재사용성을 높일 수 있습니다. 또한, 코드를 더욱 가독성 있게 만들어 개발과 유지 보수를 용이하게 할 수 있습니다.

참고 문서:

• ES6 Modules
• p5.js 코드 조직화하기