Create a Lightning Web Component

참고

한국어로 학습하시겠어요? 이 배지에서는 Trailhead 실습과제 검증이 영어로 진행됩니다. 참조용 번역이 괄호로 제공됩니다. Trailhead Playground에서 (1) 로캘을 미국으로 바꾸고 (2) 언어를 영어로 바꾼 후 (3) 영문으로 표시된 값을 복사해 붙여 넣으세요. 여기 에 나와 있는 지침을 따르세요.

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

이 단계에서는 이전에 설치한 도구를 사용하는 방법에 대해 알아보겠습니다.

Salesforce DX 프로젝트 만들기

Salesforce DX 프로젝트는 Salesforce CLI를 사용하여 조직과 상호 작용할 수 있는 기반을 제공합니다. 프로젝트는 배포할 코드 외에도 여러 개의 로컬 구성 파일로 구성됩니다. Salesforce에서는 이 코드를 Salesforce Platform의 기반인 메타데이터라고 지칭합니다. Salesforce를 처음 사용하는 경우, 개발자 초급 트레일에서 메타데이터 기반 접근법에 대해 자세히 알아보세요.

프로젝트를 만들기 위해 Visual Studio Code를 사용합니다.

Visual Studio Code를 엽니다.
macOS의 경우 Command+Shift+P를 누르고 Windows 또는 Linux의 경우 Ctrl+Shift+P를 누른 다음 create project(프로젝트 만들기)를 입력합니다. SFDX: Create Project(SFDX: 프로젝트 만들기)를 선택하고 Enter 키를 누릅니다.
기본 프로젝트 유형 선택을 Standard(표준)로 두고 Enter 키를 누릅니다.
프로젝트 이름으로 trailhead를 입력하고 Enter 키를 누릅니다.
프로젝트를 저장할 로컬 컴퓨터의 디렉터리를 선택합니다. Create Project(프로젝트 만들기)를 클릭합니다.

잘 하셨어요! Lightning 웹 구성 요소로 작업하기 위해 첫 번째 Salesforce DX 프로젝트를 만들었습니다. Visual Studio Code는 새 프로젝트를 자동으로 엽니다.

Dev Hub 인증하기

다음 단계는 Dev Hub를 인증하는 것입니다. Trailhead Playground를 사용하는 경우 다음 단계에 대한 자격 증명을 얻는 방법에 대한 자세한 내용은 Trailhead Playground 사용자 이름과 비밀번호 가져오기에서 확인하실 수 있습니다.

Visual Studio Code에서 macOS의 경우 Command+Shift+P를 누르거나 Windows 또는 Linux의 경우 Ctrl+Shift+P를 누릅니다.
sfdx를 입력합니다.
SFDX: Authorize a Dev Hub(SFDX: Dev Hub 인증하기)를 선택합니다.
Dev Hub 조직 자격 증명을 사용하여 로그인합니다.
Allow(허용)를 클릭합니다.
브라우저에서 인증하면 CLI는 Dev Hub 자격 증명을 기억합니다. 성공 메시지는 다음과 같아야 합니다.

Dev Hub를 인증하는 것은 Salesforce Platform에서 개발하기 위한 일시적인 환경인 스크래치 조직을 만들기 위한 전제 조건입니다. 다음 단계에서 조직 하나를 만들어 보겠습니다.

스크래치 조직 만들기

Visual Studio Code에서 macOS의 경우 Command+Shift+P를 누르거나 Windows 또는 Linux의 경우 Ctrl+Shift+P를 누릅니다.
sfdx를 입력합니다.
SFDX: Create a Default Scratch Org...(SFDX: 기본 스크래치 조직 만들기...)를 선택합니다.
기본값인 project-scratch-def.json을 허용하려면 Enter 키를 누릅니다.
기본값인 trailhead 스크래치 조직 별칭을 허용하려면 Enter 키를 누릅니다.
기본값인 7일 동안의 스크래치 조직 지속 시간을 허용하려면 Enter 키를 누릅니다.

