Skip to main content

코드를 분석하고 조직에 배포하기

참고

참고

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

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

Lightning 웹 구성 요소 개발에 권장되는 도구를 설치했습니다. 그리고 몇 가지 깨진 코드를 복사해서 붙여 넣었습니다. 해당 코드로 인해 배포에 실패할 수 있다는 것을 알고 있습니다. 이런 일을 실제 생활에서 해본 적이 없다고 말할 수도 있습니다. 그렇죠?

JavaScript 오류 수정하기

개발자로서 가장 중요한 작업은 웹에서 검색한 후 작업 코드를 직접 작성하는 것입니다. 앞에서 소개한 JavaScript 파일부터 오류를 수정해 보겠습니다.

  1. Visual Studio Code를 엽니다.
  2. myFirstWebComponent.js를 클릭합니다.
  3. 빨간색 밑줄이 그어진 단어 track(추적) 위로 마우스를 가져갑니다. 이렇게 하면 이 특정 오류와 관련된 오류 메시지가 나타납니다. 
@track
c:\Git\set-up-lwc-dev-tools\myFirstWebComponent.js: LWC1102: Invalid ‘track’ decorator usage.
Supported decorators (api, wire, track) should be imported from “lwc” lwc
  1. Problems(문제) 탭을 클릭하여 현재 열린 파일에 나타나는 모든 오류를 표시합니다. 다음의 항목도 표시될 수 있습니다.

Visual Studio Problems 탭에 두 가지 오류가 표시됩니다. “the for each directive is expected to be an expression(for each 지시문은 표현식이 되어야 합니다)” 및 “invalid track decorator usage(유효하지 않은 track 데코레이터)”

현재 파일과 Problems(문제) 탭은 코드에서 감지된 오류를 보여줍니다.

첫 번째 오류 메시지는 Lightning 웹 구성 요소 엔진의 요구 사항의 결과임을 나타냅니다. 이러한 오류는 'LWC' 다음에 숫자가 오는 형태를 포함합니다. 코드를 자세히 살펴보면 첫 번째 줄에 lwc 엔진에서 LightningElement를 가져오고, track을 가져오지 않습니다. 다음 문제를 해결해보겠습니다.

  • LightningElement라는 단어 바로 뒤에 나오는 항목(중괄호 내)을 클릭합니다.
  • track(추적)을 입력하고 두 단어를 쉼표로 구분하는 것을 잊지 마세요. 코드는 다음과 같이 나타납니다.
    import { LightningElement, track } from 'lwc';
  • macOS에서는 Command + S를, Windows 또는 Linux에서는 Ctrl + S를 눌러 파일을 저장합니다.

오류와 빨간 선은 모두 사라지게 됩니다.

참고

IDE는 기본적으로 입력할 때 파일의 내용을 검증합니다. 이를 Visual Studio Code에서 입력하는 대로 또는 파일을 저장한 후에 유효성을 검증하도록 환경설정으로 설정할 수 있습니다.

잠시만요, 왜 두 오류가 모두 해결되었을까요?

Lightning 웹 구성 요소 확장은 기본적으로 ESLint와 함께 제공됩니다. ESLint는 코드 오류, 코딩 모범 사례 등을 평가하는 널리 사용되는 린팅 도구입니다. Salesforce는 여러분이 Lightning 웹 구성 요소 개발자로서 멋진 코드를 작성할 수 있도록 특정 ESLint 규칙을 제공합니다. 그리고 실수가 있는 경우 린팅 규칙을 통해 코드를 배포하기 전에 내용을 확인할 수 있습니다. 멋지지 않나요?

위의 오류 메시지는 속성을 정의했으나(이 경우에 track 데코레이터) 사용하기 전에 선언하지 않았다는 것을 나타냅니다. 이는 코드를 깔끔하고 관리하기 쉽게 만들어주는 상당히 유용한 여러 린팅 규칙 중 하나입니다.

lwc 메타데이터 폴더에 자동으로 추가된 .eslintrc 파일을 기억하시나요? Salesforce 관련 린팅 규칙을 정의하는 구성 파일입니다.

{
   "extends": ["@salesforce/eslint-config-lwc/recommended"]
}

Salesforce는 기본, 권장 및 확장 등 다양한 규칙 집합을 제공합니다. 이러한 린팅 규칙은 프로젝트에 따라 다르므로 프로젝트에 따라 다른 규칙 집합을 사용할 수 있습니다.

참고

Lightning 웹 구성 요소를 배포할 경우 Salesforce는 @salesforce/eslint-config-lwc/base 린팅 규칙에 대해 코드를 자동으로 검증합니다. 린팅 규칙을 직접 재구성하는 경우 이 점을 주의하세요.

ESLint 또는 Salesforce가 제공하는 린팅 규칙에 대해 자세히 알아보려면 GitHub 리포지토리를 확인하세요.

이제 JavaScript 파일이 작동하므로 웹 구성 요소 템플릿에서 HTML 마크업을 수정해 보겠습니다.

HTML 템플릿 오류 수정하기

JavaScript 파일의 오류를 수정했으므로 Salesforce Lightning 웹 구성 요소 확장 프로그램과 함께 Visual Studio Code의 인텔리센스 기능을 사용하는 방법을 배우게 됩니다.

  1. Visual Studio Code에서 myFirstWebComponent.html을 엽니다.
  2. for:each 속성에 대해 빨간색 밑줄이 있는 속성의 빈 중괄호에 커서를 놓습니다.
  3. Ctrl + Space를 누릅니다. 인텔리센스 드롭다운이 표시됩니다.

