개발자 옥수수의 방

Salesforce 프론트엔드 개발: Lightning Web Components (LWC) - 데코레이터DecoratorsLWC에서 데코레이터는 클래스의 속성이나 메서드에 동작을 추가하는 데 사용됩니다. @api, @track, @wire가 대표적인 데코레이터입니다.@api: 공개 속성이나 메서드로 지정하여 부모 컴포넌트에서 접근할 수 있게 합니다.@track: 트랙킹되는 속성으로 지정하여 변경 시 자동으로 리렌더링되도록 합니다.@wire: Apex 메서드나 Salesforce 데이터와 연결합니다.@api 데코레이터@api 데코레이터는 컴포넌트의 속성이나 메서드를 외부에서 접근 가능하도록 만듭니다. 부모 컴포넌트는 자식 컴포넌트의 @api 속성을 변경하거나 메서드를 호출할 수 있습니다. 예제// chi..

Salesforce 프론트엔드 개발: Lightning Web Components (LWC) - 슬롯SlotsLWC에서 슬롯(Slot)은 부모 컴포넌트가 자식 컴포넌트의 특정 위치에 콘텐츠를 삽입할 수 있도록 하는 기능입니다. 이를 통해 보다 유연한 컴포넌트 구성이 가능해집니다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트를 사용할 때, 일부 영역에는 부모 컴포넌트에서 제공하는 콘텐츠를 삽입하고, 다른 영역에는 자식 컴포넌트에서 제공하는 콘텐츠를 삽입할 수 있습니다. 슬롯 예제:자식 컴포넌트 (childComponent.html): 자식 컴포넌트 자바스크립트 (childComponent.js):import { LightningElement } fro..

: Salesforce 프론트엔드 개발: Lightning Web Components (LWC) - API 통합  Apex 호출 LWC에서는 Apex를 호출하여 Salesforce 서버와 통신할 수 있습니다. 이를 통해 서버 측 데이터를 가져오거나 저장할 수 있습니다.  Apex 클래스:Apex 클래스를 사용하여 서버 측 로직을 정의할 수 있습니다. 이를 통해 데이터베이스에서 데이터를 쿼리하거나 DML 작업을 수행할 수 있습니다.아래 예시는 연락처 데이터를 쿼리하는 예시입니다:public with sharing class ContactController { @AuraEnabled(cacheable=true) public static List getContacts() { return..

Salesforce 프론트엔드 개발: Lightning Web Components (LWC) - 이벤트 처리 이벤트 디스패치 : 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위해 커스텀 이벤트를 디스패치할 수 있습니다.이벤트는 컴포넌트 간의 데이터 전달을 가능하게 합니다.  이벤트 디스패치 (자식 컴포넌트): 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위해 커스텀 이벤트를 디스패치할 수 있습니다. 이벤트 디스패치를 통해 컴포넌트 간에 통신할 수 있습니다. HTML 템플릿 (childComponent.html): Click me자바스크립트 클래스 (childComponent.js):import { LightningElement } from 'lwc';export default cla..

Salesforce 프론트엔드 개발: Lightning Web Components (LWC) - 조건부 렌더링조건부 렌더링조건부 렌더링을 위해 if:true, if:false, lwc:if, lwc:elseif, lwc:else 등의 디렉티브를 사용합니다.if:true와 if:false는 단일 조건에 따라 요소를 렌더링합니다.HTML 템플릿 (HTML 파일): The content is visible The content is hidden Toggle Visibility자바스크립트 클래스 (JS 파일):import { LightningElement, track } from 'lwc';export default class ConditionalRen..

Lightning Web Components (LWC) - 기본 마크업 HTML 템플릿 (HTML 파일): LWC 컴포넌트의 HTML 템플릿은 컴포넌트의 UI를 정의합니다. 이 템플릿은 일반적인 HTML과 유사하지만 몇 가지 디렉티브를 사용하여 컴포넌트의 동적 동작을 제어할 수 있습니다. Hello, {name}! 자바스크립트 (JS 파일):   LWC 컴포넌트의 자바스크립트 파일은 컴포넌트의 동작을 정의합니다. 이 파일에는 컴포넌트의 상태와 메서드가 포함됩니다. 또한, Lightning Web Components 프레임워크에서 제공하는 특별한 데코레이터를 사용하여 컴포넌트를 정의하고 구성합니다. import { LightningElement, track } from 'lwc';export def..