Power BI 시각적 개체 개발을 위한 환경 설정Set up your environment for developing a Power BI visual

이 문서에서는 Power BI 시각적 개체를 개발하기 위한 환경을 설정하는 방법을 알아봅니다.In this article, you'll learn how to set up your environment for developing a Power BI visual.

개발을 시작하기 전에 node.jspbiviz 패키지를 설치해야 합니다.Before you start development, you'll need to install node.js and the pbiviz package. 또한 인증서를 만들고 설치해야 합니다.You'll also need to create and install a certificate. 로컬 환경이 설정되면 Power BI 시각적 개체를 개발하기 위해 Power BI 서비스를 구성해야 합니다.When your local environment is set up, you'll need to configure Power BI service for developing a Power BI visual.

이 문서에서는 다음을 수행하는 방법을 알아봅니다.In this article, you'll learn how to:

  • nodes.js 를 설치합니다.Install nodes.js.
  • pbiviz 를 설치합니다.Install pbiviz.
  • 인증서를 만들고 설치합니다.Create and install a certificate.
  • 시각적 개체 개발을 위한 Power BI 서비스를 설정합니다.Set up Power BI service for developing a visual.
  • 추가 라이브러리를 설치합니다(시각적 개체 개발에 필요).Install additional libraries (required for developing a visual).

node.js 설치Install node.js

Node.js 는 Chrome의 V8 JavaScript 엔진을 기준으로 하는 JavaScript 런타임입니다.Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. 이를 통해 개발자는 JavaScript에서 만든 모든 앱을 실행할 수 있습니다.It allows developers to run any apps created on JavaScript.

  1. node.js 를 설치하려면 웹 브라우저에서 node.js로 이동합니다.To install node.js, in a web browser, navigate to node.js.

  2. 최신 MSI 설치 관리자를 다운로드합니다.Download the latest MSI installer.

  3. 설치 관리자를 실행한 다음, 설치 단계를 따릅니다.Run the installer, and then follow the installation steps. 사용권 계약의 약관에 동의하고 기본값을 그대로 사용합니다.Accept the terms of the license agreement and all defaults.

  4. 컴퓨터를 다시 시작합니다.Restart your computer.

pbiviz 설치Install pbiviz

JavaScript를 사용하여 작성된 pbiviz 도구는 pbiviz 패키지의 시각적 개체 소스 코드를 컴파일합니다.The pbiviz tool, which is written using JavaScript, compiles the visual source code of the pbiviz package.

pbiviz 패키지는 필요한 모든 스크립트와 자산을 포함하는 압축된 Power BI 시각적 개체 프로젝트입니다.The pbiviz package is a zipped Power BI visual project, with all the needed scripts and assets.

  1. Windows PowerShell을 열고 다음 명령을 입력합니다.Open Windows PowerShell and enter the following command.

    npm i -g powerbi-visuals-tools
    

인증서 만들기 및 설치Create and install a certificate

클라이언트(사용자 컴퓨터)와 서버(Power BI 서비스)가 안전하게 상호 작용하려면 SSL(Secure Sockets Layer) 인증서가 필요합니다.For a client (your computer) and a server (Power BI service) to interact securely, a Secure Sockets Layer (SSL) Certificate is required. 안전한 상호 작용을 보장하는 인증서가 없으면 브라우저에 의해 차단됩니다.Without a certificate to ensure secure interactions, they will be blocked by the browser.

이 프로세스에서는 인증서 가져오기 마법사 를 실행하는 PowerShell 명령을 실행하는 방법에 대해 설명합니다.This process describes running a PowerShell command that launches the Certificate Import Wizard. 아래 단계에 따라 마법사에서 인증서를 구성합니다.Follow the steps below to configure the certificate in the wizard.

중요

