사용자 정의 Lightning 구성 요소로 작업하기

학습 목표

이 유닛을 완료하면 다음을 수행할 수 있습니다.

• 사용자 정의 Lightning 구성 요소를 설치합니다.
  
• 모바일 기기를 사용하여 Salesforce 모바일 앱에서 앱을 미리보기합니다.
  

참고

한국어로 학습하시겠어요? Trailhead playground에서 한국어로 실습 과제를 시작하고, 괄호 안에 제공된 번역을 사용해 탐색해 보세요. 영어 데이터를 기반으로 실습 과제 검증이 이루어지므로 영문으로 표시된 값만 복사해 붙여 넣습니다. 한국어 조직에서 실습 과제를 통과하지 못한 경우, (1) 로캘을 미국을 바꾸고 (2) 여기에 제시된 지침에 따라 언어를 영어로 바꾼 후 (3) "Check Challenge(과제 확인)" 버튼을 눌러 다시 진행해 보세요.

원하는 언어로 Trailhead 사용하기 뱃지를 확인해 현지화된 Trailhead 경험을 활용하는 방법에 대해 자세히 알아보세요.

Lightning 앱 빌더의 사용자 정의 Lightning 구성 요소

사용자 정의 Lightning 구성 요소를 생성하려면 프로그래밍 기술이 필요합니다. 또는 AgentExchange에서 기존 Lightning 구성 요소를 설치할 수 있습니다.

클릭만 할 줄 알아도 이 유닛을 수행할 수 있습니다! 이미 구성된 사용자 정의 구성 요소를 제공합니다. 그러니 걱정하지 마세요. 프로그래밍 기술이 없어도 이 뱃지를 얻을 수 있습니다.

Lightning 웹 구성 요소를 사용하여 사용자 정의 Lightning 구성 요소를 만들 수 있습니다. Lightning 웹 구성 요소 기초 모듈을 참조하세요.

Lightning 앱 빌더에서 사용하도록 구성된 조직의 사용자 정의 구성 요소는 Lightning 구성 요소 창에 표시됩니다.

사용자 정의 Lightning 구성 요소는 Lightning 페이지 또는 Lightning 앱 빌더에서 자동으로 작동하지 않습니다. 사용자 정의 구성 요소를 양쪽에서 사용 가능하게 하려면 구성 요소와 구성 요소 번들이 Lightning 앱 빌더 및 Lightning 페이지와 호환되도록 구성해야 합니다. 자세한 내용은 Lightning Web 구성 요소 개발자 가이드를 참조하세요.

이 모듈에서 제공하는 사용자 정의 구성 요소는 이미 Lightning 앱 빌더를 위해 구성됐습니다.

사용자 정의 Lightning 구성 요소 설치

Lightning 페이지에 추가할 수 있는 사용자 정의 기회 알림 Lightning 구성 요소를 제공했습니다. 이제 조직에 설치해 봅시다.

실습 과제가 있는 유닛으로 이동하고 페이지 하단으로 이동한 다음 Launch(실행)을 클릭하여 Trailhead Playground를 실행합니다. 조직에 패키지 설치라는 탭이 보이면 정상입니다. 다음 과정을 수행합니다.

탭이 보이지 않으면 App Launcher(앱 시작 관리자) 아이콘을 클릭하여 앱 시작 관리자를 실행한 다음 Playground Starter를 클릭하고 단계를 따르세요. Playground Starter App이 표시되지 않으면 이 패키지 설치 링크를 복사하고 Salesforce 도움말에서 패키지 또는 앱을 설치하여 Trailhead 과제 수행하기를 확인하세요.

1. Install a Package(패키지 설치) 탭을 클릭합니다.
   
2. 04tHu000003FTJG를 필드에 붙여 넣습니다.
   
3. Install(설치)을 클릭합니다.
   
4. Install for Admins Only(관리자 전용으로 설치)를 선택한 다음 Install(설치)을 클릭합니다.
   

설치가 완료되면 구성 요소를 페이지에 추가할 수 있습니다.

사용자 정의 Lightning 구성 요소를 앱 페이지에 추가하기

1. Setup(설정)의 Quick Find(빠른 찾기) 상자에 App Builder(앱 빌더)를 입력한 다음 Lightning App Builder(Lightning 앱 빌더)를 클릭합니다.
   
2. 이전 유닛에서 만든 주요 계정 및 기회 페이지 옆의 Edit(편집)을 클릭합니다.
   
3. Opportunity Alert(기회 알림) 구성 요소를 List View(목록 보기) 구성 요소 위에 추가합니다.
   
4. 속성 창에서 Days Since Last Modified(마지막 수정 이후 일수)를 6으로 변경합니다.
   구성 요소 내부의 텍스트가 새 필드 값에 맞게 변경된 것을 확인했나요?
   
5. Has Open Tasks(진행 중인 작업 있음)을 선택 해제하고 Save(저장)을 클릭합니다.
   

앞서 페이지를 활성화했기 때문에 다시 활성화할 필요가 없습니다.

좋습니다. 변경 사항을 Lightning Experience 및 모바일 앱에서 즉시 이용 가능합니다. 다음으로 페이지가 이제 어떤 모습인지 살펴봅시다.

사용자 정의 구성 요소 테스트하기

Salesforce 모바일 앱에서 먼저 살펴보겠습니다.

1. 모바일 기기에서 앱을 엽니다.
   
2. 필요한 경우 Trailhead Playground 자격 증명을 사용하여 로그인합니다.
   
3. Sales 앱에서 주요 계정 및 기회 페이지로 이동한 다음 새 구성 요소가 보일 때까지 스크롤을 내립니다. 변경 사항을 보려면 화면을 새로 고침해야 할 수도 있습니다.
   

데스크톱의 조직으로 돌아가서 Top Accounts and Opportunities(주요 계정 및 기회) 페이지를 Lightning Experience에서 봅니다. 2개 열 템플릿을 사용하여 페이지를 만들었기 때문에 데스크톱 또는 태블릿에서 볼 때 2개 열 형식을 사용합니다.

축하합니다! Lightning 앱 빌더를 사용하여 앱 페이지를 만들고, Lightning Experience 홈 페이지를 개인화하고, Lightning Experience 레코드 페이지를 사용자 정의했습니다. 이제 사용자를 위해 Salesforce 모바일 앱 및 Lightning Experience를 보다 편리하고 강력하게 만들 기술을 갖췄습니다. 지금 바로 사용자 정의를 설정해 보세요!

리소스

• Lightning Web 구성 요소 개발자 가이드
• Lightning 웹 구성 요소 개발자 가이드: Lightning 앱 빌더용 구성 요소 구성하기
• Salesforce 도움말: 사용자 정의 Lightning 페이지 구성 요소