샘플 앱 도구에 대해 알아보기

참고

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

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

이 단계에서는 대부분의 샘플 앱에서 사용되고 있는 다양한 도구와 구성을 살펴볼 것입니다. 이를 위해 LWC 레시피 샘플 앱의 도구를 살펴보겠습니다. 

1. 브라우저에서 github.com/trailheadapps로 이동합니다.
2. LWC 레시피 앱 타일에서 LWC Recipes라는 제목을 클릭하여 lwc-recipes 리포지토리로 이동합니다.

Salesforce 프로젝트 구성

먼저, sfdx-project.json 구성 파일에서 Salesforce 프로젝트 설정에 대해 알아보겠습니다.

1. 링크를 클릭하면 sfdx-project.json의 콘텐츠를 볼 수 있습니다.

{
  "packageDirectories": [
    {
      "path": "force-app",
      "default": true,
      "package": "LWCRecipes",
      "versionName": "Summer '23",
      "versionNumber": "58.0.0.NEXT"
    }
  ],
  "namespace": "",
  "sourceApiVersion": "58.0",
  "sfdcLoginUrl": "https://login.salesforce.com",
  "packageAliases": {
    "LWCRecipes": "0Ho3t000000KywNCAS",
    "LWCRecipes@57.0.0-2": "04t3t000002wSUgAAM",
    "LWCRecipes@58.0.0-5": "04t3t0000037toQAAQ",
    "LWCRecipes@58.0.0-6": "04t3t0000037tozAAA",
    "LWCRecipes@58.0.0-7": "04t3t0000037tp9AAA",
    "LWCRecipes@58.0.0-8": "04t3t0000037tpEAAQ"
  }
}

2. packageDirectories 구성에서 이 앱에 대해 잠금 해제된 패키지를 설정한 것을 확인할 수 있습니다. 여기에는 패키지 이름, 패키지 메타데이터의 파일 경로 및 버전 정보에 대한 구성이 포함됩니다.
3. sourceApiVersion 구성도 참고하세요. 원칙적으로 샘플 앱은 구성 파일과 모든 메타데이터에 걸쳐 현재 주요 릴리스의 API 버전으로 업데이트됩니다. 따라서 sourceApiVersion에는 다른 값이 표시될 수 있습니다.
4. 브라우저에서 Back(뒤로 가기) 버튼을 클릭합니다.

다음으로 코드 품질 도구를 어떻게 설정했는지 살펴보겠습니다. 

코드 품질 도구 설정

Salesforce 명령줄에 포함된 도구 외에도 Salesforce는 npm과 함께 실행되는 도구를 사용합니다. 따라서 대부분의 프로젝트에서 런타임 Salesforce 코드에 Node.js를 사용하지 않더라도 package.json이 있어 npm으로 개발자 도구를 가져오고 구성할 수 있습니다.  

npm은 Node.js의 기본 패키지 관리자로, 패키지 레지스트리, 명령줄 인터페이스(CLI), 웹 사이트 npmjs.com으로 구성되어 있습니다. npm은 개발자 도구는 물론, Salesforce CLI 및 오픈 CLI 프레임워크(OCLIF)를 비롯한 범용 명령줄 도구까지 구현하는 앱 구축에 광범위하게 사용되고 있습니다.

샘플 앱에서는 코드 린팅, 코드 서식 지정, 유닛 테스트 및 애플리케이션 수명 주기 관리(ALM) 자동화를 수행하는 여러 개발자 도구와 함께 npm 명령줄을 사용합니다. npm을 설치하는 가장 쉬운 방법은 npm을 번들로 제공하는 Node.js를 설치하는 것입니다. npm에 대한 자세한 내용은 npmjs.com을 방문해 보세요. 

1. 링크를 클릭하면 package.json의 콘텐츠를 볼 수 있습니다.
2. 개발자 도구만 사용하므로 dependencies(종속성)은 없다는 점에 유의하세요.
3. devDependencies 구성을 보면 도구의 일부로 사용하고 있는 패키지를 확인할 수 있습니다.
4. Salesforce에서 사용하는 높은 수준의 패키지는 다음과 같습니다.
   • prettier: 코드 서식 지정용
   • eslint: 코드 린팅용
   • @salesforce/sfdx-lwc-jest: Lightning 웹 구성 요소 테스트를 위한 Jest 확장 기능
   • husky: 버전 관리에 커밋하기 전에 코드를 확인하는 작업 실행
5. 또한 scripts 구성에 특정 공통 명령어를 캡슐화했습니다. 각각의 사례에서 명령은 npm run을 사용하여 실행됩니다. 한 예로, test:unit 스크립트 키를 확인해 보세요. 명령줄에서 npm run test:unit을 실행하여 Lightning 웹 구성 요소 유닛 테스트를 실행할 수 있습니다. 명령줄은 다음과 같습니다.