잠시 기다리세요. 스크래치 조직을 만드는 데는 시간이 소요될 수 있습니다. 성공 메시지는 VS Code의 출력 패널에서 다음과 같이 표시되어야 합니다.

17:18:11.779 sfdx force:org:create -f

config\project-scratch-def.json --setalias trailhead 

--durationdays 7 --setdefaultusername --json --loglevel fatal ended with exit code 0

첫 번째 Lightning 웹 구성 요소를 개발하기 위한 준비가 모두 설정되었습니다. Salesforce DX에 대해 자세히 알아보려면 App Development with Salesforce DX(Salesforce Dx를 통한 앱 개발)를 확인하세요.

Lightning 웹 구성 요소 만들기

Lightning 웹 구성 요소를 만드는 것은 복잡하지 않습니다. 또한 Salesforce CLI는 보다 쉽게 시작할 수 있는 프로젝트 구조를 이미 만들었습니다.

폴더 구조는 다음과 같습니다.

Visual Studio Code 내의 Salesforce DX 프로젝트의 파일 탐색기 보기. .sfdx, .vscode, config 및 force-app을 포함한 하위 디렉터리를 표시합니다.

이번에 만든 프로젝트에는 특수 폴더인 force-app/main/default가 있습니다. 패키지 디렉터리라고 불리는 이 폴더에는 현재 Salesforce DX 프로젝트의 모든 메타데이터가 포함되어 있습니다. Lightning 웹 구성 요소도 메타데이터이므로 lwc라는 하위 폴더에 저장됩니다. 다음 단계에서는 이 폴더에 Lightning 웹 구성 요소를 추가합니다.

또한 lwc 폴더에는 .eslintrc와 jsconfig.json 두 개의 파일이 있습니다. 이 프로젝트의 후반부에서 이 내용을 살펴보겠습니다.

Salesforce DX 프로젝트를 만들 때와 마찬가지로 Visual Studio Code를 사용하여 Lightning 웹 구성 요소를 만들 수 있습니다. (Salesforce CLI를 직접 사용할 수도 있지만, 여기서는 Visual Studio Code의 내장형 터미널을 통해 사용하겠습니다.)

Visual Studio Code를 엽니다.
macOS의 경우 Command+Shift+P를 누르고 Windows 또는 Linux의 경우 Ctrl+Shift+P를 누릅니다.
focus terminal을 입력하고 Terminal: Focus Terminal을 선택합니다.
Terminal(터미널) 탭(Output(출력) 옆)이 선택됩니다.
Terminal(터미널) 탭에서 sf lightning generate component -n myFirstWebComponent -d force-app/main/default/lwc --type lwc를 입력하고 Enter를 눌러 확인합니다.

이렇게 하면 첫 번째 Lightning 웹 구성 요소에 필요한 파일이 생성됩니다.

확장된 Lightning 웹 구성 요소 폴더가 있는 메타데이터 디렉터리 구조

이 변수는 명령에서 사용한 매개 변수입니다.

-n은 Lightning 웹 구성 요소 폴더와 그 파일의 이름을 정의합니다.
-d는 Lightning 웹 구성 요소를 만들어야 하는 대상 디렉터리를 정의합니다. 대상 디렉터리의 이름은 lwc여야 합니다.
--type은 Lightning 웹 구성 요소를 만들도록 지정합니다.

경험하신 것처럼 개발 프로세스에서 Salesforce CLI를 쉽게 사용할 수 있습니다. Visual Studio Code를 대신 사용하려면 lwc 폴더를 마우스 오른쪽 버튼으로 클릭하거나 Visual Studio Code에서 명령 팔레트를 엽니다. 두 가지 옵션 모두 SFDX: Create Lightning Web Component(Lightning 웹 구성 요소 만들기) 옵션을 제공하며, 이 옵션은 Salesforce CLI를 호출합니다.

첫 번째 Lightning 웹 구성 요소에 코드 및 메타데이터 추가하기

