연습: JavaScript를 사용하여 SDK 만들기

아티클
01/13/2024

이 연습에서는 JavaScript를 사용하여 간단한 수학 SDK를 VSIX(Visual Studio 확장)로 만드는 방법을 설명합니다. 이 연습은 다음 부분으로 나뉘어 있습니다.

SimpleMathVSIX 확장 SDK 프로젝트를 만들려면
SDK를 사용하는 샘플 앱을 만들려면

JavaScript의 경우 클래스 라이브러리 프로젝트 형식이 없습니다. 이 연습에서는 샘플 arithmetic.js 파일이 VSIX 프로젝트에서 직접 만들어집니다. 실제로 VSIX 프로젝트에 배치하기 전에 먼저 빈 앱 템플릿 등을 사용하여 JavaScript 파일 및 CSS 파일을 Microsoft Store 앱으로 빌드하고 테스트하는 것이 좋습니다.

필수 조건

이 연습을 수행하려면 Visual Studio SDK를 설치해야 합니다. 자세한 내용은 Visual Studio SDK를 참조하세요.

SimpleMathVSIX 확장 SDK 프로젝트를 만들려면

메뉴 모음에서 파일>새로 만들기>프로젝트를 선택합니다.
템플릿 범주 목록의 Visual C#에서 확장성을 선택한 다음 VSIX 프로젝트 템플릿을 선택합니다.
이름 텍스트 상자에 SimpleMathVSIX를 지정하고 확인 단추를 선택합니다.
Visual Studio 패키지 마법사 나타나면 시작 페이지에서 다음 단추를 선택한 다음 페이지 1/7에서 마침 단추를 선택합니다.

매니페스트 디자이너가 열리더라도 매니페스트 파일을 직접 수정하여 이 연습을 간단하게 유지합니다.

솔루션 탐색기에서 source.extension.vsixmanifest 파일의 바로 가기 메뉴를 열고 코드 보기를 선택합니다. 파일의 기존 콘텐츠를 바꾸려면 이 코드를 사용합니다.

<?xml version="1.0" encoding="utf-8"?>
<PackageManifest Version="2.0.0" xmlns="http://schemas.microsoft.com/developer/vsx-schema/2011" xmlns:d="http://schemas.microsoft.com/developer/vsx-schema-design/2011">
  <Metadata>
    <Identity Id="SimpleMathVSIX" Version="1.0" Language="en-US" Publisher="myname" />
    <DisplayName>Simple Math</DisplayName>
    <Description>Does basic arithmetic calculations.</Description>
  </Metadata>
  <Installation Scope="Global" AllUsers="true">
    <InstallationTarget Id="Microsoft.ExtensionSDK" TargetPlatformIdentifier="Windows" TargetPlatformVersion="v8.0" SdkName="SimpleMath" SdkVersion="1.0" />
  </Installation>
  <Dependencies>
    <Dependency Id="Microsoft.Framework.NDP" DisplayName="Microsoft .NET Framework" d:Source="Manual" Version="4.5" />
  </Dependencies>
  <Assets>
    <Asset Type="Microsoft.ExtensionSDK" d:Source="File" Path="SDKManifest.xml" />
  </Assets>
</PackageManifest>

솔루션 탐색기에서 SimpleMathVSIX 프로젝트의 바로 가기 메뉴를 연 다음, 추가>새 항목을 선택합니다.
데이터 범주에서 XML 파일을 선택하고, SDKManifest.xml 파일 이름을 지정하고, 추가 단추를 선택합니다.
솔루션 탐색기에서 SDKManifest.xml 파일의 바로 가기 메뉴를 연 다음 열기를 선택하여 XML 편집기에서 파일을 표시합니다.

SDKManifest.xml 파일에 다음 코드를 추가합니다.

<?xml version="1.0" encoding="utf-8" ?>
<FileList
  DisplayName="Simple Math"
  MinVSVersion="14.0"
  AppliesTo="JavaScript+WindowsAppContainer"
  SupportsMultipleVersions="Error"
  MoreInfo="https://msdn.microsoft.com/">

  <!-- JS -->
  <File Content="js\arithmetic.js" />
</FileList>

솔루션 탐색기의 SDKManifest.xml 파일에 대한 바로 가기 메뉴에서 속성을 선택합니다.
속성 창에서 Include in VSIX 속성을True로 설정합니다.
솔루션 탐색기에서 SimpleMathVSIX 프로젝트의 바로 가기 메뉴에서 추가, >새 폴더를 차례로 선택한 다음 Redist 폴더의 이름을 지정합니다.
Redist 아래에 하위 폴더를 추가하여 이 폴더 구조를 만듭니다.

\Redist\CommonConfiguration\Neutral\SimpleMath\js\
\js\ 폴더의 바로 가기 메뉴에서 추가>새 항목을 선택합니다.
Visual C# 항목에서 웹 범주를 선택한 다음 JavaScript 파일 항목을 선택합니다. arithmetic.js 파일 이름을 지정하고 추가 단추를 선택합니다.

다음 코드를 arithmetic.js에 삽입합니다.

(function (global) {
    "use strict";
    global.Arithmetic = {
        add: function (firstNumber, secondNumber) {
            return firstNumber + secondNumber;
        },

        subtract: function (firstNumber, secondNumber) {
            return firstNumber - secondNumber;
        },

        multiply: function (firstNumber, secondNumber) {
            return firstNumber * secondNumber;
        },

        divide: function (firstNumber, secondNumber) {
            return firstNumber / secondNumber;
        }
    };
})(this);