6. 브라우저에서 Back(뒤로 가기) 버튼을 클릭하여 package.json 둘러보기를 마칩니다.

이러한 각 스크립트를 통해 프로젝트에 설치된 다양한 도구를 실행하는 방법을 확인할 수 있습니다. 

유닛 테스트 구성

몇 가지 구성 방법을 살펴보겠습니다. Salesforce는 Jest 테스트 라이브러리를 사용하여 Lightning 웹 구성 요소 유닛 테스트를 실행합니다. 이에 따라 sfdx-lwc-jest라는 LWC 전용 확장 기능을 만들었습니다. 

1. 링크를 클릭하면 jest.config.js의 콘텐츠를 확인할 수 있습니다.
2. moduleNameMapper JavaScript 개체를 사용하여 sfdx-lwc-jest와 함께 제공되는 기본 모형을 확장할 수 있습니다. 이러한 모의 확장 기능은 여기에 정의되어 있습니다.

moduleNameMapper: {
  /* CSS library import fix in test context. See:
  https://github.com/salesforce/sfdx-lwc-jest/issues/288) */
  '^c/cssLibrary$':
      '/force-app/main/default/lwc/cssLibrary/cssLibrary.css',
  // Jest mocks
  '^@salesforce/apex$': '/force-app/test/jest-mocks/apex',
  '^@salesforce/schema$': '/force-app/test/jest-mocks/schema',
  '^lightning/navigation$':
      '/force-app/test/jest-mocks/lightning/navigation',
  '^lightning/platformShowToastEvent$':
      '/force-app/test/jest-mocks/lightning/platformShowToastEvent',
  '^lightning/uiRecordApi$':
      '/force-app/test/jest-mocks/lightning/uiRecordApi',
  '^lightning/messageService$':
      '/force-app/test/jest-mocks/lightning/messageService',
  '^lightning/actions$':
      '/force-app/test/jest-mocks/lightning/actions',
  '^lightning/alert$':
      '/force-app/test/jest-mocks/lightning/alert',
  '^lightning/confirm$':
      '/force-app/test/jest-mocks/lightning/confirm',
  '^lightning/prompt$':
      '/force-app/test/jest-mocks/lightning/prompt',
  '^lightning/modal*':
      '/force-app/test/jest-mocks/lightning/modal'
},

3. ^lightning/navigation$ 키는 모형의 위치를 <rootDir>/force-app/test/jest-mocks/lightning/navigation으로 정의한다는 점에 주목하세요. GitHub 리포지토리에서 이 모의 JS 코드를 찾아보겠습니다.
4. 브라우저에서 Back(뒤로 가기) 버튼을 클릭합니다.
5. Force-app,, test/jest-mocks, lightning 링크를 클릭하면 모든 Lightning 웹 구성 요소 서비스의 모형을 찾을 수 있습니다.
6. 링크를 클릭해 navigation.js 파일 콘텐츠를 엽니다.
7. 여기에서 Lightning NavigationMixin에서 제공하는 내보내기된 함수 일부가 Jest 테스트에서 어떻게 모의로 사용되었는지 확인할 수 있습니다.
8. 브라우저에서 Back(뒤로) 버튼을 네 번 클릭하여 프로젝트 루트 디렉터리로 돌아갑니다.

자동화된 코드 서식 지정 구성

지금까지 sfdx-lwc-jest 도구를 구성하는 방법을 살펴보았고, 이제 Prettier 코드 서식 지정 도구의 구성에 대해 알아보겠습니다. sfdx-lwc-jest는 LWC를 테스트하는 용도로만 사용되지만, Prettier는 다양한 파일에서 코드 서식을 지정하는 작업을 수행합니다. XML 및 Apex용 플러그인도 추가했습니다. LWC 전용 서식 지정 규칙은 Prettier과 함께 번들로 제공됩니다.

package.json을 다시 살펴보면, 다음 줄에서 다양한 파일 유형에 대해 Prettier 스크립트를 실행하도록 구성한 것을 볼 수 있습니다. 

"prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\""

Prettier 도구를 구성하는 방법을 살펴봅시다. 구성에 대한 자세한 내용은 Prettier 문서에서 확인할 수 있습니다. 

1. 링크를 클릭해 .prettierrc 파일을 엽니다.
2. 후행 쉼표 적용, 작은따옴표 및 탭 너비 허용 등 코드 서식을 지정하는 데 있어서 Prettier를 설정하는 방법에 대한 구성에 유의합니다.
3. 또한 overrides(재정의) 키를 사용하여 사용자 정의 구문 분석 규칙을 만들 수도 있습니다. 예를 들어, 중괄호로 둘러싸인 HTML 속성을 처리하기 위해 lwc 파서를 사용할 수 있습니다.

