Lightning 웹 구성 요소 알아보기

학습 목표

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

Lightning 웹 구성 요소 프로그래밍 모델을 설명합니다.
Lightning 웹 구성 요소를 사용할 때의 이점을 설명합니다.
Lightning 웹 구성 요소 개발을 시작하는 데 필요한 사항을 확인합니다.

웹 표준을 활용한 프로그래밍 들어가기

이제 Salesforce에 대한 지식과 HTML, JavaScript, CSS와 같은 표준 기술에 대하여 익숙해졌으니 차세대 Salesforce 앱을 구축할 때입니다. 이러한 공통된 표준을 사용하여 기존 Aura 구성 요소와의 호환성을 유지하면서 Salesforce org용 구성 요소를 구축할 수 있습니다.

Lightning 웹 구성 요소는 개발자와 사용자 경험 모두에 초점이 맞춰져 있습니다. 기존 기술에 대한 문을 열었기 때문에 Salesforce 외부에서 개발한 기술을 사용하여 Lightning 웹 구성 요소를 구축할 수 있습니다. Aura 구성 요소로 수행했던 작업을 버리지 않고 이 모든 기능을 사용할 수 있습니다.

마지막 문단에서 대소문자 사용의 차이를 느끼셨나요? 그렇다면 예리한 안목을 지니신 것입니다. Salesforce에서는 Lightning 웹 구성 요소(Lightning Web Components) 프로그래밍 모델을 언급할 때 모든 단어를 대문자로 표시합니다. Salesforce에서는 구성 요소 자체를 Lightning 웹 구성 요소(Lightning web components)라고 할 경우 첫 단어만 대문자로 사용합니다.

또한 기존에 사용하던 Lightning 구성 요소 프로그래밍 모델은 이제 Aura 구성 요소라고 합니다. 구성 요소 자체를 Aura 구성 요소라고 하는 것입니다.

계속 진행하기에 앞서

Salesforce DX 프로젝트와 Salesforce CLI에 대한 기본적인 이해가 필요합니다. 또한 Trailhead 계정에서 올바르게 구성된 조직과 더불어, Salesforce 확장팩이 포함된 VS Code를 사용해야 합니다. 이 모든 사항에 대해 자세히 알아보려면 빠른 시작: Lightning 웹 구성 요소를 완료하세요.

Lightning 웹 구성 요소를 사용하는 이유

최신 브라우저는 웹 표준을 기반으로 하며, 표준이 발전함에 따라 브라우저에서 사용자에게 제공할 수 있는 기능이 지속적으로 개선되고 있습니다. 여러분이 이러한 혁신이 가져오는 이점을 누릴 수 있기를 바랍니다.

Lightning 웹 구성 요소는 핵심 웹 구성 요소 표준을 사용하며 Salesforce에서 지원하는 브라우저에서 제대로 작동하는 데 필요한 기능만 제공합니다. 브라우저에서 기본적으로 실행되는 코드를 기반으로 구축되었기 때문에 가벼우면서 성능이 뛰어납니다. 작성하는 코드는 대부분 표준 JavaScript와 HTML입니다.

다음을 쉽게 수행할 수 있습니다.

웹의 일반적인 위치에서 솔루션을 찾습니다.
필요한 기술과 경험을 갖춘 개발자를 찾습니다.
다른 개발자의 경험을 활용합니다(다른 플랫폼도 가능).
더 빠르게 개발합니다.
전체 캡슐화를 활용하여 구성 요소를 더욱 다양하게 활용할 수 있습니다.

웹 구성 요소는 새로운 것이 아닙니다. 사실 브라우저는 수년 전부터 이러한 기능을 만들어 왔습니다. 예를 들면, <select>, <video>, <input> 및 컨테이너 이상의 역할을 하는 다양한 태그가 있습니다. 이러한 요소는 실제로 웹 구성 요소에 해당합니다. 우리의 목표는 Salesforce 개발에 이러한 수준의 통합을 제공하는 것입니다.

간단한 구성 요소 만들기

웹 표준을 준수할 때의 장점은 바로 간편함입니다. 특정 프레임워크의 단점을 보완하기 위해 애쓸 필요가 없습니다. 간단하게 HTML, JavaScript, CSS를 사용하여 구성 요소를 생성하기만 하면 됩니다. Lightning 웹 구성 요소 생성은 1, 2, 3단계로 이루어집니다. 농담이 아닙니다. 정말 간단합니다. (1) JavaScript 파일을 생성하고, (2) HTML 파일을 생성한 다음, 선택 사항으로 (3) CSS 파일을 생성합니다.

HTML은 구성 요소의 구조를 제공합니다.
JavaScript는 핵심 비즈니스 로직과 이벤트 처리를 정의합니다.
CSS는 구성 요소의 모양, 느낌, 애니메이션을 제공합니다.

이 세 가지는 구성 요소의 필수 요소입니다.

다음은 입력 필드에 'Hello World'를 표시하는 매우 간단한 Lightning 웹 구성 요소입니다.

HTML

<template>

  <input value={message}></input>

</template>

template(템플릿) 태그는 구성 요소 HTML의 기본 빌딩 블록입니다. 이를 통해 HTML 조각을 저장할 수 있습니다.

JavaScript

import { LightningElement } from 'lwc'; 

export default class App extends LightningElement { 

  message = 'Hello World'; 

}

import 문과 클래스 선언에 대한 자세한 내용은 나중에 살펴보겠습니다.

