개발 도구 설치하기
학습 목표
이 프로젝트에서는 다음 작업을 수행합니다.
- Lightning 웹 구성 요소를 만들고 작업하기 위한 권장 개발자 도구를 설치합니다.
- Lightning 웹 구성 요소를 만듭니다.
- 제공된 개발자 도구를 사용하여 코드의 오류를 수정합니다.
- Lightning 웹 구성 요소를 표시하도록 레코드 레이아웃을 구성합니다.
참고
한국어로 학습하시겠어요? 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 설정 가이드를 참조하세요.
-
Https://developer.salesforce.com/tools/salesforcecli에서 CLI를 설치합니다.
- 명령줄에서
sf update명령을 실행하여 CLI가 최신 버전이고 제대로 설치되었는지 확인합니다.
-
@salesforce/cli:Updating CLI…와 같은 출력이 표시됩니다.
Salesforce CLI가 준비되었습니다! 정말 쉽죠? 이제 새로운 Lightning 웹 구성 요소 개발자로서 도구 상자의 다음 도구인 IDE로 이동합니다.
Visual Studio Code
Visual Studio Code는 Salesforce 개발자를 위한 코드 편집기입니다. 이 편집기는 무료 오픈 소스이며 Windows, Linux, macOS에 사용할 수 있습니다. Visual Studio Code는 웹 개발자들 사이에서 널리 확립된 IDE입니다. 이는 Lightning 웹 구성 요소를 구축하는 데 효과적인 IDE로, Salesforce는 개발 익스피리언스를 더욱 간소화하는 Visual Studio Code에 대한 무료 확장 프로그램을 제공합니다.
Visual Studio Code를 설치하려면 다음 지침을 따르세요.
- 사용 중인 운영 체제에 맞는 Visual Studio Code의 최신 버전을 다운로드하여 설치합니다. Visual Studio Code가 이미 설치되어 있는 경우 다시 설치할 필요는 없습니다.
- Visual Studio Code를 실행합니다.
- 사이드바에서 Extensions(확장)(
)을 클릭합니다.
- Salesforce Extension Pack(Salesforce 확장 팩)을 검색하고 Install(설치)을 클릭합니다. 이미 설치한 경우 Reload(다시 로드) 버튼을 클릭합니다.
- macOS의 경우 Command + Shift + P를 누르고 Windows 또는 Linux의 경우 Ctrl + Shift + P를 눌러 명령 팔레트를 표시합니다. 명령 팔레트에
sfdx를 입력하여 사용 가능한 초기 명령 목록을 표시합니다.
완료되었습니다! 첫 번째 Lightning 웹 구성 요소를 개발하는 데 필요한 모든 도구를 설치했습니다.
Salesforce에서는 Salesforce 확장 팩도 제공합니다. 확장 팩은 Lightning 플랫폼에서 개발하기 위한 훌륭한 도구를 제공하며 Apex, Visualforce, 심지어 Replay Debugger와 함께 작업하기 위한 도구를 포함합니다.
Developer Hub 활성화하기
이 프로젝트에서는 Trailhead Playground를 Developer Hub로 사용하고 스크래치 조직에서 Lightning 웹 구성 요소를 만듭니다. 하지만 먼저 Developer Hub와 스크래치 조직의 정의에 대해 설명하겠습니다.
스크래치 조직은 새 프로젝트, 새 기능 분기 또는 기능 테스트를 시작할 경우 신속하게 시도할 수 있는 구성 가능하고 단기적인 전용 Salesforce 환경입니다.
Developer Hub(Dev Hub)는 사용자와 팀이 스크래치 조직을 만들고 관리하는 데 사용하는 주요 Salesforce 조직입니다.
조직에서 Dev Hub를 활성화한 후에는 비활성화할 수 없습니다.
- Trailhead Playground를 실행합니다.
- Setup(설정)(
)을 클릭하고 Setup(설정)을 선택합니다.
- Setup(설정)의 Quick Find(빠른 찾기) 상자에서 Dev Hub를 입력하고 Dev Hub를 선택합니다.
- 슬라이더를 클릭하여 Dev Hub를 활성화합니다.
잘 하셨습니다. 지금까지 Lightning 웹 구성 요소가 활성화된 Dev Hub를 설정하고 필요한 도구를 다운로드, 설치 및 구성해 보았습니다. 다음 단계에서는 이러한 도구를 사용하여 여러분의 첫 번째 Lightning 웹 구성 요소를 만들어 보겠습니다.