파스타집

LWC의 모듈화 방법은 두 가지가 있으며 서로 장단점이 있다. JS파일을 분리하여 Import해서 사용하는 방법 장점 필요한 기능만 import하여 메모리를 아낄 수 있음 다중 import가 가능하기 때문에 모듈 정의가 비교적 쉬움 단점: this의 컨텍스트 전환이 발생함 import해야하는 기능이 많아지는 경우 import문이 장황해짐 import된 모듈은 Read-Only이므로 내부 멤버의 변경이 불가능함 JS 클래스를 정의하여 상속받아 사용하는 방법 장점 this의 컨텍스트를 그대로 사용할 수 있음 import문이 간결해짐 내부 멤버의 변경이 자유로움 단점 정의된 모든 것들이 상속되므로 메모리가 낭비될 수 있음 다중 상속이 불가능하기 때문에 클래스 정의가 까다로움 LWC의 플랫폼 이벤트인 ShowT..

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML. LWC는 Web Component의 핵심 표준 기술을 활용하며 Salesforce가 지원하는 브..

다음과 같은 코드가 있다. HTML {item.name} JS import {LightningElement} from 'lwc'; export default class WhatIsKey extends LightningElement { itemList = [ {id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 3, name: 'c'} ]; } Aura에 이 있다면 LWC에는 가 있다. 화면에 리스트를 렌더링할 때 사용되는 구문인데 Aura에는 없던 요상한 놈이 보인다. 바로 태그의 key attribute. 이 녀석이 반복문 내 최상단 레벨의 엘리먼트들에 명시되어 있지 않으면 Deploy 자체가 안된다. 또한 key를 리스트의 index로 할당하는 경우에도 마찬가지로 Deplo..

customSearch.html {data.label} customSearch.js import {LightningElement, track} from 'lwc'; const SLDS_HIDE = 'slds-hide'; const SELECTED = 'selected'; export default class CustomSearch extends LightningElement { @track dataList = [ {label: 'GenePoint', value: '0015h000015pZvtAAE'}, {label: 'United Oil & Gas, UK', value: '0015h000015pZvrAAE'}, {label: 'United Oil & Gas, Singapore', value: '0015h..