‍

안녕하세요 에스비티글로벌

세일즈포스사업본부입니다 !

여러분은 '톺아보다'라는 말을 알고 계신가요 ?!​

​

[톺아보다]는

'샅샅이 톺아 나가면서 살피다'의 순우리말입니다.

각종 외래어 없이는 대화가 어려운 요즘,

우리말을 지키고자 하는 취지에서 사용하게 되었답니다 😊​

​

[톺아보다] 단어의 뜻처럼

저희 에스비티글로벌의 세일즈포스사업본부가 가진

세일즈포스의 각종 지식들을 CRM 및 세일즈포스 솔루션에 관심있는 분들께 차근차근 공유해 나가고자 합니다 : )

​

​

​

그럼 저희와 함께 톺아볼까요 ?!​

​

​

​

이번에 톺아볼 주제는 최신 기술인 LWC 이전에는 세일즈포스에서 컴포넌트 개발에 주력으로 사용되었으며,

LWC가 출시된 이후에도 여전히 많은 부분에서 사용하고 있는 Aura 컴포넌트입니다.

Aura 컴포넌트의 실제 코드를 작성해 보고 어떻게 사용하는지 같이 알아보도록 하겠습니다.

​

​

​

​

Aura Component (Lightning Component)

​

Aura 컴포넌트는 자바스크립트 파일에서 컴포넌트의 이벤트가 발생했을 때 작동하는 로직을 구현할 수 있고,

자체 태그를 사용해 컴포넌트를 구성하고 렌더링 하는데 사용됩니다.

​

Aura Component는 클라이언트 측 데이터 처리에 주로 사용하는 자바스크립트 컨트롤러와 서버 측 데이터처리에 사용하는 Apex 컨트롤러 총 2개의 컨트롤러를 가지고 사용할 수 있습니다.

​

Aura 컴포넌트를 생성하게 되면 디렉터리에 많은 파일들이 생기게 되는데 주로 사용하게 되는 것이 cmp 파일과 js 파일입니다.

​

그럼 같이 알아볼까요?

​

처음 cmp 파일에 들어가게 되면 비어있는 파일을 볼 수 있습니다. 여기에서 우리는 Aura Component Bundle을 사용하여 추가적인 설정을 할 수 있습니다. 번들은 RecordPage나 Lightning App Builder 등 다양한 컨텍스트에서 컴포넌트를 사용할 수 있도록 도와줍니다.

​

<aura:component description="test" implements="flexipage:availableForAllPageTypes,force:hasRecordId"></aura:component>

​

제가 설정한 implements는 Lightning Page 또는 Lightning App Builder에서 사용한다는 것과, 컴포넌트가 사용된 레코드의 Id를 가져올 수 있게 하는 번들입니다.

​

번들은 종류가 다양하여 자세하게 어떠한 번들이 있는지는 세일즈포스 Aura Component Developer Guide를 통해 확인하실 수 있습니다.

​

그리고 Aura 컴포넌트는 HTML5 태그를 포함하여 대부분의 HTML 태그를 지원합니다만,

​

<aura:component description="test" implements="flexipage:availableForAllPageTypes,force:hasRecordId">    <div>        Hello, world!!        <div>            <input type="text" value="Hello, world!!" />            <lightning:input value="Hello, world!!" />        </div>    </div></aura:component>

input 태그처럼 HTML 태그가 아닌 Lightning:input 태그 또한 사용할 수 있습니다.

​

또한 여러 가지 변수들을 정의해 놓은 다음 값을 세팅하거나 불러올 수 있습니다.

​

<aura:attribute>를 통해 변수를 정의하고 기본값을 설정할 수 있으며, attribute에는 두 개의 필수 매개변수인 name과 type이 있습니다.

값을 들고 올 때는 {!v.속성이름}으로 시작하고 함수를 들고 올 때는 {!c.함수이름}으로 시작한다는 점 유의해 주세요.

• Value Provider라고 하는 값 공급자는 데이터에 엑세스 하는 방법입니다. v는 view의 약자 c는 controller의 약자입니다.

​

​

예시로 한번 사용해보자면..

​