이 절차 중에는 PowerShell 창을 닫지 마세요.Do not close the PowerShell window during this procedure.

  1. Windows PowerShell을 열고 다음 명령을 입력합니다.Open Windows PowerShell and enter the following command.

    pbiviz --install-cert
    

    이 명령은 다음과 같은 두 가지 작업을 수행합니다.This command does two things:

    • 암호 를 반환합니다.It returns a passphrase. 이 경우 암호 는 9765328806094입니다.In this case, the passphrase is 9765328806094.
    • 또한 인증서 가져오기 마법사를 시작합니다.It also starts the Certificate Import Wizard.

    Windows PowerShell에서 실행되는 pbivz 명령의 스크린샷Screenshot of the p b i v i z command executed in Windows PowerShell

  2. 인증서 가져오기 마법사에서 저장소 위치가 현재 사용자 로 설정되어 있는지 확인하고 다음 을 선택합니다.In the Certificate Import Wizard, verify that the store location is set to Current User, and select Next.

    저장소 위치 옵션이 현재 사용자로 설정된 인증서 가져오기 마법사의 첫 번째 창 스크린샷.Screenshot of the certificate import wizard's first window, with the store location option set to current user.

  3. 가져올 파일 창에서 다음 을 선택합니다.In the File to Import window, select Next.

  4. 프라이빗 키 보호 창의 암호 텍스트 상자에 PowerShell 명령(1단계)을 실행할 때 받은 암호를 붙여넣고 다음 을 선택합니다.In the Private Key Protection window, in the Password text box, paste the passphrase you received when executing the PowerShell command (step 1) and select Next. 이 예제에서 암호는 9765328806094입니다.In this example, the passphrase is 9765328806094.

    암호 상자가 강조 표시된 인증서 가져오기 마법사의 프라이빗 키 보호 창 스크린샷.Screenshot of the certificate import wizard's private key protection window, with the password box highlighted.

  5. 인증서 저장소 창에서 모든 인증서를 다음 저장소에 저장 옵션을 선택하고 찾아보기 를 선택합니다.In the Certificate Store window, select the Place all certificates in the following store option, and select Browse.

    모든 인증서를 다음 저장소에 저장이 선택된 인증서 가져오기 마법사의 인증서 저장소 창 스크린샷.Screenshot of the certificate import wizard's certificate store window, with the place all certificates in the following store selected.

  6. 인증서 저장소 선택 창에서 신뢰할 수 있는 루트 인증 기관 을 선택한 다음, ‘확인’을 선택합니다. In the Select Certificate Store window, select Trusted Root Certification Authorities and then select OK.

    신뢰할 수 있는 루트 기관 폴더가 선택된 인증서 저장소 선택 창의 스크린샷.Screenshot of the select certificate store window, with the Trusted Root Certification Authorities folder selected.

  7. 인증서 저장소 창에서 다음 을 선택합니다.Select Next in the Certificate Store window.

    신뢰할 수 있는 루트 인증 기관 폴더가 선택되고 다음 단추가 강조 표시된 인증서 가져오기 마법사의 인증서 저장소 창 스크린샷.Screenshot of the certificate import wizard's certificate store window, with the Trusted Root Certification Authorities folder selected, and the next button highlighted.

  8. 인증서 가져오기 마법사 완료 창에서 설정을 확인하고 마침 을 선택합니다.In the Completing the Certificate Import Wizard window, verify your settings and select Finish.

    참고

    보안 경고가 표시되면 를 선택합니다.If you receive a security warning, select Yes.

(선택 사항) 사용자 환경이 설정되었는지 확인(Optional) Verify that your environment is set up

Power BI 시각적 개체 도구 패키지가 설치되었는지 확인합니다.Confirm that the Power BI visuals tools package is installed. PowerShell에서 pbiviz 명령을 실행하고 지원되는 명령 목록을 포함하여 출력을 검토합니다.In PowerShell, run the command pbiviz and review the output, including the list of supported commands.

PowerShell에서 pbivz 명령을 실행하는 출력의 스크린샷.Screenshot of the output of executing the command p b i v i z in PowerShell.

시각적 개체 개발을 위한 Power BI 서비스 설정Set up Power BI service for developing a visual

Power BI 시각적 개체를 개발하려면 Power BI 서비스에서 사용자 지정 시각적 개체 디버깅을 사용하도록 설정해야 합니다.To develop a Power BI visual, you'll need to enable custom visual debugging in Power BI service. 이 섹션의 지침에 따라 이 옵션을 사용하도록 설정합니다.Follow the instructions in this section to enable this option.

  1. PowerBI.com에 로그인합니다.Sign in to PowerBI.com.

  2. 설정 > 설정 > 설정 으로 이동합니다.Navigate to Settings > Settings > Settings.

    Power BI 서비스의 설정, 설정, 설정, 메뉴 옵션 스크린샷.Screenshot of the settings, settings, settings, menu option in Power B I service.

  3. 일반 탭에서 개발자 를 선택합니다.From the General tab, select Developer. 개발자 설정 에서 개발자 시각적 개체를 사용하여 사용자 지정 시각적 개체 디버깅 사용 확인란을 선택하고 적용 을 선택합니다.In the Developer Settings select the Enable custom visual debugging using the developer visual check box, and select Apply.

    Power BI 설정, 일반 탭에서 개발자 시각적 개체를 사용하는 사용자 지정 시각적 개체 디버깅 사용 옵션의 스크린샷.Screenshot of the enable custom visual debugging using the developer visual option, in the Power B I settings, general tab.

개발 라이브러리 설치Install development libraries

고유한 Power BI 시각적 개체를 개발하려면 추가 라이브러리를 설치해야 합니다.To develop your own Power BI visual, you'll need to install additional libraries. 이 섹션에서는 이러한 라이브러리를 설치하고 성공적으로 설치되었는지 확인하는 방법을 설명합니다.This section describes how to install these libraries and verify that the installation is successful.