인텔리센스 창과 함께 표시된 HTML 마크업

  1. contact(연락처)를 선택하고 Enter를 눌러 contact를 삽입합니다.
  2. 연락처를 복수형 contacts(연락처)로 만들려면 s를 추가합니다.
  3. 다음으로 빨간색으로 표시된 div tag: key={contact.Id}에 이 속성을 추가합니다.
  4. macOS에서는 Command + S를, Windows 또는 Linux에서는 Ctrl + S를 눌러 파일을 저장합니다.

코드는 다음과 같아야 합니다.

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

코드를 고치는 동안 두 가지를 확인했습니다.

먼저, HTML 마크업 내부에서 표현식에 인텔리센스가 표시됩니다. Lightning 웹 구성 요소 확장 프로그램은 인텔리센스를 제공하는데, 이는 JavaScript 파일에 다른 속성이나 함수를 추가하면 템플릿 파일 내에서 자동으로 사용 가능해진다는 의미입니다. 이에 따라 상당한 시간을 절약할 수 있습니다!

둘째, 코드의 즉시 검증 또는 이 경우 마크업을 경험했습니다. JavaScript 파일과 동일합니다. 필수 특성이 누락된 경우, 예를 들어, IDE가 알려줍니다.

템플릿 파일 내의 모든 기본 Lightning 구성 요소에 대한 인텔리센스도 얻을 수 있습니다. <lightning을 입력하면 이렇게 목록이 표시됩니다.

lightning-accordion 및 lightning-button과 같은 기본 Lightning 구성 요소 목록을 표시하는 기본 Lightning 구성 요소 인텔리센스 창

그리고 기존 마크업에 커서를 올려놓으면 확장 프로그램이 선택된 기본 구성 요소에 대한 풍부한 정보를 제공합니다.

기본 Lightning 구성 요소 문서

참고

코드 또는 토큰에 대한 경고 메시지가 표시되는 원인 중 하나는 Salesforce CLI 설치가 오래된 경우입니다. CLI에서 생성된 구성 요소 코드는 CLI 설치와 동일한 최신 상태입니다. SLDS 유효성 검사기(Salesforce 확장 팩의 일부)는 오래된 코드에 플래그를 지정하므로 오래된 CLI는 더 많은 경고가 발생할 가능성이 높습니다.

이 뱃지의 경우 단계를 완료하는 데 토큰 경고가 방해가 되지 않으므로 무시할 수 있습니다. 그러나 이 뱃지 외에는 모든 경고 메시지를 확인하여 Salesforce CLI가 최신 상태를 유지할 수 있도록 해야 합니다.

새 Lightning 웹 구성 요소 배포 및 구성하기

이제 모든 코드가 수정되었으므로 로컬 메타데이터를 스크래치 조직에 푸시할 차례입니다.

  1. 조직에 메타데이터를 배포하려면, Terminal(터미널) 탭에
    sf project deploy start --target-org scratchOrg 명령어를 입력합니다.
  2. Enter를 누릅니다.

메타데이터가 스크래치 조직에 성공적으로 푸시되면 구성 요소를 계정 레코드 레이아웃에 추가할 수 있습니다.

  1. 스크래치 조직을 열려면, Terminal(터미널) 탭에
    sf org open --target-org scratchOrg 명령어를 입력합니다.
  2. Enter를 누릅니다.
참고

로컬 개발(Local Dev)은 스크래치 조직에 활성화되어 있습니다. 그러나 로컬 개발 CLI 명령어를 실행할 때까지 실시간 미리 보기를 확인할 수 없습니다. 이에 대해서는 곧 다룰 것입니다.

이제 Account(계정) 레코드 페이지를 구성해 보겠습니다.

  1. App Launcher(앱 시작 관리자)(앱 시작 관리자)에서 Sales(영업)를 찾아서 선택합니다.
  2. Accounts(계정) 탭을 클릭한 다음 New(새로 만들기)를 클릭하여 계정을 만듭니다.
  3. Account Name(계정 이름)으로 Component Developers(구성 요소 개발자)를 입력하고 Save(저장)를 클릭합니다.
  4. Setup(설정)(설정)을 클릭한 다음 Edit Page(페이지 편집)를 선택하여 Lightning 앱 빌더를 엽니다.
  5. myFirstWebComponent(Custom(사용자 정의) 아래) 구성 요소를 페이지로 끌어옵니다.
  6. Lightning 앱 빌더 메뉴 모음에서 Desktop(데스크톱)을 클릭하여 드롭다운을 열고 Phone(휴대폰)을 선택합니다.
  7. 다시 myFirstWebComponent 구성 요소를 페이지로 끌어옵니다.
  8. Save(저장)를 클릭한 다음 Activate(활성화)를 클릭합니다.
  9. Assign as Org Default(조직 기본값으로 할당)을 클릭한 다음 Desktop and phone(데스크톱 및 휴대폰)을 선택합니다.
  10. Next(다음)와 Save(저장)를 차례로 클릭합니다.
  11. 뒤로 가기(“”)를 클릭하여 Account(계정) 레코드로 돌아갑니다.
    Lightning 웹 구성 요소는 다음과 같이 표시됩니다.
    ContactInformation 구성 요소는 Component Developers 계정의 관련 탭 아래에 연락처를 나열합니다.

다음 마지막 단계에서는 로컬 개발 CLI 도구를 사용하여 브라우저에서 Lightning 앱의 로컬 미리보기를 실행하는 방법에 대해 살펴봅니다.

스크래치 조직에서는 작업을 확인할 수 없지만 Verify Step(단계 확인)을 클릭하여 프로젝트의 다음 단계로 이동할 수 있습니다.

Salesforce 도움말에서 Trailhead 피드백을 공유하세요.

Trailhead에 관한 여러분의 의견에 귀 기울이겠습니다. 이제 Salesforce 도움말 사이트에서 언제든지 새로운 피드백 양식을 작성할 수 있습니다.

자세히 알아보기 의견 공유하기