솔루션 탐색기의 arithmetic.js 파일에 대한 바로 가기 메뉴에서 속성을 선택합니다. 다음 속성을 변경합니다.
- VSIX에 포함 속성을 True로 설정합니다.
- 출력 디렉터리로 복사 속성을 항상 복사로 설정합니다.
솔루션 탐색기의 SimpleMathVSIX 프로젝트에 대한 바로 가기 메뉴에서 빌드를 선택합니다.
빌드가 성공적으로 완료되면 프로젝트의 바로 가기 메뉴에서 파일 탐색기의 폴더 열기를 선택합니다. \bin\debug\로 이동하고 SimpleMathVSIX.vsix를 실행하여 설치합니다.
설치 단추를 선택하고 설치를 완료하게 합니다.
Visual Studio를 다시 시작합니다.

SDK를 사용하는 샘플 앱을 만들려면

메뉴 모음에서 파일>새로 만들기>프로젝트를 선택합니다.
템플릿 범주 목록의 JavaScript에서 Windows 스토어를 선택한 다음 빈 앱 템플릿을 선택합니다.
이름 상자에서 ArithmeticUI를 지정합니다. 확인 단추를 선택합니다.
솔루션 탐색기에서 ArithmeticUI 프로젝트의 바로 가기 메뉴를 연 다음 추가>참조를 선택합니다.
Windows에서 확장명을 선택하고 단순 수학이 표시되는 것을 확인합니다.
단순 수학 확인란을 선택한 다음 확인 단추를 선택합니다.
솔루션 탐색기에서 참조아래에 단순 수학 참조가 표시됩니다. 확장하면 arithmetic.js를 포함하는 \js\ 폴더가 있습니다. arithmetic.js를 열어 소스 코드가 설치되었는지 확인할 수 있습니다.

다음 코드를 사용하여 default.htm의 내용을 바꿉니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ArithmeticUI</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- ArithmeticUI references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/SimpleMath/js/arithmetic.js"></script>
</head>
<body>
    <form>
    <div id="calculator" class="ms-grid">
        <input name="firstNumber" id="firstNumber" type="number" step="any">
        <div id="operators">
            <button class="operator" type="button">+</button>
            <button class="operator" type="button">-</button>
            <button class="operator" type="button">*</button>
            <button class="operator" type="button">/</button>
        </div>
        <input id="secondNumber" type="number">
        <button class="calculate" type="button">=</button>
        <input id="result" type="number" name="result" disabled="" readonly="">
    </div>
    </form>
</body>
</html>

다음 코드를 사용하여 \js\default.js의 내용을 바꿉니다.

(function () {
    "use strict";

    var app = WinJS.Application;
    var operation = null;

    function calculateResult() {
        var firstNumber = parseFloat(document.querySelector("#firstNumber").value),
            secondNumber = parseFloat(document.querySelector("#secondNumber").value),
            result = 0;

        if (isNaN(firstNumber) || isNaN(secondNumber)) {
            result = 0;
        }
        else {
            switch (operation) {
                case "+":
                    result = Arithmetic.add(firstNumber, secondNumber);
                    break;
                case "-":
                    result = Arithmetic.subtract(firstNumber, secondNumber);
                    break;
                case "*":
                    result = Arithmetic.multiply(firstNumber, secondNumber);
                    break;
                case "/":
                    result = Arithmetic.divide(firstNumber, secondNumber);
                    break;
                default:
            }
        }
        document.querySelector("#result").value = result.toString();
    }

    app.onactivated = function (args) {
        document.querySelector("#calculator").addEventListener("click", function (event) {
            if (event.target.tagName.toLowerCase() === "button") {
                switch (event.target.className) {
                    case "operator":
                        operation = event.target.innerText;
                        break;
                    case "calculate":
                        calculateResult();
                        break;
                    default:
                        break;
                }
            }
        });
    };

    app.start();
})();

\css\default.css의 내용을 다음 코드로 바꿉니다.

form {
    display: -ms-grid;
    -ms-grid-rows: 1fr auto 1fr;
    -ms-grid-columns: 1fr auto 1fr;
    height: 100%;
    width: 100%;
}

button, input[type=number] {
    margin-right: 5px;
    -ms-grid-row-align: center;
}

#calculator {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    display: -ms-grid;
    -ms-grid-rows: 1fr;
    -ms-grid-columns: auto min-content auto auto auto;
}

.ms-grid input {
    width: 5em;
}

#firstNumber {
    -ms-grid-column: 1;
    -ms-grid-row-align: center;
}

#operators {
    -ms-grid-column: 2;
    -ms-grid-row-align: center;
}

    #operators button.operator {
        margin-bottom: 5px;
        height: 40px;
    }

#secondNumber {
    -ms-grid-column: 3;
}

button.calculate {
    -ms-grid-column: 4;
    -ms-grid-row-align: center;
    height: 40px;
}

#result {
    -ms-grid-column: 5;
}

F5 키를 선택하여 애플리케이션을 빌드하고 실행합니다.
앱 UI에서 두 개의 숫자를 입력하고 작업을 선택한 다음, = 단추를 선택합니다. 올바른 결과가 나타납니다.

소프트웨어 개발 키트 만들기

다음을 통해 공유

연습: JavaScript를 사용하여 SDK 만들기

필수 조건

SimpleMathVSIX 확장 SDK 프로젝트를 만들려면

SDK를 사용하는 샘플 앱을 만들려면

추가 리소스

다음을 통해 공유

연습: JavaScript를 사용하여 SDK 만들기

필수 조건

SimpleMathVSIX 확장 SDK 프로젝트를 만들려면

SDK를 사용하는 샘플 앱을 만들려면

관련 콘텐츠

추가 리소스