"trailingComma": "none",
"singleQuote": true,
"tabWidth": 4,
"overrides": [
    {
        "files": "**/lwc/**/*.html",
        "options": { "parser": "lwc" }
    },
    {
        "files": "*.{cmp,page,component}",
        "options": { "parser": "html" }
    }
]

4. 브라우저에서 Back(뒤로) 버튼을 클릭하여 루트 디렉터리로 돌아갑니다.

무시하기

많은 도구에서 실행되는 파일에 대하여 예외를 만들 수 있습니다. Git, Prettier, ESLint 및 Salesforce CLI 등은 모두 어떤 파일을 무시할 수 있는지 알고 있어야 합니다. 구성 파일 중 하나를 살펴보겠습니다. 

Salesforce 프로젝트를 개발할 때 일부 조직(스크래치 조직)은 소스를 추적하는데, 이는 API가 로컬 및 조직에서 변경된 사항을 추적한다는 의미입니다. 그런 다음 sf project deploy start 또는 sf project retrieve start를 사용하여 조직과 로컬 프로젝트 간의 동기화를 자동으로 수행할 수 있습니다. 프로젝트에서 자동으로 동기화되지 않도록 하려는 부분은 .forceignore라는 파일에 구성합니다. 

1. .forceignore, .gitignore, .prettierignore 파일에 주목하세요. 여기에는 다양한 도구에 대한 무시 규칙이 정의되어 있습니다.
2. .forceignore를 클릭하여 컨텐츠를 확인합니다.
3. .forceignore에 정의된 항목은 SourceSync API가 추적하거나 동기화하지 않습니다.
4. 프로젝트 구성의 다른 항목 중에서 settings(설정) 메타데이터는 동기화하지 않습니다.
5. 브라우저에서 Back(뒤로) 버튼을 클릭하여 루트 디렉터리로 돌아갑니다.

GitHub 작업

좋은 도구를 사용하면 CI/CD 프로세스에서 도구를 자동으로 호출할 수도 있습니다. Salesforce의 샘플 앱에서는 코드가 병합되고 분기 간에 이동할 때 GitHub 작업을 사용해 이러한 도구의 사용을 자동화합니다. 이 파일들이 어디에 있는지 찾아보고 앞서 살펴본 도구를 어떻게 사용하는지 확인해 보겠습니다. 또한 리포지토리에서 이러한 작업의 실행 이력을 살펴볼 것입니다. 

GitHub 작업은 GitHub에 내장된 기능으로, GitHub 내에서 전체 CI/CD 프로세스를 정의할 수 있습니다. 하지만 Salesforce 개발자 도구는 CI/CD 도구와 무관합니다. 선호하는 다른 CI/CD 도구가 있는 경우, 다른 예제 프로젝트 리포지토리에 대한 참조가 있는 문서를 읽어보세요. 

1. .github 및 workflows의 디렉터리 링크를 클릭해 github CI 워크플로가 있는 YAML 파일을 확인합니다.
2. ci-pr.yml 링크를 클릭해 파일 콘텐츠를 확인합니다.
3. 파일을 살펴보고 run:npm run prettier:verify라는 줄을 찾습니다.
4. CI 프로세스에서 Prettier는 코드가 설정에 지정된 서식 규칙을 준수하는지 확인합니다.
5. GitHub UI 상단에서 Actions(작업) 탭을 선택합니다.

6. 모든 GitHub 작업 워크플로 목록은 왼쪽에 있습니다. CI를 클릭하여 해당 워크플로가 실행된 모든 시간을 확인합니다.

지금까지 lwc-recipes GitHub 리포지토리의 도구 설정에 대해 알아보았습니다. 이제 샘플 앱에서 도구를 사용할 준비가 되었습니다. 도구 구성은 최대한 동일하게 유지하지만, 다른 구성을 사용하는 앱도 있습니다. 이 트레일의 다른 프로젝트를 완료하여 해당 앱에 대해 자세히 알아보세요.

Salesforce의 오픈 소스에 대한 한마디

trailheadapps github org에 있는 샘플은 Salesforce 개발자 관계 팀에서 개발 및 유지 관리합니다. 모든 앱은 모범 사례에 따라 구축되었으며, 실제 프로젝트에서 기대할 수 있는 수준의 도구 기능을 선보입니다.

이러한 샘플 앱을 살펴본 다음 Salesforce 팀에서 더 많은 코드를 찾아보고 더 깊이 파고들어 보시길 바랍니다. 코드 샘플 및 SDK 웹 페이지에서 오픈 소스 코드를 확인할 수 있습니다.

이 단계에서는 여러분의 작업물을 확인하지 않습니다. Verify step to earn 100 points(단계를 확인하고 100포인트 획득)를 클릭하여 프로젝트를 완료하세요.