# lwc
Lightning Web Components Basics
2023-09-15 Discover Lightning Web Components Trailhead: https://trailhead.salesforce.com/content/learn/modules/lightning-web-components-basics/discover-lightning-web-components 학습목표: Lightning Web Components 프로그래밍 모델을 설명할 수 있다. LWC를 사용함에 얻는 이점들을 나열할 수 있다. LWC개발을 시작하기 위해 무엇이 필요한지 찾을 수 있다. Why LWC? 현대 브라우저들은 웹 표준을 기반으로 하고 있으며, 웹 표준은 점점 발전하여 브라우저가 유저들에게 제공할 수 있는 것들을 점차 늘리고 있다. LWC는 Web Components 표준을 사용하며 브라우저에서 natively하게 동작하는 코드로 작성이 된다. https://github.com/WICG/webcom
LWC에서 자주 쓰는 표현들
개인적으로 자주 쓰는 표현들 정리 ● html ＊선택문 ＊반복문 ● JS ＊반복문 ＊값이 포함되어있는지 찾기 ＊클래스 관련 * 비동기 처리 * get, set * 자주 사용하는 import 외부 페이지 링크 함수 Render 이후 한번만 실행 ● CSS
innerHTML을 사용해 js에서 모달 만들기
1. 모달을 불러올 버튼이 있는 컴포넌트 만들기 1-1) lwc036ReuseModal.html 1-1) lwc036ReuseModal.js 1-1) lwc036ReuseModal.js-meta.xml 2. 모달을 만드는 JS 만들기 deModal.js파일을 만들어 위와 같은 구조로 만들었습니다. 화면 확인 뒷 배경은 무시해주세요 ↑ GIF입니다 안보이면 새로고침 +) 만약 transform: scale(0.85);이 없다면 화면이 어색해집니다. 
LWC에서 chart.js 사용하기
0. Static Resource에 Chart.js 업로드 Chart.js LWC로 미리 구현하신 분이 계셔서 이 분의 정적 자원을 다운받아 올렸습니다. 출처 : SFDC project with LWC and ChartJs example 1. HTML 작성 2. JS 작성 3. 결과 확인 
스크롤 시 올라오는 효과 추가하기
1. HTML 작성 2. JS 작성 3. CSS 작성 4. 결과 화면 확인 ↑ 스샷 ↑ 동작화면 GIF > JS는 아래 사이트 참고했습니다 Fade in on scroll vanilla Javascript
중복 컨텐츠를 보여주는 메뉴 만들기
1. 메뉴에 맞는 리스트를 새로 만들어 저장하고, 새로운 리스트를 화면에 보여주는 방식 1-1) JS 1-2) HTML 1-3) CSS 1-4) 화면 확인 + data-value 대신 data-index값 사용하기 현재 코드로는 value값이 고스란히 html에 보이고 있기 때문에, index값을 받아와 List의 index번째의 value값을 받아오도록 수정 
Aura 컴포넌트를 LWC 컴포넌트로 변경하기
예전에 만들어 둔 것 스샷으로만 정리해서 올립니다. 자세한 것은 공식 링크 참고해주세요. 공식 링크 https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.migrate_markup 1. 속성 사용 2. 최초 실행 3. 조건 4. 반복문
재사용 LWC 만들기
0. 사용하는 js나 CSS의 위치를 파악한다. 만약 부모로 사용될 컴포넌트에 없고 라이브러리나 다른 파일로 따로 있다면 아래 링크를 통해 참고합니다. HTML -> LWC 세팅 참고 1. 컴포넌트로 만들 영역을 정한다. 화면상 반복되는 부분이나, 여러번 재사용되는 부분을 공통 컴포넌트로 만들 영역으로 정합니다. 영화에 대한 내용은 0627 기준 메가박스에서 가져왔습니다. https://www.megabox.co.kr/movie 2. 자식 컴포넌트를 만들어 영역 HTML과 CSS를 복붙한다. 
왜 되는지 모르겠지만 작동이 되길래 써둡니다. 정확하지 않습니다!! Sites에서만 가능합니다. 1. JS 다운로드 하기 공식 사이트에서 Zip 파일을 다운받습니다. 간단한 테스트용으로 gsap.min.js 파일만 꺼내 다른 폴더에 따로 빼둡니다. 이 때 static Resource에 등록할 수 있도록 **이름을 gsap.js로 바꿔주었습니다.
Render Lists
#for:each for:item 을 통해 이름 지정 key={uniqueId} for:index="index" //Accesses the current item's zero-based index. #iterator first / last를 통해 첫번째 항목과 마지막 항목에 대한 별도의 액션을 부여할 수 있다. key={uniqueId} iterator:iteratorName={array} iteratorName.value.propertyName iteratorName.index iteratorName.first iteratorName.last
LWC에 라이브러리 붙이기
# LWC에 직접 라이브러리 임포트 static resource에 타사 라이브러리 업로드하고 import하기 platformResourceLoader 모듈에서 메서드 가져오기 LWC에 DOM이 수동으로 삽입되었음을 알린다 // 라이브러리 로드하고 then에서 함수 호출 단, LWC에서 사용하는 라이브러리는 Lightning Locker 요구사항을 충족해야 한다. # Visualforce를 통해 라이브러리를 붙이고 LWC에서 VF 호출하기 (Lightning Locker 요구사항을 충족하지 못했을 경우) LWS에서 같은 Origin Property 에 한해서 iframe Content 접근에 대한 권한을 허용하기 때문에 event msg
[LWC] Custom Event
CustomEvent란? Custom Event는 자바스크립트에서 DOM을 조작할 때 기본적으로 지원하는 이벤트가 아닌 직접 원하는 때에 이벤트를 발생하고 싶을 때 사용된다. LWC도 마찬가지로 Custom Event를 통해 사용자가 원하는 이벤트를 만들 수 있다. 이벤트 생성 new 키워드를 통해 Custom Event 객체를 생성해준다. 필자는 next라는 이벤트 이름으로 Custom Event를 생성하였다. 이벤트 트리거 dispatchEvent 메소드를 통해 이벤트를 발생시킨다. 이벤트 등록 on키워드를 통해 event를 등록한다. 1) 위에서 next라는 이벤트를 생성했으므로 on키워드 뒤에 next를 붙여서 작성하고 해당 이벤트가 트리거 됬을 때, 실행할 함수를 등록해 주었다. 2
아이콘 버튼 주변이 클릭되는 현상
lightning-button-icon 주변 클릭 되는 케이스 해결 방법 => slds-p-small 을 감싸줘야함 참고 : https://salesforce.stackexchange.com/questions/293609/how-to-reduce-clickable-area-of-lightning-button --
XML 파일에서 Elements 정의하기
● LWC 생성시 나오는 기본 .js-meta.xml 파일 구조 ● 예제에서 사용한 Elements 1. apiVersion 2. isExposed 3. masterLabel, description 4. capabilities 5. targets 6. targetConfigs
Record에 추가한 이미지를 LWC에서 불러오기
● 실행 화면 미리보기 ● 세팅과 코드 작성 1. layout에 Related list 추가하기 → Object Manager > Page Layout > Related Lists > Notes & Attachments 2. Set Up에서 설정 변경 → General Settings > Salesforce Files S
Custom 더보기 버튼 만들기
● 실행 화면 미리보기 ● 코드 작성 ※ lwc026CustomPaging.html ※ lwc026CustomPaging.js ※ lwc026CustomPaging.css ● 실행 화면 확인
LWC 화면에 남은 시간 표시하기 (setInterval)
● 결과화면 미리보기 ● 코드 작성 ※ lwc024UseTimer.html ※ lwc024UseTimer.js > 타이머 시간을 10초로 설정했습니다 ※ lwc024UseTimer.css ● 결과 화면 확인
LWC에서 검색 기능 추가한 Custom Combobox + Checkbox 만들기
● 실행 화면 미리보기 ● 코드 작성하기 ※ lwc023CreateCustomComboboxGroup.html ※ lwc023CreateCustomComboboxGroup.js ※ lwc023CreateCustomComboboxGroup.css ※ tempData.js (데이터 파일) ● 결과 확인하기 > 여러가지 방법이 있으니 본인에게 맞는 방법을 사용하면 좋을 것 같습니다.
LWR에서 Salesforce CSS 덮어씌우기
● LWC에서 slds로 시작하는 class의 css 덮어씌우기 1. 코드 작성 **※ lwc022overwriteSiteCss.html ※ lwc022overwriteSiteCss.css ※ lwc022overwriteSiteCss.js-meta.xml 2. Static Resource에 올리기 → CSS파일만 따로 업로드 했습니다. → Cache Control은 Public으로 지정. 3. 코드 수정 ※ lwc022overwriteSiteCss.js → Static Resource 파일을 불러와 CSS를 적용시킵니다. 4. 결과 확인 ![](https://velog.velcdn.com/images/ahncheer/post/f