[SalesForce + lwc ] loadScript 사용해서 외부 스크립트 함수 가져오기

# vscode와 salesforce 연동하기 - 참고 블로그

https://mokochi.tistory.com/13

 

lwc를 개발하고 있다면 대부분 vscode 에서 연동해서 작업하고 있을것으로 생각됩니다.

 

lwc에서 개발할때 필요에 따라 외부 스크립트 파일의 함수를 가져오거나 혹은 css파일을 가져올때 loadStyle, loadScript 를 사용해서 불러올 수 있습니다.

 

다만 js파일의 조건도 까다롭고 문법도 까다로워서 에러도 많이 발생합니다.

 

이 포스팅에서는 정적파일 추가 및 외부 자바스크립트 파일의 함수를 불러오는 방법을 작성했습니다.

 

■ 세일즈 포스 설정 들어가기

 

우측 상단의 설정에 들어가줍니다.

 

 

■ 설정에서 정적자원 메뉴 들어가기

 

좌측의 메뉴에서 정적을 검색하면  사용자 정의코드 > 정적 자원 메뉴가 있습니다.

여기서 외부의 자바스크립트 파일을 추가해줄겁니다 !

 

먼저 자바스크립트 파일부터 작성해봅시다 !!!

 

 

■ 자바스크립트 파일 작성 및 알집으로 압축하기

 

# 예시의 자바스크립트 코드

window.myLib = (function() {
    return {
        myFunction: function(a, b) {
            return a * b;
        }
    };
}());

 

1. 자바스크립트 파일 작성 후  helloworld.js 파일로 저장합니다.

 

 

 

2. helloworld.js 파일을  helloworld.zip로 압축을 해줍니다.

이 때 파일명에 .js가 들어가면 인식을 못하기 때문에 확인해줘야 합니다.

 

 

 

■ 세일즈포스에서 정적 자원 페이지의 새로 만들기  클릭

 

이름을 작성하고, 캐시관리를 공개로 해줍니다.

파일은 처음에 압축했던 helloworld.zip 을 첨부해줍니다.

 

 

■ 정적자원 생성 확인

helloworld의 이름으로 zip 유형이 생겼습니다.

 

 

■ lwc 스크립트 부분

 

 

먼저 loadScript 를 import 해줍니다.

HELLO 에는 아까 세일즈포스에서 등록했던 helloworld.zip의 경로입니다.

소스코드에서는 loadScript(this, HELLO + 'js파일 이름') 으로 사용할 수 있습니다.

 

그러면 then 부분에서 helloworld.js 에 담겨있던 myLib에 대한 펑션을 불러올 수 있게 됩니다.

 

 

# lwc 자바스크립트 

 

import { api, LightningElement, wire, track } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import HELLO from '@salesforce/resourceUrl/helloworld';

export default class HelloWorld extends LightningElement {
		
    connectedCallback() {
        loadScript(this, HELLO + '/helloworld.js').then(() => {   // loadScript를 통해 js파일 경로를 불러와서
            let result = myLib.myFunction(2,2);   // 자바스크립트 파일의 펑션을 사용할 수 있다.
            console.log(result + "======= TEST ")
        })
    }
}

 

 

세일즈포스 lwc  loadScript