Skip to main content

Lightning 웹 구성 요소 파일 배포하기

학습 목표

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

  • 조직에 표시할 Lightning 웹 구성 요소 파일을 구성합니다.
  • 조직에 파일을 배포합니다.
  • 조직 환경에서 구성 요소 동작을 확인합니다.
참고

참고

한국어로 학습하시겠어요? 이 배지에서는 Trailhead 실습과제 검증이 영어로 진행됩니다. 참조용 번역이 괄호로 제공됩니다. 영문으로 표시된 값을 복사하여 붙여 넣은 다음 Trailhead Playground 언어를 영어로, 로캘을 미국으로 전환하세요. 여기에 나와 있는 지침을 따르세요.

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

조직에서 사용할 Lightning 웹 구성 요소 파일 설정하기

Lightning 구성 요소 만들기 유닛에서 설명한 자전거 구성 요소를 생성해 조직에 푸시합니다.

참고

자체적으로 스타일을 정의하지 않으므로 CSS 파일이 필요하지 않습니다.

이 구성 요소를 조직에 푸시하는 데 필요한 파일은 다음과 같습니다.

  • bikeCard.html
  • bikeCard.js
  • bikeCard.js-meta.xml

절차는 다음과 같습니다.

  1. bikeCard 프로젝트를 계속 진행합니다.
  2. force-app/main/default에서 lwc 폴더를 마우스 오른쪽 버튼으로 클릭하고 SFDX: Create Lightning Web Component(SFDX: Lightning 웹 구성 요소 만들기)를 선택합니다.
    bikeCard 구성 요소 파일을 생성합니다.
  3. 새 구성 요소의 이름으로 bikeCard를 입력합니다.
  4. Enter 키를 누른 다음 Enter 키를 다시 눌러 기본값인 force-app/main/default/lwc를 수락합니다.
  5. \force-app\main\default\lwc\bikeCard의 VS Code에 다음이 표시됩니다.
    bikeCard 구성 요소 파일 구조Lightning 웹 구성 요소는 웹 표준을 따릅니다. HTML 표준에서는 사용자 정의 요소 이름이 여러 단어로 구성될 경우 하이픈을 넣는 것을 권장합니다. 하지만 Salesforce Platform에서는 구성 요소 폴더나 파일 이름에 하이픈을 사용할 수 없습니다. 대신, 카멜 표기법 명명 규칙을 사용합니다.
  6. bikeCard.html, bikeCard.js 및 bikeCard.js-meta.xml 파일의 내용을 복사하여 바꿉니다.
    bikeCard.html

    <template>
  <div>
    <div>Name: {name}</div>
    <div>Description: {description}</div>
    <lightning-badge label={material}></lightning-badge>
    <lightning-badge label={category}></lightning-badge>
    <div>Price: {price}</div>
    <div><img src={pictureUrl}/></div>
  </div>
</template>
    bikeCard.js

    import { LightningElement } from 'lwc';
export default class BikeCard extends LightningElement {
  name = 'Electra X4';
  description = 'A sweet bike built for comfort.';
  category = 'Mountain';
  material = 'Steel';
  price = '$2,700';
  pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
}
    bikeCard.js-meta.xml

    <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <!-- The apiVersion may need to be increased for the current release -->
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Bike Card</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
  7. 파일을 저장합니다.

구성 요소 구성 파일

아직 다루지 않은 파일은 확장자가 .js-meta.xml인 구성 요소 구성 파일입니다. 이 파일은 Lightning 앱 빌더에서 사용할 구성 요소의 설계 구성을 포함해 Salesforce에 대한 메타데이터를 제공합니다.

구성 파일을 포함하여 구성 요소를 구성하는 파일입니다.

아직 설정 파일에 대해서는 다루지 않았는데, 이는 LWC.studio에서 작업하고 있기 때문입니다. 이제 조직 내에서 컨텐츠를 사용할 수 있도록 구성 파일을 포함해야 합니다.

모든 ebikes 리포지토리 구성 요소에는 이 구성 파일이 있습니다. 다음 ebikes 리포지토리 예시를 살펴보세요.

<?xml version="1.0" encoding="UTF-8" ?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

  <apiVersion>57.0</apiVersion>

  <isExposed>true</isExposed>

  <masterLabel>Product Card</masterLabel>

  <targets>

    <target>lightning__AppPage</target>

    <target>lightning__RecordPage</target>

    <target>lightning__HomePage</target>

    <target>lightningCommunity__Page</target>

  </targets>

  <targetConfigs>

    <targetConfig targets="lightning__RecordPage">

      <objects>

        <object>Product__c</object>

      </objects>

    </targetConfig>

  </targetConfigs>

</LightningComponentBundle>

필수 사항:

  • apiVersion은 구성 요소를 Salesforce API 버전에 바인딩합니다.
  • isExposed( true 또는 false) isExposed가 false이면 구성 요소가 Lightning 앱 빌더 또는 Experience Builder에 노출되지 않습니다.
    • Lightning 앱 빌더 또는 Experience Builder에서 구성 요소를 사용할 수 있도록 하려면 isExposed를 true로 설정하고 Lightning 페이지의 유형인 <target>을 하나 이상 정의합니다.