<aura:component description="test" implements="flexipage:availableForAllPageTypes,force:hasRecordId">    <aura:attribute type="String" name="hello" default="Hello, world!!"/>    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>    <div>        Hello, world!!        <div>            <input type="text" value="Hello, world!!" />            <lightning:input value="Hello, world!!" />        </div>        <div>            <input type="text" value="{!v.hello}" />            <lightning:input value="{!v.hello}" />        </div>    </div></aura:component>

​

이런 식으로 사용할 수 있습니다.

​

<aura:attribute>에 타입은 String이고 변수명은 hello로 주었습니다. 기본값으로 세팅되어 있는 변수의 값을 불러오기 위해 input 태그들의 value 속성에 {!v.hello}를 넣게 되면 Hello, world!! 가 총 5개가 출력이 될 것입니다.

​

한번 확인하러 가볼까요?

​

Org에 폴더를 배포한 뒤 원하는 오브젝트의 Edit Page로 이동하여 왼쪽의 Component 탭의 Custom 부분을 보면 우리가 배포한 test라는 Aura 컴포넌트가 있는 것을 확인할 수 있고, 이것을 add Component로 드래그한 뒤 저장하고 돌아가서 확인하겠습니다.

​

확인하셨나요??

​

​

그냥 텍스트로 이루어진 Hello, world!! 와 <input>태그에 적은 Hello, world!! 그리고 <Lightning:input> 태그에 적은 Hello, world!!까지 보입니다. 그냥 input 태그와 Lightning input 태그는 모양부터가 다르네요!

​

이번엔 js 파일을 사용해볼까요??

​

자바스크립트 컨트롤러를 사용하면서 컴포넌트가 시작될 때마다 함수가 작동되게 할 수 있습니다. 이 방법을 사용하면 초기화면 세팅에 필요한 값들을 불러와서 처리하는 데에 사용이 가능하겠죠?

​

<aura:handler name="init" value="{!this}" action="{!c.doinit}"/>

<aura:attribute>아래에 aura:handler를 추가합시다. 핸들러의 이름은 init, 값은 컴포넌트가 불러질 때 마다니까 this로, action은 함수명입니다.

({    doinit : function(component, event, helper) {        component.set('v.hello', 'Hello, Salesforce!!');        alert('Hello, world!!');            }})

js 파일에 doinit이라는 함수를 만들어주고, v.hello의 값을 세팅하기 위해서 component.set를 사용하여 값을 세팅해 줍니다.

​

그리고 alert를 사용하여 알림 창을 띄우도록 하겠습니다!

​

저장 후 배포를 하고 Org를 새로고침 하게 되면

​

​

이렇게 알림창도 뜨고

​

v.hello 의 값도 바뀌었습니다!

‍

이런 방식으로 핸들러를 실행시키고, 값을 세팅하여 사용할 수 있고 반대로 component.get을 사용하게 되면 현재 설정되어 있는 v.hello의 값을 들고 올 수도 있습니다.

지금 상태로는 console.log(component.get('v.hello'))로 코드를 doinit 함수에 추가한 뒤 브라우저 콘솔에 띄워보면 Hello, Salesforce!!라는 문장을 들고 오겠네요.

Aura 컴포넌트는 다양한 방법을 사용해서 개발할 수 있고, 구현하고자 하는 방향에 따라 사용되는 기능도 다르기에 처음에는 조금 복잡하실 수 있습니다.

하지만 천천히 기능 하나하나 작동할 로직을 구성 해나가다 보면 금방 완성되어 있는 컴포넌트를 볼 수 있을 거예요.

​

이번에는 클래스(서버 측 컨트롤러)와 컴포넌트의 연결은 다루지 않았는데 다음 포스팅인 Aura Component-2 에서 설명드리도록 하겠습니다

‍

​

세일즈포스에 대해 궁금점이 있으신 분들께서는

댓글 남겨주시면 답변 달아드리도록 하겠습니다!

​

CRM과 세일즈포스에 대해 관심 있으신 분들께 조금이나마 도움이 되었으면 좋겠습니다 :-)

​

그럼 다음 포스팅에서 만나요!

​

‍