이제 Lightning 웹 구성 요소를 구성하는 파일을 함께 살펴보겠습니다. 이를 위해 준비한 HTML, JavaScript 및 XML을 복사 붙여넣기 하겠습니다. myFirstWebComponent.js-meta.xml 파일로 시작해 보겠습니다.

lwc 하위 폴더에서 방금 만든 myFirstWebComponent 폴더를 엽니다.
myFirstWebComponent.js-meta.xml을 클릭합니다.

XML 파일의 내용을 다음과 같이 이 XML 마크업으로 바꿉니다.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
   <apiVersion>51.0</apiVersion>
   <isExposed>true</isExposed>
   <targets>
       <target>lightning__AppPage</target>
       <target>lightning__RecordPage</target>
       <target>lightning__HomePage</target>
   </targets>
</LightningComponentBundle>

파일을 저장하려면 macOS의 경우 CMD+S를 누르고 Windows 또는 Linux의 경우 CTRL+S를 누릅니다.

지금 업데이트한 파일은 메타데이터 정의 파일입니다. Lightning 앱 빌더(대상)를 사용하여 Salesforce 사용자 인터페이스에 추가할 수 있는 몇 가지 구성 요소가 포함되어 있습니다. 메타데이터 구성 옵션에 대한 자세한 내용은 문서를 참조하세요.

다음으로는 Lightning 웹 구성 요소의 JavaScript 파일을 업데이트해 보겠습니다.

복사 붙여넣기 하려는 JavaScript 코드 및 HTML 마크업에는 몇 가지 오류가 내장되어 있습니다. 표시되는 빨간색 밑줄은 걱정하지 마세요. 이 프로젝트 이후에는 Salesforce Lightning 웹 구성 요소 확장 기능과 결합된 Visual Studio Code의 기능을 사용하여 오류를 해결해 보겠습니다.

Visual Studio Code에서 myFirstWebComponent.js를 클릭합니다.

파일의 전체 내용을 다음 코드로 바꿉니다.

import { LightningElement } from 'lwc';
export default class MyFirstWebComponent extends LightningElement {
    @track
    contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
        },
    ];
}

파일을 저장하려면 macOS의 경우 CMD+S를 누르고 Windows 또는 Linux의 경우 CTRL+S를 누릅니다.

파일을 저장한 후에 몇 가지 사항을 바로 확인할 수 있습니다.

주석이 추가된 단어 @track에는 빨간색 밑줄이 있습니다.
탐색기의 JavaScript 파일 색상이 빨간색으로 변경되었습니다.

설정에 따라 한 개의 오류만 표시될 수 있습니다.

오류 2개 모두 JavaScript 코드에 올바르지 않은 내용이 있다는 지표입니다. 좋은 개발자라면 대개 바로 수정할 수 있습니다.

하지만 지금은 문제를 무시할 수 있습니다. 대신 웹 컴포넌트 템플릿 파일에 HTML 마크업을 추가합니다.

Visual Studio Code에서 myFirstWebComponent.html을 클릭합니다.

기존 <template></template> 태그에 이 마크업을 다음과 같이 삽입합니다.

<lightning-card title="ContactInformation" icon-name="custom:custom14">
   <div class="slds-m-around_medium">
      <template for:each={} for:item="contact">
         <div>
            {contact.Name}, {contact.Title}
         </div>
      </template>
   </div>
</lightning-card>

파일을 저장하려면 macOS의 경우 CMD+S를 누르고 Windows 또는 Linux의 경우 CTRL+S를 누릅니다.

HTML 마크업이 올바른 상태가 아니라는 표시를 다시 확인하게 됩니다.

4행에 강조 표시된 오류가 열려 있는 HTML 템플릿 파일

일단 이를 무시합니다.

일반적으로 다음 단계는 조직에 프로젝트를 배포하는 것입니다. 하지만 코드는 오류가 많아 배포 시 실패합니다. 실생활에서 배포에 실패할 수도 있고 아닐 수도 있습니다. IDE 내에 표시되는 모든 오류에 주의를 기울이고 바로 그 오류를 수정하는 것이 중요합니다.

다음이자 마지막 단계에서는 코드를 수정해 봅니다.