Aura 프레임워크 개요

Aura는 개방형 웹 애플리케이션 프레임워크로, 개발자가 확장 가능하고 고성능인 웹 애플리케이션을 구축할 수 있게 해줍니다.

이는 모델-뷰-컨트롤러(MVC) 아키텍처 패턴을 기반으로 하며, 개발 프로세스를 단순화하기 위해 강력한 도구와 라이브러리 세트를 제공합니다.

역사

Aura는 처음에 Salesforce.com 팀에 의해 자체 웹 애플리케이션을 구축하기 위해 개발되었습니다. 그 후 2013년에 오픈 소스로 공개되어 일반에 공개되었습니다. 이후 유연성, 확장성 및 사용 편의성으로 인해 개발자들 사이에서 인기를 얻게 되었습니다.

기능

1. MVC 아키텍처

Aura는 MVC 아키텍처 패턴을 따르며, 애플리케이션 로직을 표현 계층으로부터 분리하는 데 도움을 줍니다. 이 분리는 코드의 재사용성, 유지 보수성 및 테스트 용이성을 향상시킵니다.

2. 컴포넌트 기반 개발

Aura는 재사용 가능한 컴포넌트를 사용하여 웹 애플리케이션을 구축할 수 있게 해줍니다. 이러한 컴포넌트는 UI와 비즈니스 로직을 모두 캡슐화하여 모듈화하고 유지 보수하기 쉽게 만듭니다. 컴포넌트를 조합하여 복잡한 애플리케이션 구조를 만들 수 있습니다.

다음은 간단한 Aura 컴포넌트의 예입니다:

<aura:component>
    <aura:attribute name="message" type="String" default="Hello Aura!" />
    <h1>{!v.message}</h1>
</aura:component>

이 예에서 컴포넌트는 속성으로 전달된 메시지를 표시합니다. {!v.message} 구문은 속성 값을 UI에 바인딩하여 동적으로 만듭니다.

3. Lightning 웹 컴포넌트

Aura는 Lightning 웹 컴포넌트(LWC)와 원활하게 통합됩니다. Lightning 웹 컴포넌트는 Salesforce의 현대적인 UI 프레임워크로, HTML, CSS 및 JavaScript와 같은 웹 표준을 기반으로 한 개발 모델과 재사용 가능한 UI 컴포넌트 세트를 제공합니다.

Aura 컴포넌트는 LWC 컴포넌트를 활용할 수 있으므로, 최신 UI 기술을 활용하면서도 Aura 프레임워크를 사용할 수 있습니다.

4. 서버사이드 액션

Aura는 서버사이드 액션을 사용하여 서버와 쉽게 통신할 수 있는 방법을 제공합니다. 이러한 액션을 사용하면 데이터베이스 쿼리, 외부 API 호출 또는 비즈니스 로직 처리와 같은 서버사이드 작업을 개발자가 수행할 수 있습니다.

다음은 Aura에서 서버사이드 액션의 예입니다:

({
    doServerAction: function(component, event, helper) {
        var action = component.get("c.serverMethod");
        action.setParams({ param1: "value1" });

        action.setCallback(this, function(response) {
            if (response.getState() === "SUCCESS") {
                var result = response.getReturnValue();
                // 결과 처리
            }
        });

        $A.enqueueAction(action);
    }
})

이 예에서 doServerAction 함수는 serverMethod라는 서버사이드 메서드를 호출하고 응답을 처리합니다.

5. 이벤트 기반 아키텍처

Aura는 이벤트 기반 아키텍처를 따르므로 컴포넌트들은 이벤트를 발생시키고 처리함으로써 서로 통신할 수 있습니다. 이러한 분리된 통신 모델은 느슨한 결합을 장려하며, 개발자가 유연하고 확장 가능한 애플리케이션을 구축할 수 있게 합니다.

다음은 Aura에서 이벤트 핸들러의 예입니다:

<aura:handler name="myEvent" event="c:MyEvent" action="{!c.handleEvent}" />

이 예에서 handleEvent 함수는 MyEvent 이벤트가 발생할 때마다 호출됩니다.

예제

예제 1: 간단한 컴포넌트

간단한 Aura 컴포넌트를 생성하여 버튼과 카운터를 표시해 봅시다.

<aura:component>
    <aura:attribute name="count" type="Integer" default="0" />

    <h1>Counter: {!v.count}</h1>
    <button onclick="{!c.incrementCount}">Increment</button>
</aura:component>

컨트롤러에서:

({
    incrementCount: function(component, event, helper) {
        var count = component.get("v.count");
        component.set("v.count", count + 1);
    }
})

이 컴포넌트는 "Increment" 버튼을 클릭할 때마다 카운터가 증가하는 카운터를 표시합니다.

예제 2: 서버사이드 데이터 검색

서버에서 연락처 목록을 검색하여 테이블에 표시하는 Aura 컴포넌트를 생성해 봅시다.

<aura:component>
    <aura:attribute name="contacts" type="List" />

    <table>
        <thead>
            <tr>
                <th>Name</th>
                <<th>Email</th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.contacts}" var="contact">
                <tr>
                    <td>{!contact.Name}</td>
                    <td>{!contact.Email}</td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>

    <button onclick="{!c.loadContacts}">Load Contacts</button>
</aura:component>

컨트롤러에서:

({
    loadContacts: function(component, event, helper) {
        var action = component.get("c.getContacts");

        action.setCallback(this, function(response) {
            if (response.getState() === "SUCCESS") {
                component.set("v.contacts", response.getReturnValue());
            }
        });

        $A.enqueueAction(action);
    }
})

이 컴포넌트는 "Load Contacts" 버튼을 클릭할 때 서버에서 연락처 목록을 가져와 테이블에 표시합니다.

결론

Aura는 개발자들에게 확장 가능하고 효율적인 웹 애플리케이션을 구축하기 위한 다양한 기능을 제공하는 강력한 웹 애플리케이션 프레임워크입니다. 컴포넌트 기반 개발 방식, 서버사이드 액션 및 이벤트 기반 아키텍처를 통해 Aura는 개발 프로세스를 단순화하고 코드의 재사용성과 유지 보수성을 증진시킵니다.

자세한 정보, 공식 문서 및 추가 예제는 Aura Framework 공식 웹사이트를 참조하십시오.