이 문서에 나열된 라이브러리를 설치하려면 PowerShell을 열고 각 구성 요소에 대한 설치 명령을 입력합니다.To install the libraries listed in this article, open PowerShell and enter the installation command for each component.

참고

이러한 라이브러리가 컴퓨터에 설치되면 모든 Power BI 시각적 개체 프로젝트에 사용할 수 있습니다.Once these libraries are installed on your computer, you'll be able to use them for any Power BI visuals project. 이는 머신당 한 번의 설치 절차입니다.This is a one time installation procedure, per machine.

D3 JavaScript 라이브러리D3 JavaScript library

D3는 웹 브라우저에서 동적 대화형 데이터 시각화를 생성하기 위한 JavaScript 라이브러리입니다.D3 is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. 광범위하게 구현된 SVG(Scalable Vector Graphics), HTML5 및 CSS 표준을 기반으로 합니다.It relies on widely implemented Scalable Vector Graphics (SVG), HTML5, and CSS standards.

npm i d3@^5.0.0 --save

TypeScript 정의TypeScript definitions

JavaScript의 상위 집합인 TypeScript에서 Power BI 시각적 개체를 개발할 수 있도록 TypeScript 정의를 설치합니다.Install TypeScript definitions so that you can develop your Power BI visual in TypeScript, a superset of JavaScript.

npm i @types/d3@^5.0.0 --save

core-jscore-js

core-js는 ECMAScript용 폴리필을 포함하는 JavaScript용 모듈식 표준 라이브러리입니다.core-js is a modular standard library for JavaScript that includes polyfills for ECMAScript.

npm i core-js@3.2.1 --save

powerbi-visual-apipowerbi-visual-api

Power BI 시각적 개체 API 정의를 설치합니다.Install the Power BI Visuals API definitions.

npm i powerbi-visuals-api --save-dev

(선택 사항) D3 라이브러리가 설치되었는지 확인(Optional) Verify that the D3 library is installed

Visual Studio Code(VS Code)는 TypeScript 애플리케이션 개발에 적합한 IDE(통합 개발 환경)입니다.Visual Studio Code (VS Code) is an ideal Integrated Development Environment (IDE) for developing TypeScript applications. 이 섹션에서는 VS Code를 사용하여 Power BI 시각적 개체를 개발하는 데 필요한 D3 라이브러리가 올바르게 설치되어 있는지 확인합니다.In this section, we'll use VS Code to verify that the D3 library you need to develop your Power BI visual, is correctly installed.

참고

이 섹션에서 설명하는 확인 프로세스에서는 기존 Power BI 시각적 개체 프로젝트가 있다고 가정합니다.The verification process described in this section assumes you have an existing Power BI visuals project. Power BI 시각적 개체 프로젝트가 없는 경우 원 카드 프로젝트 만들기 지침에 따라 만들 수 있습니다.If you don't have a Power BI visuals project, you can create one by following the circle card project creation instructions.

  1. VS Code를 엽니다.Open VS Code.

    다음 명령을 실행하여 PowerShell에서 VS Code를 열 수 있습니다.You can open VS Code from PowerShell by executing the following command:

    code .
    
  2. VS Code에서 파일 메뉴를 열고 폴더 열기 를 선택합니다.In VS Code, open the File menu and select Open Folder.

    파일 메뉴에 있는 VS 스튜디오 폴더 열기 옵션의 스크린샷.Screenshot of the VS studio open folder option, in the file menu.

  3. 폴더 열기 창에서 Power BI 시각적 개체 프로젝트가 포함된 폴더를 선택하고 폴더 선택 을 선택합니다.In the Open Folder window, select the folder that contains your Power BI visual project, and select Select Folder.

    VS 스튜디오 폴더 열기 창에서 Power BI 시각적 개체 프로젝트 폴더를 선택하는 스크린샷.Screenshot of selecting the Power BI visuals project folder in the VS studio open folder window.

  4. 탐색기 창 에서 node_modules 폴더를 확장하고 d3 라이브러리가 설치되었는지 확인합니다.In the Explorer pane, expand the node_modules folder and verify that the d3 library is installed.

    VS Code에 표시되는 Power BI 시각적 개체 프로젝트의 3d 폴더 스크린샷.Screenshot of the 3d folder in a Power BI visuals project, as it appears in VS Code.

  5. 탐색기 창 에서 node_modules > @types > d3 를 확장하고 index.t.ds 파일이 설치되었는지 확인합니다.In the Explorer pane, expand node_modules > @types > d3 and verify that the file index.t.ds is installed.

    VS Code에 표시되는 Power BI 시각적 개체 프로젝트의 index.t.ds 파일 스크린샷.Screenshot of the index.t.ds file in a Power BI visuals project, as it appears in VS Code.

다음 단계Next steps