Aurelia는 JavaScript 프레임워크로서, 모듈성과 확장성을 강조하여 복잡한 프로젝트의 개발을 용이하게 합니다. 이번 글에서는 Aurelia 프로젝트의 주요 구성 요소와 그 구조 설계에 대해 알아보겠습니다.

1. 구성 요소

Aurelia 애플리케이션은 다음과 같은 주요 구성 요소로 구성됩니다.

1.1. 모델 (Model)

모델은 애플리케이션의 데이터를 정의하고, 관리하는 역할을 합니다. Aurelia에서 모델을 정의하기 위해 class나 interface를 사용할 수 있습니다.

// 예시 모델
export class User {
  firstName: string;
  lastName: string;
  email: string;
}

1.2. 뷰모델 (ViewModel)

뷰모델은 화면에 표시되는 데이터와 그 데이터를 다루는 로직을 포함하는 부분으로, 주로 JavaScript 또는 TypeScript로 작성됩니다.

// 예시 뷰모델
import { User } from './user';

export class UserViewModel {
  user: User;

  constructor() {
    this.user = new User();
    this.user.firstName = 'John';
    this.user.lastName = 'Doe';
    this.user.email = 'john.doe@example.com';
  }
}

1.3. 뷰 (View)

뷰는 사용자에게 표시되는 부분으로, HTML과 Aurelia의 템플릿 구문을 사용하여 작성됩니다.

<!-- 예시 뷰 -->
<template>
  <h2>Welcome, ${user.firstName}!</h2>
  <p>Email: ${user.email}</p>
</template>

2. 구조 설계

Aurelia 애플리케이션의 구조는 일반적으로 다음과 같은 계층 구조를 따릅니다.

- src
  - models
  - viewmodels
  - views
  - services
  - resources
- app.html
- app.js

• models: 모델 정의
• viewmodels: 뷰모델 정의
• views: 뷰 템플릿
• services: 데이터 통신 등의 서비스 관련 코드
• resources: 재사용 가능한 커스텀 구성 요소 및 값 변환기 등의 리소스 관련 코드
• app.html, app.js: 애플리케이션 진입점

Aurelia의 위 구성은 각 구성 요소를 분리하여 유지보수와 재사용을 용이하게 합니다.

이번 글에서는 Aurelia 프로젝트의 구성 요소와 구조 설계에 대해 간략히 살펴봤습니다. Aurelia를 사용하여 프로젝트를 설계하고 개발할 때, 위에서 언급된 구성 요소와 구조를 활용하여 보다 효율적으로 개발할 수 있습니다.

참고 문헌: Aurelia Documentation