Aurelia는 모듈화된 구조를 활용하여 애플리케이션을 구축하는 것에 초점을 맞추고 있습니다. 이 글에서는 Aurelia의 기본적인 코드 구조와 모듈화 방법에 대해 알아보겠습니다.

코드 구조

Aurelia 애플리케이션은 기본적으로 다음과 같은 구조를 갖습니다.

project
├── src
│   ├── app.html
│   ├── app.js
│   └── ... (other application files)
├── index.html
└── ...

위 구조에서 src 폴더에는 애플리케이션의 주요 파일들이 위치하고 있습니다. app.html 파일은 애플리케이션의 루트 뷰 템플릿이며, app.js 파일은 애플리케이션의 루트 뷰 모델을 정의합니다.

모듈화 방법

Aurelia는 컴포넌트 중심의 접근 방식을 채택하여 모듈화를 달성합니다. 모듈화를 위해서는 다음과 같은 원리를 따르면 됩니다.

컴포넌트 정의

Aurelia 애플리케이션의 각 부분은 컴포넌트로 정의됩니다. 컴포넌트는 뷰 템플릿과 뷰 모델로 구성되며, 이 둘은 서로 연결되어 동작합니다.

예를 들어, my-component.html과 my-component.js 파일로 각각 뷰 템플릿과 뷰 모델을 정의할 수 있습니다.

// my-component.js
export class MyComponent {
  // ... component logic
}

컴포넌트 등록

정의한 컴포넌트를 애플리케이션에 등록해야 합니다. 이를 위해 app.js 파일에서 다음과 같이 컴포넌트를 등록할 수 있습니다.

// app.js
export class App {
  configureRouter(config, router) {
    config.map([
      { route: ['', 'home'], name: 'home', moduleId: 'home', nav: true, title: 'Home' },
      { route: 'about', name: 'about', moduleId: 'about', nav: true, title: 'About' },
      // ... other routes
    ]);
  }
}

위 예시에서 moduleId는 등록할 컴포넌트의 모듈 ID를 가리킵니다.

Aurelia의 코드 구조와 모듈화 방법을 통해 더 모듈화된 구조로 애플리케이션을 구축할 수 있습니다.

더 많은 자세한 정보는 Aurelia 공식 문서를 참고하십시오.