이 페이지에서는 확장 프로그램에서 사용할 수 있는 일반적인 함수의 React 및 JavaScript로 작성된 코드 예시를 제공합니다.
Looker 확장 프로그램 SDK 사용
확장 프로그램은 Looker 호스트와 연결해야 합니다. React에서는 확장 프로그램을 ExtensionProvider40 구성요소에 래핑하여 이 작업을 수행합니다. 이 구성요소는 Looker 호스트와의 연결을 설정하고, Looker 확장 프로그램 SDK 및 Looker SDK를 확장 프로그램에서 사용할 수 있도록 합니다.
import React from 'react'
import { ExtensionProvider40 } from '@looker/extension-sdk-react'
import { DemoCoreSDK } from './DemoCoreSDK'
export const App = () => {
return (
<ExtensionProvider40 chattyTimeout={-1}>
<DemoCoreSDK />
</ExtensionProvider40>
)
}
확장 프로그램 제공업체에 대한 배경지식
확장 프로그램 제공업체는 Looker 확장 프로그램 SDK 및 SDK API를 확장 프로그램에 노출합니다. 확장 프로그램 프레임워크가 생성된 이후에 다른 버전의 확장 프로그램 제공업체가 생성되었습니다. 이 섹션에서는 확장 프로그램 제공업체의 기록과 ExtensionProvider40이 권장되는 제공업체인 이유를 설명합니다.
첫 번째 확장 프로그램 제공업체는 ExtensionProvider로, Looker SDK 버전 3.1 및 4.0을 모두 노출했습니다. 단점은 두 SDK를 모두 포함하면 최종 프로덕션 번들의 크기가 증가했다는 점입니다.
그런 다음 ExtensionProvider2가 생성되었습니다. 이는 확장 프로그램이 두 SDK를 모두 사용하고 개발자가 둘 중 하나를 선택하도록 강제하는 것이 적절하지 않기 때문에 만들어졌습니다. 하지만 여전히 두 SDK가 최종 프로덕션 번들의 크기에 포함되었습니다.
SDK 4.0이 GA로 전환되면 ExtensionProvider40이 생성됩니다. ExtensionProvider40의 장점은 SDK 4.0이 사용 가능한 유일한 버전이기 때문에 개발자가 사용할 SDK를 선택할 필요가 없다는 점입니다. 최종 번들에는 SDK 3.1이 포함되어 있지 않기 때문에 번들의 크기를 줄일 수 있다는 장점이 있습니다.
Looker 확장 프로그램 SDK에서 함수를 추가하려면 먼저 SDK에 대한 참조를 가져와야 합니다. 이는 제공업체 또는 전역에서 수행할 수 있습니다. 그런 다음 JavaScript 애플리케이션과 마찬가지로 SDK 함수를 호출할 수 있습니다.
- 제공업체에서 SDK에 액세스하려면 다음 단계를 따르세요.
import { ExtensionContext40 } from '@looker/extension-sdk-react'
export const Comp1 = () => {
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK, coreSDK } = extensionContext
- SDK에 전역으로 액세스하려면(확장 프로그램을 호출하기 전에 확장 프로그램을 초기화해야 함) 다음 단계를 따르세요.
const coreSDK = getCoreSDK()
이제 JavaScript 애플리케이션과 마찬가지로 같이 SDK를 사용할 수 있습니다.
const GetLooks = async () => {
try {
const looks = await sdk.ok(sdk.all_looks('id'))
// process looks
. . .
} catch (error) {
// do error handling
. . .
}
}
Looker 인스턴스의 다른 위치로 이동
확장 프로그램은 샌드박스 처리된 iframe에서 실행되므로 상위 요소의 window.location 객체를 업데이트하여 Looker 인스턴스 내에서 다른 위치로 이동할 수 없습니다. Looker 확장 프로그램 SDK를 사용하면 탐색할 수 있습니다.
이 기능을 사용하려면 navigation 사용 권한이 필요합니다.
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
. . .
extensionSDK.updateLocation('/browse')
새 브라우저 창 열기
확장 프로그램은 샌드박스 처리된 iframe에서 실행되므로 상위 창을 사용하여 새 브라우저 창을 열 수 없습니다. Looker 확장 프로그램 SDK를 사용하면 브라우저 창을 열 수 있습니다.
이 기능에는 현재 Looker 인스턴스의 위치로 새 창을 열려면 new_window 권한이 필요하고 다른 호스트에서 실행되는 새 창을 열려면 new_window_external_urls 사용 권한이 필요합니다.
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
. . .
extensionSDK.openBrowserWindow('/browse', '_blank')
. . .
extensionSDK.openBrowserWindow('https://docs.looker.com/reference/manifest-params/application#entitlements', '_blank')
라우팅 및 딥 링크
다음은 React 기반 확장 프로그램에 적용됩니다.
ExtensionProvider, ExtensionProvider2, ExtensionProvider40 구성요소는 자동으로 MemoryRouter라는 React 라우터를 생성하여 사용할 수 있도록 합니다. BrowserRouter는 샌드박스 처리된 iframe에서 작동하지 않으므로 만들려고 시도하지 마세요. Chromium이 아닌 버전의 Microsoft Edge 브라우저에서 샌드박스 처리된 iframe에서는 작동하지 않으므로 HashRouter를 만들려고 시도하지 마세요.
MemoryRouter가 사용되고 확장 프로그램에서 react-router를 사용하는 경우 확장 프로그램 프레임워크가 확장 프로그램의 라우터를 Looker 호스트 라우터에 자동으로 동기화합니다. 즉, 페이지가 새로고침될 때 확장 프로그램에서 브라우저의 뒤로 및 앞으로 버튼 클릭과 현재 경로의 알림이 전송됩니다. 또한 확장 프로그램이 자동으로 딥 링크를 지원해야 한다는 것을 의미합니다. react-router를 활용하는 방법은 확장 프로그램 예시를 참고하세요.
확장 프로그램 컨텍스트 데이터
확장 프로그램 프레임워크 컨텍스트 데이터를 React 컨텍스트와 혼동해서는 안 됩니다.
확장 프로그램에는 확장 프로그램의 모든 사용자 간에 컨텍스트 데이터를 공유하는 기능이 있습니다. 컨텍스트 데이터는 자주 변경되지 않고 특별한 보안 요구사항이 없는 데이터에 사용할 수 있습니다. 데이터 잠금이 없고 마지막 쓰기가 성공하므로 데이터를 쓸 때는 주의해야 합니다. 컨텍스트 데이터는 시작 시 확장 프로그램에서 즉시 사용할 수 있습니다. Looker 확장 프로그램 SDK는 컨텍스트 데이터를 업데이트하고 새로 고칠 수 있는 함수를 제공합니다.
컨텍스트 데이터의 최대 크기는 약 16MB입니다. 컨텍스트 데이터는 JSON 문자열로 직렬화되므로 확장 프로그램에 컨텍스트 데이터를 사용하는 경우에도 이를 고려해야 합니다.
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
. . .
// Get loaded context data. This will reflect any updates that have
// been made by saveContextData.
let context = await extensionSDK.getContextData()
. . .
// Save context data to Looker server.
context = await extensionSDK.saveContextData(context)
. . .
// Refresh context data from Looker server.
context = await extensionSDK.refreshContextData()
사용자 속성
Looker 확장 프로그램 SDK는 Looker 사용자 속성에 액세스할 수 있는 API를 제공합니다. 사용자 속성 액세스에는 두 가지 유형이 있습니다.
범위 지정 - 확장 프로그램과 연결되어 있습니다. 범위가 지정된 사용자 속성은 확장 프로그램에 네임스페이스가 지정되며, 사용자 속성을 사용하려면 Looker 인스턴스에 정의되어 있어야 합니다. 사용자 속성에 네임스페이스를 지정하려면 속성 이름 앞에 확장 프로그램 이름을 붙입니다. 사용자 속성 이름에 대시와 콜론을 사용할 수 없으므로 확장 프로그램 이름에 포함된 대시 및 '::' 문자는 밑줄로 바꿔야 합니다.
예를 들어 확장 프로그램 ID가
my-extension::my-extension이고 이름이my_value인 범위가 지정된 사용자 속성은my_extension_my_extension_my_value로 사용자 속성 이름이 정의되어 있어야 합니다. 정의된 후에는 확장 프로그램에서 사용자 속성을 읽고 업데이트할 수 있습니다.전역 - 전역 사용자 속성이며 읽기 전용입니다. 예를 들어
locale사용자 속성이 있습니다.
다음은 사용자 속성 API 호출의 목록입니다.
userAttributeGetItem- 사용자 속성을 읽습니다. 기본값이 정의될 수 있으며, 사용자에 대한 사용자 속성 값이 존재하지 않는 경우에 사용됩니다.userAttributeSetItem- 현재 사용자의 사용자 속성을 저장합니다. 전역 사용자 속성에서는 실패합니다. 저장된 값은 현재 사용자에게만 표시됩니다.userAttributeResetItem- 현재 사용자의 사용자 속성을 기본값으로 재설정합니다. 전역 사용자 속성에서는 실패합니다.
사용자 속성에 액세스하려면 global_user_attributes 또는 scoped_user_attributes 사용 권한에 속성 이름을 지정해야 합니다. 예를 들어 LookML 프로젝트 매니페스트 파일에는 다음을 추가합니다.
entitlements: {
scoped_user_attributes: ["my_value"]
global_user_attributes: ["locale"]
}
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
// Read global user attribute
const locale = await extensionSDK.userAttributeGetItem('locale')
// Read scoped user attribute
const value = await extensionSDK.userAttributeGetItem('my_value')
// Update scoped user attribute
const value = await extensionSDK.userAttributeSetItem('my_value', 'abcd1234')
// Reset scoped user attribute
const value = await extensionSDK.userAttributeResetItem('my_value')
로컬 저장소
샌드박스 처리된 iframe에서는 브라우저 로컬 스토리지에 액세스할 수 없습니다. Looker 확장 프로그램 SDK를 사용하면 확장 프로그램이 상위 창의 로컬 스토리지에 읽고 쓸 수 있습니다. 로컬 스토리지는 확장 프로그램에 네임스페이스화됩니다. 즉, 상위 창이나 다른 확장 프로그램에 의해 생성된 로컬 스토리지는 읽을 수 없습니다.
로컬 스토리지를 사용하려면 local_storage 사용 권한이 필요합니다.
확장 프로그램 localhost API는 동기식 브라우저 로컬 스토리지 API와 달리 비동기식입니다.
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
// Read from local storage
const value = await extensionSDK.localStorageGetItem('my_storage')
// Write to local storage
await extensionSDK.localStorageSetItem('my_storage', 'abcedefh')
// Delete item from local storage
await extensionSDK.localStorageRemoveItem('my_storage')
페이지 제목 업데이트
확장 프로그램에서 현재 페이지 제목을 업데이트할 수 있습니다. 이 작업을 수행하는 데 사용 권한은 필요하지 않습니다.
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
extensionSDK.updateTitle('My Extension Title')
시스템 클립보드에 쓰기
샌드박스 처리된 iframe은 시스템 클립보드에 대한 액세스를 허용하지 않습니다. Looker 확장 프로그램 SDK를 사용하면 확장 프로그램에서 시스템 클립보드에 텍스트를 쓸 수 있습니다. 보안상의 이유로 확장 프로그램은 시스템 클립보드에서 읽을 수 없습니다.
시스템 클립보드에 쓰려면 use_clipboard 사용 권한이 필요합니다.
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
// Write to system clipboard
try {
await extensionSDK.clipboardWrite(
'My interesting information'
)
. . .
} catch (error) {
. . .
}
대시보드, Look, Explore 임베딩
확장 프로그램 프레임워크는 대시보드, Look, Explore의 임베딩을 지원합니다.
use_embeds 사용 권한이 필요합니다. Looker JavaScript Embed SDK를 사용하여 콘텐츠를 삽입하는 것이 좋습니다. 자세한 내용은 Embed SDK 문서를 참조하세요.
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
. . .
const canceller = (event: any) => {
return { cancel: !event.modal }
}
const updateRunButton = (running: boolean) => {
setRunning(running)
}
const setupDashboard = (dashboard: LookerEmbedDashboard) => {
setDashboard(dashboard)
}
const embedCtrRef = useCallback(
(el) => {
const hostUrl = extensionContext?.extensionSDK?.lookerHostData?.hostUrl
if (el && hostUrl) {
el.innerHTML = ''
LookerEmbedSDK.init(hostUrl)
const db = LookerEmbedSDK.createDashboardWithId(id as number)
.withNext()
.appendTo(el)
.on('dashboard:loaded', updateRunButton.bind(null, false))
.on('dashboard:run:start', updateRunButton.bind(null, true))
.on('dashboard:run:complete', updateRunButton.bind(null, false))
.on('drillmenu:click', canceller)
.on('drillmodal:explore', canceller)
.on('dashboard:tile:explore', canceller)
.on('dashboard:tile:view', canceller)
.build()
.connect()
.then(setupDashboard)
.catch((error: Error) => {
console.error('Connection error', error)
})
}
},
[]
)
return (<EmbedContainer ref={embedCtrRef} />)
확장 프로그램 예시에서는 스타일 지정 구성요소를 사용하여 생성된 iframe에 간단한 스타일을 제공합니다. 예를 들면 다음과 같습니다.
import styled from "styled-components"
export const EmbedContainer = styled.div`
width: 100%;
height: 95vh;
& > iframe {
width: 100%;
height: 100%;
}
외부 API 엔드포인트에 액세스
확장 프로그램 프레임워크는 외부 API 엔드포인트에 액세스하는 두 가지 방법을 제공합니다.
- 서버 프록시 — Looker 서버를 통해 엔드포인트에 액세스합니다. 이 메커니즘을 사용하면 Looker 서버에서 클라이언트 ID와 보안 비밀 키를 안전하게 설정할 수 있습니다.
- 가져오기 프록시 — 사용자의 브라우저에서 엔드포인트에 액세스합니다. 프록시는 Looker UI입니다.
두 경우 모두 확장 프로그램 external_api_urls 사용 권한에 외부 API 엔드포인트를 지정해야 합니다.
서버 프록시
다음 예시에서는 서버 프록시를 사용하여 가져오기 프록시에서 사용할 액세스 토큰을 가져오는 방법을 보여줍니다. 클라이언트 ID와 보안 비밀은 확장 프로그램의 사용자 속성으로 정의되어야 합니다. 일반적으로 사용자 속성이 설정되면 기본값은 클라이언트 ID 또는 보안 비밀로 설정됩니다.
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
. . .
const requestBody = {
client_id: extensionSDK.createSecretKeyTag('my_client_id'),
client_secret: extensionSDK.createSecretKeyTag('my_client_secret'),
},
try {
const response = await extensionSDK.serverProxy(
'https://myaccesstokenserver.com/access_token',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody),
}
)
const { access_token, expiry_date } = response.body
. . .
} catch (error) {
// Error handling
. . .
}
사용자 속성 이름은 확장 프로그램에 매핑되어야 합니다. 대시는 밑줄로 바꿔야 하며 :: 문자는 하나의 밑줄로 바꿔야 합니다.
예를 들어 확장 프로그램 이름이 my-extension::my-extension인 경우 이전 예시에 정의해야 하는 사용자 속성은 다음과 같습니다.
my_extension_my_extension_my_client_id
my_extension_my_extension_'my_client_secret'
가져오기 프록시
다음 예시에서는 가져오기 프록시를 사용하는 방법을 보여줍니다. 여기에는 이전 서버 프록시 예시의 액세스 토큰이 사용됩니다.
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
. . .
try {
const response = await extensionSDK.fetchProxy(
'https://myaccesstokenserver.com/myendpoint',
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${accessToken}`,
},
body: JSON.stringify({
some_value: someValue,
another_value: anotherValue,
}),
}
)
// Handle success
. . .
} catch (error) {
// Handle failure
. . .
}
OAuth 통합
확장 프로그램 프레임워크는 OAuth 제공업체와 통합될 수 있습니다. OAuth를 사용하면 특정 리소스(예: Google Sheets 문서)에 액세스할 수 있는 액세스 토큰을 가져올 수 있습니다.
extension oauth2_urls 사용 권한에 OAuth 서버 엔드포인트를 지정해야 합니다. external_api_urls 사용 권한에 추가 URL을 지정해야 할 수도 있습니다.
확장 프로그램 프레임워크는 다음 흐름을 지원합니다.
- 암시적 흐름
- 보안 비밀 키가 있는 승인 코드 부여 유형
- PKCE 코드 챌린지 및 확인자
일반적인 흐름은 OAuth 서버 페이지를 로드하는 하위 창이 열리는 것입니다. OAuth 서버는 사용자를 인증하고 액세스 토큰을 가져오는 데 사용할 수 있는 추가 세부정보로 Looker 서버로 다시 리디렉션합니다.
암시적 흐름:
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
. . .
const response = await extensionSDK.oauth2Authenticate(
'https://accounts.google.com/o/oauth2/v2/auth',
{
client_id: GOOGLE_CLIENT_ID!,
scope: GOOGLE_SCOPES,
response_type: 'token',
}
)
const { access_token, expires_in } = response
보안 비밀 키가 있는 승인 코드 부여 유형:
const authenticateParameters: Record<string, string> = {
client_id: GITHUB_CLIENT_ID!,
response_type: 'code',
}
const response = await extensionSDK.oauth2Authenticate(
'https://github.com/login/oauth/authorize',
authenticateParameters,
'GET'
)
const exchangeParameters: Record<string, string> = {
client_id: GITHUB_CLIENT_ID!,
code: response.code,
client_secret: extensionSDK.createSecretKeyTag('github_secret_key'),
}
const codeExchangeResponse = await extensionSDK.oauth2ExchangeCodeForToken(
'https://github.com/login/oauth/access_token',
exchangeParameters
)
const { access_token, error_description } = codeExchangeResponse
PKCE 코드 챌린지 및 확인자:
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
. . .
const authRequest: Record<string, string> = {
client_id: AUTH0_CLIENT_ID!,
response_type: 'code',
scope: AUTH0_SCOPES,
code_challenge_method: 'S256',
}
const response = await extensionSDK.oauth2Authenticate(
'https://sampleoauthserver.com/authorize',
authRequest,
'GET'
)
const exchangeRequest: Record<string, string> = {
grant_type: 'authorization_code',
client_id: AUTH0_CLIENT_ID!,
code: response.code,
}
const codeExchangeResponse = await extensionSDK.oauth2ExchangeCodeForToken(
'https://sampleoauthserver.com/login/oauth/token',
exchangeRequest
)
const { access_token, expires_in } = codeExchangeResponse
Spartan
Spartan은 Looker 인스턴스를 환경으로 사용하여 지정된 사용자에게 확장 프로그램만 노출하는 방법을 나타냅니다. Looker 인스턴스로 이동하는 Spartan 사용자에게는 Looker 관리자가 구성한 로그인 흐름이 표시됩니다. 사용자가 인증되면 다음과 같이 landing_page 사용자 속성에 따라 사용자에게 확장 프로그램이 표시됩니다. 사용자는 확장 프로그램에만 액세스할 수 있으며 Looker의 다른 부분에는 액세스할 수 없습니다. 사용자가 여러 확장 프로그램에 액세스할 수 있는 경우 확장 프로그램은 extensionSDK.updateLocation을 사용하여 사용자가 다른 확장 프로그램으로 이동하는 기능을 제어합니다. 사용자가 Looker 인스턴스에서 로그아웃할 수 있게 해주는 하나의 Looker 확장 프로그램 SDK 메서드가 있습니다.
import { ExtensionContext40 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext40
)
const { extensionSDK } = extensionContext
. . .
// Navigate to another extension
extensionSDK.updateLocation('/spartan/another::extension')
. . .
// Logout
extensionSDK.spartanLogout()
Spartan 사용자 정의
Spartan 사용자를 정의하려면 '확장 프로그램 전용'이라는 그룹을 만들어야 합니다.
'확장 프로그램 전용' 그룹이 생성되면 Looker의 관리 섹션의 사용자 속성 페이지로 이동하여 landing_page 사용자 속성을 수정합니다. 그룹 값 탭을 선택하고 '확장 프로그램 전용' 그룹을 추가합니다. 값은 /spartan/my_extension::my_extension/로 설정되어야 합니다. 여기서 my_extension::my_extension은 확장 프로그램의 ID입니다. 이제 해당 사용자가 로그인하면 지정된 확장 프로그램으로 라우팅됩니다.
코드 분할
코드 분할은 코드가 필요할 때만 요청되는 기법입니다. 일반적으로 코드 청크는 React 경로와 연결되어 경로마다 코드 청크를 갖습니다. React에서는 Suspense 및 React.lazy 구성요소를 사용하여 이 작업을 수행합니다. Suspense 구성요소는 코드 청크가 로드되는 동안 대체 구성요소를 표시합니다. React.lazy는 코드 청크 로드를 담당합니다.
코드 분할을 설정하는 방법은 다음과 같습니다.
import { AsyncComp1 as Comp1 } from './Comp1.async'
import { AsyncComp1 as Comp2 } from './Comp2.async'
. . .
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route path="/comp1">
<Comp1 />
</Route>
<Route path="/comp2">
<Comp2 />
</Route>
</Switch>
<Suspense>
지연 로드 구성요소는 다음과 같이 구현됩니다.
import { lazy } from 'react'
const Comp1 = lazy(
async () => import(/* webpackChunkName: "comp1" */ './Comp1')
)
export const AsyncComp1 = () => <Home />
구성요소는 다음과 같이 구현됩니다. 구성요소는 기본 구성요소로 내보내야 합니다.
const Comp1 = () => {
return (
<div>Hello World</div>
)
}
export default Comp1
트리 쉐이킹
Looker SDK는 현재 트리 쉐이킹을 지원하지만 이 기능은 여전히 개선이 필요합니다. Google에서는 트리 쉐이킹 지원을 개선하기 위해 SDK를 지속적으로 수정하고 있습니다. 이러한 변경사항 중 일부에서는 이점을 위해 코드를 리팩터링해야 할 수 있지만 필요한 경우 출시 노트에 기록됩니다.
트리 쉐이킹을 활용하려면 사용하는 모듈을 esmodule로 내보내고 가져오는 함수에 부작용이 없어야 합니다. TypeScript/자바스크립트용 Looker SDK, Looker SDK 런타임 라이브러리, Looker UI 구성요소, Looker 확장 프로그램 SDK, React용 확장 프로그램 SDK는 모두 이러한 요구사항을 충족합니다.
확장 프로그램에서 Looker SDK 4.0을 사용하고 React용 확장 프로그램 SDK의 ExtensionProvider2 또는 ExtensionProvider40 구성요소를 사용합니다.
다음 코드는 확장 프로그램 제공업체를 설정합니다. 원하는 SDK를 제공업체에 알려야 합니다.
import { MyExtension } from './MyExtension'
import { ExtensionProvider40 } from '@looker/extension-sdk-react'
import { Looker40SDK } from '@looker/sdk/lib/4.0/methods'
import { hot } from 'react-hot-loader/root'
export const App = hot(() => {
return (
<ExtensionProvider2 type={Looker40SDK}>
<MyExtension />
</ExtensionProvider2>
)
})
확장 프로그램에 다음 가져오기 스타일을 사용하지 마세요.
import * as lookerComponents from `@looker/components`
위의 예시는 모듈의 모든 구성요소를 가져옵니다. 대신 실제로 필요한 구성요소만 가져옵니다. 예를 들면 다음과 같습니다.
import { Paragraph } from `@looker/components`
용어집
- 코드 분할 - 실제로 필요할 때까지 JavaScript를 지연 로드하는 기법입니다. 초기에 로드된 JavaScript 번들을 가능한 한 작게 유지하는 것이 좋습니다. 이때 코드 분할을 활용하면 됩니다. 즉시 필요하지 않은 기능은 실제로 필요할 때까지 로드되지 않습니다.
- IDE - 통합 개발 환경입니다. 확장 프로그램을 만들고 수정하는 데 사용되는 편집기입니다. 예를 들어 Visual Studio Code, Intellij, WebStorm이 있습니다.
- 장면 - 일반적으로 Looker의 페이지 조회입니다. 장면은 주요 경로에 매핑됩니다. 장면에 주요 경로 내의 하위 경로에 매핑되는 하위 장면이 있는 경우도 있습니다.
- 트랜스파일 - 한 언어로 작성된 소스 코드를 가져와 비슷한 수준의 추상화가 있는 다른 언어로 변환하는 프로세스입니다. TypeScript에서 JavaScript로 변환하는 것을 예로 들 수 있습니다.