개발 도구 설치하기

학습 목표

이 프로젝트에서는 다음 작업을 수행합니다.

• Lightning 웹 구성 요소를 만들고 작업하기 위한 권장 개발자 도구를 설치합니다.
  
• Lightning 웹 구성 요소를 만듭니다.
  
• 제공된 개발자 도구를 사용하여 코드의 오류를 수정합니다.
  
• Lightning 웹 구성 요소를 표시하도록 레코드 레이아웃을 구성합니다.
  
• Salesforce 조직에서 로컬 개발을 활성화합니다.
  

참고

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

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

Lightning 웹 구성 요소라고 하는 이 프로그래밍 모델에 대해 학습했으며, 이제 자신만의 웹 구성 요소를 구축하려고 합니다. 먼저, Lightning 웹 구성 요소를 작성할 몇 가지 도구가 필요합니다. 

어떠한 텍스트 편집기로도 Lightning 웹 구성 요소를 생성할 수 있다는 점은 사실이지만, 전문 도구 모음이 제공하는 지원은 받을 수 없을 것입니다. Lightning 웹 구성 요소를 자신의 앱에 통합하려는 경험 있는 Salesforce 개발자라면, 도구 체인에 새로운 도구를 통합할 경우 더욱 성공적일 것입니다. 또한 Salesforce 개발을 처음 접하고 Lightning 웹 구성 요소 구축을 시작하려는 경우 Salesforce 프로젝트 작업을 위한 올바른 도구 체인을 숙지해야 합니다.

Lightning 웹 구성 요소는 최신 웹 표준을 기반으로 하기 때문에 관련 도구가 현재 웹 개발자들 사이에 인기 있는 도구들로 구축되어 있는 것이 당연합니다.

새 Trailhead Playground 만들기

이 프로젝트에서는 새로운 Trailhead Playground를 만들어야 합니다. 페이지 아래로 내려가서 Playground 이름을 선택해 Create Playground(Playground 만들기)를 클릭합니다. 일반적으로 새 Trailhead Playground를 만드는 데는 3~4분이 소요됩니다.

참고: 완전히 새로운 Trailhead Playground를 만드셔야 합니다! 기존 조직 또는 Playground를 사용하면 이 프로젝트의 단계를 완료하는 데 문제가 발생할 수 있습니다.

Salesforce CLI 설정

다른 많은 프로그래밍 언어와 모델과 마찬가지로 Salesforce는 명령줄 인터페이스(CLI)를 포함합니다. npm, Yarn, Gradle, 또는 Maven을 사용해 본 적이 있다면, Salesforce CLI가 익숙할 것입니다. Salesforce 개발 작업에 맞게 제작된 것일 뿐입니다.

Salesforce CLI를 사용하면 코드를 검색하거나 푸시하거나 데이터와 상호 작용하는 등 다양한 방법으로 Salesforce 환경과 상호 작용할 수 있습니다. CLI는 여러 가지 플러그인으로 구성되어 있습니다. 이 플러그인은 중요한 특정 기능을 제공합니다. 예를 들어 plugin-org 플러그인은 스크래치 조직 만들기와 같은 Salesforce 조직을 관리하는 기능을 제공합니다.

흥미로운 점은 Salesforce CLI가 100% 오픈 소스라는 점입니다. 모든 소스 코드가 공개되어 있으며 새로운 기능 개발에 기여할 수도 있습니다. Salesforce CLI 상태 페이지에 방문해 포함된 플러그인 목록과 리포지토리 링크를 확인하세요. 

설치

Salesforce CLI가 이미 설치되어 있는 경우 이 섹션을 건너뛸 수 있습니다. 다음 단계를 따르거나 Salesforce CLI 설정 가이드에서 전체 설치 지침을 확인하세요.

1. Https://developer.salesforce.com/tools/salesforcecli에서 CLI를 설치합니다.
   
2. 명령줄에서 sf update 명령을 실행하여 CLI가 최신 버전이고 제대로 설치되었는지 확인합니다.
3. @salesforce/cli:Updating CLI…와 같은 출력이 표시됩니다.
   

Salesforce CLI 설치가 완료되었습니다. 정말 쉽죠?

로컬 개발 설치

로컬 개발(Local Dev)은 Salesforce CLI 도구로서 브라우저에서 Lightning 웹 구성 요소의 실시간 미리보기를 실행할 수 있게 해줍니다. 미리보기는 구성 요소를 로컬로 편집할 때 자동으로 업데이트 되므로 코드를 배포하거나 브라우저 페이지를 수동으로 새로 고칠 필요가 없습니다.