선택 사항:

  • targets는 Lightning 앱 빌더에서 구성 요소를 추가할 수 있는 Lightning 페이지 유형을 지정합니다.
  • targetConfigs를 사용하면 어떤 객체가 구성 요소를 지원하는지 등 각 Lightning 페이지 유형에 맞는 동작을 지정할 수 있습니다.

지원되는 구문의 전체 목록은 문서를 참조하세요.

조직에서 구성 요소 표시하기

UI에 Lightning 웹 구성 요소를 표시하는 데는 두 가지 옵션이 있습니다.

  1. 구성 요소가 다양한 Flexipage 유형(홈, 레코드 홈 등)을 지원하도록 설정한 다음 Lightning 앱 빌더를 사용하여 Flexipage에 추가합니다. 이것이 가장 간단한 방법이며, 이 유닛에서는 이 방법을 사용합니다.
  2. Lightning 웹 구성 요소가 포함된 Aura 구성 요소를 가리키는 탭을 만들 수도 있습니다. 리포지토리에서 필요한 부분을 확인할 수 있습니다.

파일 배포하기

이제 구성 요소 파일을 조직에 배포해야 합니다.

  1. VS Code의 Command Palette(명령어 팔레트)에서 SFDX: Authorize an Org(SFDX: 조직 인증)을 사용하여 조직을 인증합니다. 메시지가 표시되면 프로젝트 기본값을 선택하고 Enter 키를 눌러 기본 별칭을 수락합니다. 액세스를 허용하라는 메시지가 표시되면 Allow(허용)를 클릭합니다.
  2. force-app/main/dault 폴더를 마우스 오른쪽 버튼으로 클릭하고 SFDX: Deploy this Source to Org(SFDX: 조직에 원본 배포)를 선택합니다.

구성 요소에 대한 새 페이지 만들기

구성 요소 구성 파일을 설정하여 Lightning 앱 빌더에서 구성 요소를 사용할 수 있게 되었으므로, 이제 UI를 사용하여 앱을 만들고 해당 앱에 구성 요소를 추가합니다.

  1. VS Code의 Command Palette(명령어 팔레트)에서 SFDX: Open Default Org(SFDX: 기본 조직 열기)를 사용해 조직을 엽니다.
  2. Setup(설정)에서 Quick Find(빠른 찾기) 상자에 Lightning App Builder를 입력한 다음 Lightning App Builder(Lightning 앱 빌더)를 선택합니다.
  3. New(새로 만들기)를 클릭합니다.
  4. App Page(앱 페이지)를 선택하고 Next(다음)를 클릭합니다.
  5. 레이블을 Bike Card(자전거 카드)로 지정하고 Next(다음)를 클릭합니다.
  6. One Region(1개의 영역)을 선택하고 Done(완료)를 클릭합니다.
  7. Lightning 앱 빌더에서 Components(구성 요소) 목록을 아래로 스크롤하여 Bike Card 구성 요소가 표시될 때까지 기다립니다.

이제 페이지로 구성 요소를 드래그할 수 있습니다. 페이지를 저장하고 활성화하면 할당된 페이지에 Bike Card 구성 요소가 표시됩니다.

  1. 자전거가 나타날 때까지 Bike Card 구성 요소를 페이지 레이아웃의 상단으로 드래그합니다.
  2. Save(저장)를 클릭합니다.
  3. Activate(활성화)를 클릭합니다.
  4. Activate for all users(모든 사용자에 대해 활성화)를 선택된 상태로 만듭니다. 원하는 경우, 앱의 이름이나 아이콘을 변경할 수도 있습니다.
  5. Save(저장)를 클릭합니다. 탐색 메뉴에 페이지를 추가할지 묻는 메시지가 표시되지만 반드시 추가할 필요는 없습니다. 이 환경에서도 페이지로 이동할 수 있습니다.
  6. Finish(완료)를 클릭합니다.
  7. 왼쪽 상단 모서리에 있는 Back(뒤로)를 클릭하여 Lightning 앱 빌더를 종료합니다.
  8. App Launcher(앱 시작 관리자)()에서 Bike Card를 찾아 선택합니다.
  9. 열어서 UI에서 작동 중인 구성 요소를 확인합니다.
    Lightning Experience에서의 Bike Card 앱

빛나는 새 자전거가 생겼습니다. 구성 요소를 조직에 푸시하고, 페이지에 표시하고, UI에서 확인할 수 있습니다.

다음 유닛에서는 이벤트 처리 기능이 있는 상호작용 요소를 구축하고 조직에 배포하여 테스트해 보겠습니다.

리소스

계속해서 무료로 학습하세요!
계속 진행하려면 계정을 가입하세요.
가입 로그인
얻을 수 있는 이점
  • 커리어 목표에 대한 개인화된 권장 사항 제공받기
  • 실습 과제 및 퀴즈를 통해 스킬 연습
  • 진행 상황을 추적하고 고용주에게 공유
  • 멘토십과 커리어 기회에 연결
지금은 건너뛰기