Salesforce 언어로 코딩하기
학습 목표
이 유닛을 완료하면 다음을 수행할 수 있습니다.
- Salesforce로 개발하는 데 도움이 되는 언어를 나열합니다.
- 이 단원에서 논의하는 각 언어의 이점을 설명합니다.
- Apex가 Salesforce에서 개발을 지원하는 방법을 설명합니다.
선택할 수 있는 옵션 알아보기
지금까지 노코드 및 로우코드 사용자 정의 및 자동화를 사용하여 Salesforce Platform에서 프론트엔드 개발을 하는 방법을 배웠습니다. 코딩을 하는 분이라면 이 유닛에 잘 찾아오셨습니다. 코딩을 하지 않더라도 코딩 담당자와 소통하는 데 도움이 되는 Salesforce 개발의 핵심 요소에 대해 알아볼 수 있습니다.
Salesforce Platform으로 개발할 때 사용할 수 있는 프로그래밍 언어로는 다음을 포함하여 여러 가지가 있습니다.
- Lightning 웹 구성 요소 프레임워크: AngularJS 또는 React와 유사한 JavaScript 기반 사용자 인터페이스(UI) 개발 프레임워크.
- Apex: 구문이 Java와 유사한 Salesforce의 독자적인 프로그래밍 언어.
- Node.js: 확장 가능한 네트워크 애플리케이션을 구축하도록 설계된 비동기식 이벤트 중심 JavaScript 런타임.
DreamHouse 샘플 앱에서 이러한 기술을 가장 잘 보여주는 부분을 살펴보겠습니다.
Lightning 웹 구성 요소
Lightning 웹 구성 요소(LWC)는 데스크탑 및 모바일용 UI 개발 프레임워크입니다. 이름에서 알 수 있듯이, 이 프레임워크는 구성 요소를 기반으로 UI 개발에 접근하는 방식입니다. 사전 구축 및 사용자 정의 Lightning 웹 구성 요소를 사용하면 세련되고 일관된 앱 UI를 빠르게 개발할 수 있습니다.
AngularJS, React 또는 Polymer 같은 프레임워크에 익숙하다면 Lightning 웹 구성 요소에 무엇을 기대할 수 있는지 잘 알고 있을 것입니다. 물론 Lightning 웹 구성 요소는 Salesforce의 모든 비즈니스 데이터와 함께 사용할 준비가 되어 있다는 장점이 있습니다.
참고:
Lightning 웹 구성 요소에 대해 알아가다 보면 대문자 표기 방식에 차이가 있음을 알 수 있습니다. Salesforce에서는 Lightning 웹 구성 요소 프레임워크 프로그래밍 모델을 언급할 때 모든 단어를 대문자로 표시합니다. Salesforce에서는 구성 요소 자체를 Lightning 웹 구성 요소라고 할 경우 첫 단어만 대문자로 사용합니다.
지난 유닛의 Lightning 앱 빌더에서 살펴본 것과 같은 속성을 살펴보되, 이번에는 DreamHouse 앱의 속성 탭에서 살펴보겠습니다. 이 페이지에는 많은 Lightning 웹 구성 요소가 있지만 여기서는 특히 지도라는 하나의 맞춤형 구성 요소에 중점을 둡니다. 이 지도는 간단하게 부동산의 위치를 표시합니다. 사용자는 지도를 확대하여 부동산과 주변 환경에 대한 자세한 정보를 볼 수 있습니다.
이 구성 요소가 어떻게 만들어졌는지 살펴보겠습니다.
여기까지 Trailhead Playground를 잘 따라오셨다면 정말 대단한 것입니다. 이제부터는 Visual Studio Code를 사용하여 DreamHouse 앱 내부의 코드 스크린샷을 보여 드리겠습니다.
Salesforce Extension Pack과 함께 제공되는 Visual Studio Code(VS Code)는 조직에서 코드를 개발하고 디버깅하고 테스트하기 위해 사용할 수 있는 Salesforce 통합 개발 환경(IDE)입니다. 아래 예제에서는 속성 구성 요소, 특히 VS Code의 맵 맞춤형 구성 요소에 대한 코드를 살펴봅니다. 잠시 시간을 내어 몇 가지 필수 요소를 살펴보세요. HTML 파일은 HTML 일부가 저장되는 <template> 태그를 사용합니다.
JavaScript 파일에는 구성 요소의 작동 방식을 정의하는 메서드가 포함되어 있습니다.
Lightning 웹 구성 요소에는 구성 요소의 스타일을 지정하는 .css 파일이 있을 수 있지만, 이 구성 요소에는 .css 파일이 없습니다. VS Code의 왼쪽 열에서는 .xml 파일과 테스트 폴더를 포함하여 이 구성 요소의 번들에 포함된 일부 추가 자산도 볼 수 있습니다.
Lightning 웹 구성 요소의 또 다른 장점은 구성 요소가 모바일에 적합한지 쉽게 확인할 수 있다는 것입니다. 모바일 시뮬레이터를 사용하여 Lightning 웹 구성 요소를 확인하고 디버깅해서 모바일 사용자에게 문제가 발생하지 않도록 하세요.
Lightning 웹 구성 요소에 대한 자세한 정보는 아래 리소스 섹션을 참조하세요.
Apex
Apex는 유형이 명확하게 지정된 객체 지향 프로그래밍 언어로, Salesforce 개발자가 버튼 클릭 및 관련 레코드 업데이트와 같은 시스템 이벤트에 비즈니스 로직을 추가하도록 할 수 있습니다.
앞에서 로우코드 자동화 도구로 사용되는 Flow Builder에 대해 설명했습니다. 이 도구는 로우코드지만, Apex를 작성하여 Flow Builder의 기능을 확장할 수도 있습니다. 또는 Apex만으로 더 복잡한 앱을 구축할 수도 있습니다. 유닛 2에서 보았던, DreamHouse 앱에서 새 부동산 레코드를 생성하기 위해 정보를 수집하는 화면 플로의 코드를 살펴보겠습니다.
Java에서 개발한 적이 있다면 이 클래스의 기능에 대해 대부분 스스로 알아낼 수 있을 것입니다. 다시 말씀드리지만, 이 구현에 대해서는 자세하게 설명하지 않겠습니다. Java와 유사한 구문 외에, 기억할 사항이 몇 개 더 있습니다.
- 각 클래스에는
@InvocableVariable로 주석이 달린 속성이GeocodingAddress및Coordinates내부 클래스에 있습니다. 데이터를 플로에 전달하는 데 이를 사용할 수 있습니다.
- 이제 플로 작업으로 호출할 수 있도록
geocodeAddressesApex 메서드에@InvocableMethod로 주석을 달았습니다.
-
geocodeAddresses메서드는 타사 서비스에 HTTPCallout을 수행하여 주소를 기반으로 속성 좌표를 생성합니다.
물론 Flow 확장은 Apex를 사용하여 조직의 기능을 향상시킬 수 있는 여러 가지 방법 중 하나일 뿐입니다. 자세한 내용은 아래 리소스 섹션을 참조하세요.
Node.js
Node.js는 확장 가능한 네트워크 애플리케이션을 구축하도록 설계된 비동기 이벤트 중심 JavaScript 런타임입니다. Salesforce에서는 개발자 도구에 Node.js를 사용하지만 플랫폼에서 Node.js로 직접 코딩을 수행하지는 않습니다.
Salesforce CLI에서 force:project:create 명령을 사용하거나 VS Code 명령 팔레트를 사용하여 새 프로젝트를 만드는 경우, 개발자 경험을 개선하기 위해 Node.js 스크립트 및 유틸리티 세트가 프로젝트에 포함되어 있습니다. Node.js는 OS에 구애받지 않는 스크립팅 엔진으로 Prettier로 서식 지정, ESLint로 린팅, Jest로 Lightning 웹 구성 요소 코드 테스트 등의 작업에 사용할 수 있습니다.
지금까지 Salesforce 플랫폼에서 사용자 정의에 사용할 수 있는 몇 가지 일반적인 언어와 프레임워크를 알아보았습니다. 다음 유닛에서는 조직 전체에서 기능을 더욱 확장하기 위해 통합할 수 있는 도구 및 제품을 살펴보겠습니다.
리소스
- Trailhead: Lightning 웹 구성 요소 기초
- Trailhead: Lightning 웹 구성 요소 테스트
- Trailhead: Lightning 웹 구성 요소용 모바일 개발 도구 설정
- Trailhead: 관리자를 위한 Apex 기초 사항
- Trailhead: 워크스페이스 설정 및 개발자 도구 설치하기