CSS

input {

  color: blue;

}

최소한 동일한 폴더(이름 일치 필요)에 동일한 이름의 HTML 파일과 JavaScript 파일만 있으면 됩니다. 메타데이터와 함께 조직에 배포하면 바로 사용할 수 있습니다. Salesforce는 파일을 컴파일하고 상용구 구성 요소를 자동으로 처리합니다.

함께 작동하는 Lightning 웹 구성 요소와 Aura 구성 요소

기존 Aura 구성 요소를 그대로 사용할 수 있는지 알고 싶으신가요? 물론 가능합니다! 기존 구성 요소를 버리지 않고도 Lightning 웹 구성 요소를 사용할 수 있습니다. 언젠가는 기존 구성 요소를 Lightning 웹 구성 요소 모델로 마이그레이션하게 되겠지만, 기존 Aura 구성 요소는 그대로 지원되는 상태에서 Lightning 웹 구성 요소가 도입됩니다. Aura 구성 요소와 Lightning 웹 구성 요소는 서로 잘 호환됩니다.

실제로 Aura 구성 요소는 Lightning 웹 구성 요소를 포함할 수 있습니다(그 반대는 가능하지 않음). 그러나 순수한 Lightning 웹 구성 요소를 구현하는 경우, 완전한 캡슐화와 함께 공통된 표준을 준수합니다.

사용할 수 있는 기능

Lightning 웹 구성 요소를 효율적으로 개발하려면 다음 도구와 환경을 사용하세요.

Dev Hub 및 스크래치 조직
스크래치 조직은 개발 및 테스트를 지원하는 일회성 Salesforce 조직입니다. 그리고 Dev Hub는 스크래치 조직을 관리하는 기능입니다. 두 가지 모두 Salesforce DX 도구 세트에 포함되어 있습니다. Salesforce DX는 Salesforce에서 구축하고 지원하는 통합 개발 도구 세트입니다.
- Salesforce 명령줄 인터페이스(CLI)
  Salesforce CLI는 스크래치 조직을 생성 및 구성하고, 구성 요소를 배포하는 작업을 빠르게 실행할 수 있는 방법을 제공합니다. 이 기능도 Salesforce DX 도구 세트에 포함되어 있습니다.
- Lightning 구성 요소 라이브러리
  Aura 및 Lightning 웹 구성 요소에 대한 참고 자료와 사용 방법은 https://developer.salesforce.com/docs/component-library/overview/components에서 확인할 수 있습니다. http://<MyDomainName>.lightning.force.com/docs/component-library에서 조직의 인스턴스를 통해 라이브러리를 확인할 수도 있습니다. 인스턴스를 통해 라이브러리를 보면 조직에 맞는 올바른 버전만 표시됩니다. 또한 여러분만의 사용자 정의 구성 요소를 만들면 라이브러리에도 확인할 수 있습니다.

GitHub
Salesforce는 확장 기능, 샘플 등을 GitHub 리포지토리를 통해 공유합니다. GitHub 계정을 만들어 이러한 서비스를 이용할 수 있는지 확인해 보세요.
- Visual Studio Code Salesforce 확장팩
  Salesforce는 개발 도구로서의 Visual Studio에 집중하여 구성 요소를 구축할 수 있는 통합 환경을 제공했습니다. 다음 링크의 Visual Studio Code용 Salesforce 확장팩에서는 코드 힌팅, 린트 경고, 기본 제공 명령을 확인할 수 있습니다. https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode.
- Lightning 웹 구성 요소 레시피
  Lightning 웹 구성 요소가 어떻게 작동하는지 알 수 있도록 GitHub 리포지토리를 제공합니다. 이 샘플 조합을 복제하고, 수정하고, 스크래치 조직에 게시하여 실제로 작동하는 것을 확인할 수 있습니다. https://github.com/trailheadapps/lwc-recipes를 참조하세요.
- E-Bikes 데모
  이 GitHub 리포지토리를 통해서도 Lightning 웹 구성 요소가 어떻게 작동하는지 확인할 수 있습니다. e-bike 데모는 Lightning 웹 구성 요소를 엔드투엔드 방식으로 구현해 앱을 만듭니다. 여러분의 스크래치 조직에서 이 예제를 시도해 보세요. https://github.com/trailheadapps/ebikes-lwc를 참조하세요.
- Lightning Data Service(LDS)
  Lightning Data Service를 통해 Salesforce의 데이터 및 메타데이터에 액세스합니다. 데이터와 함께 작동하는 기본 Lightning 구성 요소는 LDS를 기반으로 구축됩니다. 나만의 구성 요소를 만들어 LDS 캐싱, 변경 추적, 성능 등을 활용해 보세요.
- Lightning Locker
  특정 네임스페이스에 속하는 Lightning 웹 구성 요소는 Lightning Locker를 통한 보안을 사용해 다른 네임스페이스의 구성 요소로부터 보호할 수 있습니다. 또한 Lightning Locker는 지원되는 API에 대한 액세스만 허용하고 게시되지 않은 프레임워크 내부에 대한 액세스는 제거해 코드 지원을 개선하는 모범 사례를 구축합니다.

미리 보기

Lightning 웹 구성 요소의 세계에 오신 것을 환영합니다.

eBikes 데모를 사용하여 HTML 및 JavaScript 파일로 무엇을 할 수 있는지 살펴보겠습니다.