lwc recipes
1.0.0
Lightning 웹 구성 요소에 대한 요약하기 쉬운 코드 예제 모음입니다. 각 레시피는 모범 사례를 따르면서 가능한 최소한의 코드 줄로 특정 작업을 코딩하는 방법을 보여줍니다. "소스 보기" 링크를 클릭하면 GitHub의 코드로 직접 이동됩니다. "Hello World"부터 데이터 액세스 및 타사 라이브러리까지 이를 위한 레시피가 있습니다!
빠른 시작: LWC 레시피 샘플 앱 트레일헤드 프로젝트 탐색을 완료하거나 이 짧은 프레젠테이션 비디오를 시청하여 이 앱에 대해 자세히 알아보세요.
이 샘플 응용 프로그램은 Salesforce Platform에서 실행되도록 설계되었습니다. 모든 플랫폼에서 Lightning 웹 구성 요소를 경험하고 싶다면 https://lwc.dev를 방문하여 Lightning 웹 구성 요소 샘플 애플리케이션 LWC Recipes OSS를 사용해 보세요.
Scratch Org를 사용하여 앱 설치: 권장되는 설치 옵션입니다. 앱과 코드를 경험하고 싶은 개발자라면 이 옵션을 사용하세요.
잠금 해제된 패키지를 사용하여 앱 설치: 이 옵션을 사용하면 누구나 로컬 개발 환경을 설치하지 않고도 샘플 앱을 경험할 수 있습니다.
Developer Edition 조직 또는 Trailhead Playground를 사용하여 앱 설치: Trailhead 배지를 처리할 때 또는 Scratch 조직보다 더 영구적인 환경에 앱을 배포하려는 경우에 유용합니다.
선택적 설치 지침
코드 투어
환경을 설정하세요. 빠른 시작: Lightning 웹 구성 요소 Trailhead 프로젝트의 단계를 따르십시오. 단계는 다음과 같습니다.
Trailhead 놀이터에서 Dev Hub를 활성화하세요.
Salesforce CLI 설치
비주얼 스튜디오 코드 설치
Lightning 웹 구성 요소 확장을 포함하여 Visual Studio Code Salesforce 확장을 설치합니다.
아직 수행하지 않은 경우 허브 조직을 승인하고 별칭(아래 명령에서 myhuborg )을 제공합니다.
sf org login web -d -a myhuborg
lwc-recipes 저장소를 복제합니다.
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
스크래치 조직을 만들고 별칭을 제공합니다(아래 명령의 lwc-recipes ).
sf org create scratch -d -f config/project-scratch-def.json -a lwc-recipes
스크래치 조직에 앱을 푸시합니다.
sf project deploy start
기본 사용자에게 레시피 권한 세트를 할당합니다.
sf org assign permset -n recipes
샘플 데이터 가져오기:
sf data tree import -p ./data/data-plan.json
스크래치 조직을 엽니다.
sf org open
설정 의 테마 및 브랜딩 아래에서 Recipes Lite 또는 Recipes Blue 테마를 활성화합니다.
앱 실행기에서 모두 보기를 클릭한 다음 LWC 앱을 선택합니다.
스크래치 조직보다 더 영구적인 환경에 앱을 배포하고 싶거나 로컬 개발 도구를 설치하지 않으려는 경우 이 지침을 따르세요. 무료 Developer Edition 조직 또는 Trailhead Playground와 같이 소스 추적되지 않는 조직을 사용할 수 있습니다.
이전에 수행한 작업과의 충돌을 피하기 위해 새로운 환경에서 시작하십시오.
조직에 로그인
조직에 레시피 잠금 해제 패키지를 설치하려면 이 링크를 클릭하세요.
모든 사용자용 설치를 선택하세요.
계정 및 연락처 데이터 가져오기:
Accounts-Contacts.csv 파일에 액세스하려면 여기를 클릭하세요. 브라우저 창을 마우스 오른쪽 버튼으로 클릭하고 파일을 Accounts-Contacts.csv 로 저장합니다.
설정 에서 빠른 찾기 상자에 데이터 가져오기를 입력하고 데이터 가져오기 마법사 를 클릭합니다.
마법사 시작 을 클릭합니다.
계정 및 연락처 를 클릭하고 새 레코드 추가 를 클릭합니다.
방금 저장한 Accounts-Contacts.csv 파일을 업로드 영역으로 드래그하세요.
다음 , 다음 및 가져오기 시작 을 클릭합니다.
Trailhead에서 Quick Start를 시도하는 경우 이 단계가 필요하지만 그렇지 않은 경우 다음을 건너뜁니다.
설정 > 사용자 > 권한 집합 으로 이동합니다.
레시피 를 클릭합니다.
할당 관리 를 클릭합니다.
사용자를 확인하고 할당 추가를 클릭합니다.
설정 의 테마 및 브랜딩 아래에서 Recipes Lite 또는 Recipes Blue 테마를 활성화합니다.
앱 실행기에서 모두 보기를 클릭한 다음 LWC Recipes 앱을 선택합니다.
스크래치 조직보다 더 영구적인 환경에 앱을 배포하려면 이 지침을 따르세요. 여기에는 무료 Developer Edition 조직 또는 Trailhead Playground와 같이 소스 추적되지 않는 조직이 포함됩니다.
이전 작업과 충돌하지 않도록 새로운 환경에서 시작하세요.
다음 저장소를 복제하세요.
git clone https://github.com/trailheadapps/lwc-recipes cd lwc-recipes
Trailhead Playground 또는 개발자 조직에 권한을 부여하고 별칭(아래 명령의 mydevorg )을 제공합니다.
sf org login web -s -a mydevorg
앱을 배포하려면 터미널에서 이 명령을 실행하세요.
sf project deploy start -d force-app
기본 사용자에게 recipes 권한 세트를 할당합니다.
sf org assign permset -n recipes
일부 샘플 데이터를 가져옵니다.
sf data tree import -p ./data/data-plan.json
조직이 아직 열려 있지 않은 경우 지금 엽니다.
sf org open -o mydevorg
설정 의 테마 및 브랜딩 아래에서 Recipes Lite 또는 Recipes Blue 테마를 활성화합니다.
앱 실행기에서 LWC 앱을 선택합니다.
이 저장소에는 최신 웹 개발 도구를 Salesforce 개발 프로세스 또는 지속적인 통합/지속적 배포 프로세스에 통합하려는 경우 관련되는 여러 파일이 포함되어 있습니다.
Prettier는 코드 기반 전체에서 일관된 형식을 보장하는 데 사용되는 코드 포맷터입니다. Visual Studio Code와 함께 Prettier를 사용하려면 Visual Studio Code Marketplace에서 이 확장을 설치하세요. .prettierignore 및 .prettierrc 파일은 Prettier 포맷터의 동작을 제어하기 위해 이 저장소의 일부로 제공됩니다.
경고 현재 Apex Prettier 플러그인 버전을 사용하려면 Java 11 이상을 설치해야 합니다.
ESLint는 문체 오류와 잘못된 구문을 식별하는 데 사용되는 널리 사용되는 JavaScript 린팅 도구입니다. Visual Studio Code에서 ESLint를 사용하려면 Visual Studio Code Marketplace에서 이 확장을 설치하세요. .eslintignore 파일은 Lightning 웹 구성 요소 개발의 맥락에서 Linting 프로세스에서 특정 파일을 제외하기 위해 이 저장소의 일부로 제공됩니다.
이 리포지토리에는 변경 사항을 git commit 때마다 Prettier 및 ESLint를 실행하여 코드 형식 지정 및 Linting을 적용하는 커밋 전 후크를 쉽게 설정할 수 있는 package.json 파일도 함께 제공됩니다.
서식 지정 및 Linting 사전 커밋 후크를 설정하려면 다음 안내를 따르세요.
Node.js를 아직 설치하지 않았다면 설치하세요.
프로젝트의 루트 폴더에서 npm install 실행하여 ESLint 및 Prettier 모듈을 설치합니다. (참고: Mac 사용자는 이 명령을 실행하기 전에 Xcode 명령줄 도구가 설치되어 있는지 확인해야 합니다.)
Prettier와 ESLint는 이제 변경 사항을 커밋할 때마다 자동으로 실행됩니다. Linting 오류가 감지되면 커밋이 실패합니다. 다음 명령을 사용하여 명령줄에서 서식 지정 및 Linting을 실행할 수도 있습니다(전체 목록은 package.json 확인).
npm run lint npm run prettier
코드 둘러보기는 앱 코드를 더 잘 이해하는 데 도움이 되는 안내식 연습입니다. 이를 실행하려면 CodeTour VSCode 확장을 설치하십시오.
