Looker 확장 프로그램 프레임워크에서 곧 새로운 로드 메커니즘을 사용합니다. 기존 로더가 로드될 때 새 로더가 오류를 일으킬 수 있습니다. Looker 환경에서 새 로더가 공식적으로 사용 설정되기 전에 확장 프로그램을 테스트하는 방법은 Looker 고객센터의 새 확장 프로그램 프레임워크 로더 테스트 도움말을 참고하세요.
이 페이지에서는 확장 프로그램에서 사용할 일반적인 기능을 위해 React 및 자바스크립트로 작성된 코드 예를 제공합니다.
Looker 확장 프로그램 SDK 사용
Looker 확장 SDK에서 함수를 추가하려면 먼저 SDK에 대한 참조를 가져와야 합니다. 이 참조는 제공자 또는 전역에서 수행할 수 있습니다. 그러면 다른 자바스크립트 애플리케이션에서와 마찬가지로 SDK 함수를 호출할 수 있습니다.
- 제공업체에서 SDK에 액세스하려면 다음 안내를 따르세요.
import { ExtensionContext2 } from '@looker/extension-sdk-react'
export const Comp1 = () => {
const extensionContext = useContext(
ExtensionContext2
)
const { extensionSDK, coreSDK } = extensionContext
- 전역적으로 SDK에 액세스하려면 (확장 프로그램을 호출하기 전에 반드시 초기화해야 함)
const coreSDK = getCoreSDK2()
이제 자바스크립트 애플리케이션에서처럼 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 { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
const { extensionSDK } = extensionContext
. . .
extensionSDK.updateLocation('/browse')
새 브라우저 창 열기
확장 프로그램은 샌드박스 처리된 iframe에서 실행되므로 상위 창을 사용하여 새 브라우저 창을 열 수 없습니다. Looker 확장 프로그램 SDK를 사용하여 브라우저 창을 열 수 있습니다.
이 기능을 사용하려면 new_window 사용 권한이 현재 Looker 인스턴스의 위치로 새 창을 열거나 new_window_external_urls 사용 권한이 있어야 다른 호스트에서 실행되는 새 창을 열 수 있습니다.
import { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
const { extensionSDK } = extensionContext
. . .
extensionSDK.openBrowserWindow('/browse', '_blank')
. . .
extensionSDK.openBrowserWindow('https://docs.looker.com/reference/manifest-params/application#entitlements', '_blank')
라우팅 및 딥 링크
다음은 React 기반 확장 프로그램에 적용됩니다.
ExtensionProvider 및 ExtensionProvider2 구성요소는 개발자가 사용할 수 있도록 MemoryRouter이라는 React Router를 자동으로 생성합니다. BrowserRouter는 샌드박스 처리된 iframe에서 작동하지 않으므로 만들지 마세요. HashRouter은 Chromium 기반이 아닌 Microsoft Edge 브라우저의 샌드박스 처리된 iframe에서 작동하지 않으므로 만들지 마세요.
MemoryRouter를 활용하고 확장 프로그램에서 react-router를 사용하는 경우 확장 프로그램 프레임워크가 확장 프로그램의 라우터를 Looker 호스트 라우터에 자동으로 동기화합니다. 즉, 확장 프로그램에서 브라우저의 뒤로 및 앞으로 버튼 클릭 그리고 페이지가 새로고침될 때 현재 경로에 대한 알림을 받습니다. 또한 확장 프로그램이 딥 링크를 자동으로 지원해야 합니다. react-router를 활용하는 방법은 확장 프로그램 예시를 참고하세요.
확장 프로그램 컨텍스트 데이터
확장 프로그램 프레임워크 컨텍스트 데이터를 React 컨텍스트와 혼동해서는 안 됩니다.
확장 프로그램의 경우 확장 프로그램의 모든 사용자 간에 컨텍스트 데이터를 공유할 수 있습니다. 컨텍스트 데이터는 자주 변경되지 않으며 특별한 보안 요구사항이 없는 데이터에 사용될 수 있습니다. 데이터 잠금 없이는 마지막 쓰기가 성공하므로 데이터를 쓸 때 주의해야 합니다. 시작 시 확장 프로그램은 컨텍스트 데이터를 즉시 사용할 수 있습니다. Looker 확장 SDK는 컨텍스트 데이터를 업데이트하고 새로고침할 수 있는 함수를 제공합니다.
컨텍스트 데이터의 최대 크기는 약 16MB입니다. 컨텍스트 데이터는 JSON 문자열로 직렬화되므로 확장에 컨텍스트 데이터를 사용하는 경우에도 고려해야 합니다.
import { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
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 인스턴스에서 정의해야 합니다. 사용자 속성의 네임스페이스를 지정하려면 속성 이름 앞에 확장자 이름을 붙입니다. 사용자 속성 이름에는 대시와 콜론을 사용할 수 없으므로 확장자 이름의 대시와 ':'는 밑줄로 대체해야 합니다.
예를 들어
my-extension::my-extension라는 확장 프로그램 ID와 함께 사용되는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 { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
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 { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
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 { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
const { extensionSDK } = extensionContext
extensionSDK.updateTitle('My Extension Title')
시스템 클립보드에 쓰기
샌드박스 처리된 iframe에서는 시스템 클립보드에 액세스할 수 없습니다. Looker 확장 SDK를 사용하면 확장 프로그램에서 시스템 클립보드에 텍스트를 작성할 수 있습니다. 보안상의 이유로 확장 프로그램은 시스템 클립보드에서 읽을 수 없습니다.
시스템 클립보드에 쓰려면 use_clipboard 사용 권한이 필요합니다.
import { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
const { extensionSDK } = extensionContext
// Write to system clipboard
try {
await extensionSDK.clipboardWrite(
'My interesting information'
)
. . .
} catch (error) {
. . .
}
대시보드, 스타일, 탐색 삽입
확장 프로그램 프레임워크는 대시보드, 스타일 및 탐색의 삽입을 지원합니다. 일반 대시보드와 기존 대시보드를 모두 삽입할 수 있습니다.
use_embeds 사용 권한이 필요합니다. Looker 자바스크립트 삽입 SDK를 사용하여 콘텐츠를 삽입하는 것이 좋습니다. 자세한 내용은 SDK 삽입 문서를 참고하세요.
import { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
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 { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
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 { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
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를 사용하면 특정 리소스(예: Goorgle 시트 문서)에 액세스하기 위한 액세스 토큰을 가져올 수 있습니다.
extension oauth2_urls 사용 권한에서 OAuth 서버 엔드포인트를 지정해야 합니다. external_api_urls 사용 권한에 추가 URL을 지정해야 할 수도 있습니다.
확장 프레임워크는 다음과 같은 흐름을 지원합니다.
- 암시적 흐름
- 보안 비밀 키를 사용하는 승인 코드 부여 유형
- PKCE 코드 챌린지 및 인증자
일반적으로 OAuth 서버 페이지를 로드하는 하위 창이 열립니다. OAuth 서버는 사용자를 인증하고 액세스 토큰을 얻는 데 사용할 수 있는 추가 세부정보로 Looker 서버로 다시 리디렉션합니다.
암시적 흐름:
import { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
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 { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
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은 Looker 인스턴스를 지정된 확장 프로그램 및 확장 프로그램만 노출하는 환경으로 사용하는 방법을 의미합니다. Looker 인스턴스로 이동하는 표준 사용자에게 Looker 관리자가 구성한 로그인 흐름이 표시됩니다. 사용자가 인증되면 아래와 같이 landing_page 사용자 속성에 따라 사용자에게 확장 프로그램이 표시됩니다. 사용자는 확장 프로그램에만 액세스할 수 있습니다. Looker의 다른 부분에는 액세스할 수 없습니다. 사용자가 여러 확장 프로그램에 액세스할 수 있는 경우 확장 프로그램은 extensionSDK.updateLocation를 사용하여 다른 확장 프로그램으로 이동하는 기능을 제어합니다. 사용자가 Looker 인스턴스에서 로그아웃할 수 있게 해주는 특정 Looker 확장 SDK 메서드가 있습니다.
import { ExtensionContext2 } from '@looker/extension-sdk-react'
. . .
const extensionContext = useContext(
ExtensionContext2
)
const { extensionSDK } = extensionContext
. . .
// Navigate to another extension
extensionSDK.updateLocation('/spartan/another::extension')
. . .
// Logout
extensionSDK.spartanLogout()
스파르타 사용자 정의
부분적인 사용자를 정의하려면 '확장 프로그램 전용'이라는 그룹을 만들어야 합니다.
'확장 프로그램만' 그룹이 생성되면 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 3.1 또는 4.0 중 하나를 선택하고 React용 확장 프로그램 SDK에서 ExtensionProvider2 구성요소를 사용해야 합니다. 두 SDK가 모두 필요한 경우 ExtensionProvider 구성요소를 계속 사용하지만 최종 번들 크기가 증가합니다.
다음 코드는 확장 프로그램 제공업체를 설정합니다. 원하는 SDK를 제공업체에 알려야 합니다.
import { MyExtension } from './MyExtension'
import { ExtensionProvider2 } 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`
용어집
- 코드 분할 — 실제로 필요할 때까지 자바스크립트를 지연 로드하는 기술입니다. 처음에 로드된 자바스크립트 번들은 가능한 한 작게 유지하는 것이 좋습니다. 코드 분할을 활용하면 됩니다. 즉시 필요하지 않은 기능은 실제로 필요할 때까지 로드되지 않습니다.
- IDE — 통합 개발 환경 확장 프로그램을 만들고 수정하는 데 사용되는 편집기입니다. Visual Studio Code, Intellij, WebStorm을 예로 들 수 있습니다.
- 장면 — 일반적으로 Looker에서 페이지 조회를 나타냅니다. 장면이 주요 경로에 매핑됩니다. 장면에 주요 경로 내의 하위 경로에 매핑되는 하위 장면이 있을 수 있습니다.
- 트랜스파일러 — 한 언어로 작성된 소스 코드를 가져와 비슷한 수준의 추상화를 하는 다른 언어로 변환하는 프로세스입니다. TypeScript to JavaScript를 예로 들 수 있습니다.