이 기능은 일반적으로 Lightning Experience 앱(데스크톱 및 Salesforce 모바일 앱)에서 정식으로 사용 가능합니다. 스크래치 조직에서도 로컬 개발을 활성화할 수 있습니다. 지금은 Experience Cloud Lightning Web Runtime 사이트의 베타 버전입니다.

설치

로컬 개발 환경을 설치하기 전에 먼저 Salesforce CLI를 설치해야 합니다. 그런 다음 명령줄에서 다음을 실행하여 스크래치 조직 또는 Sandbox 조직에 로컬 개발을 설치합니다.

sf plugins install @salesforce/plugin-lightning-dev@prerelease

릴리스가 예정된 프로덕션 조직이 있다면, 명령줄에서 다음 명령어를 실행하여 로컬 개발의 최신 인스턴스를 설치해야 합니다. sf plugins install @salesforce/plugin-lightning-dev@latest.

하지만 이번 Trailhead 프로젝트의 경우, 대신 시험판 버전을 설치해야 합니다.

이제 새로운 Lightning 웹 구성 요소 개발자로서 도구 상자의 다음 도구인 IDE로 이동합니다.

Visual Studio Code 다운로드 및 구성

Visual Studio Code는 Salesforce 개발자를 위한 코드 편집기입니다. 무료이고, 오픈 소스이며, Windows, Linux, 및 macOS에서 사용 가능합니다. Visual Studio Code는 웹 개발자들 사이에서 널리 확립된 IDE입니다. 이는 Lightning 웹 구성 요소를 구축하는 데 효과적인 IDE로, Salesforce는 개발 익스피리언스를 더욱 간소화하는 Visual Studio Code에 대한 무료 확장 프로그램을 제공합니다. 또한 Salesforce 확장 팩을 제공합니다. 확장 팩은 Lightning 플랫폼에서 개발하기 위한 훌륭한 도구를 제공하며 Apex, Visualforce, 심지어 Replay Debugger와 함께 작업하기 위한 도구를 포함합니다. 

이 지침에 따라 Visual Studio Code와 Salesforce 확장 팩을 설치하세요. 

1. 사용 중인 운영 체제에 맞는 Visual Studio Code의 최신 버전을 다운로드하여 설치합니다. Visual Studio Code가 이미 설치되어 있는 경우 다시 설치할 필요는 없습니다.
   
2. Visual Studio Code를 실행합니다.
   
3. 사이드바에서 Extensions(확장 프로그램)()를 클릭합니다.
   
4. Salesforce Extension Pack(Salesforce 확장 팩)을 검색하고 Install(설치)을 클릭합니다. 이미 설치한 경우 Reload(다시 로드) 버튼을 클릭합니다.
   
   
5. macOS의 경우 Command + Shift + P를 누르고 Windows 또는 Linux의 경우 Ctrl + Shift + P를 눌러 명령 팔레트를 표시합니다. 명령 팔레트에 sfdx를 입력하여 사용 가능한 초기 명령 목록을 표시합니다.
   

완료되었습니다! 이제 첫 Lightning 웹 구성 요소 개발을 위해 필요한 모든 도구가 설치되었습니다.

Developer Hub 활성화하기

이 프로젝트에서는 Trailhead Playground를 Developer Hub로 사용하고 스크래치 조직에서 Lightning 웹 구성 요소를 만듭니다. 하지만 먼저 Developer Hub와 스크래치 조직의 정의에 대해 설명하겠습니다.

스크래치 조직은 새 프로젝트, 새 기능 분기 또는 기능 테스트를 시작할 경우 신속하게 시도할 수 있는 구성 가능하고 단기적인 전용 Salesforce 환경입니다.

Developer Hub(Dev Hub)는 사용자와 팀이 스크래치 조직을 만들고 관리하는 데 사용하는 주요 Salesforce 조직입니다.

조직에서 Dev Hub를 활성화한 후에는 비활성화할 수 없습니다.

1. Trailhead Playground를 실행합니다.
   
2. Setup(설정)()을 클릭하고 Setup(설정)을 선택합니다.
   
3. Setup(설정)에서 Quick Find(빠른 찾기) 상자에 Dev Hub를 입력하고 Dev Hub를 선택합니다.
   
4. 슬라이더를 클릭하여 Dev Hub를 활성화합니다.
   

잘 하셨습니다. Lightning 웹 구성 요소가 활성화된 Dev Hub를 설정하였고, 필요한 도구를 다운로드, 설치, 구성했습니다. 다음 단계에서는 해당 도구들을 사용하여 첫 Lightning 웹 구성 요소를 생성해 보겠습니다.