사용자 지정 추가 기능은 Excel의 기능을 확장하는 강력한 도구입니다. 반복적인 작업을 자동화하거나, 사용자 지정 기능을 만들거나, 사용자에게 고유한 도구를 제공하는 추가 기능을 만들 수 있습니다. 이 문서에서는 향상된 기능을 위한 사용자 정의 추가 기능을 구축할 것입니다.
이 튜토리얼에서는 JavaScript 및 Office 추가 기능 프레임워크를 사용하여 사용자 정의 Excel 추가 기능을 구축하는 과정을 안내합니다. ExchangeRates API를 사용하여 통화 변환기 추가 기능을 구축하겠습니다.
1단계. 개발 환경 설정
필수 구성 요소 설치 및 다운로드:
- Node.js 설치 :
- Node.js를 다운로드하고 설치하세요.
- VS Code 설치 :
- Visual Studio Code를 다운로드하고 설치합니다.
- Office 추가 기능 CLI 설치 :
- PowerShell이나 터미널을 열고 다음을 실행하세요.
npm install -g yo generator-office
- Excel 설치 :
- Excel 2016 이상이 있는지 확인하세요(Office 365 권장).
- MS Office 365를 사용하고 있습니다.
2단계:새 추가 기능 프로젝트 만들기
- PowerShell 열기 또는 명령 프롬프트 관리자 권한으로 실행 .
- Office 추가 기능 프로젝트를 생성하려면 다음 명령을 실행하세요:
- 이 명령은 계속 또는 종료를 묻는 메시지를 표시합니다.
- 선택계속 Office 추가 기능 프로젝트 설정을 진행하세요.
- 화살표 키를 사용하여 계속을 선택하고 Enter를 누르세요. .
- 다음으로 생성하려는 추가 기능 유형에 대한 일련의 질문이 표시됩니다.
- 프로젝트 유형 선택:
- 작업창 추가 기능 선택 (화살표 키를 사용하고 Enter를 누르세요).
- 스크립트 유형 선택:
- 자바스크립트를 선택하세요. 또는 타입스크립트 귀하의 선호도에 따라 결정됩니다.
- 추가 기능의 이름을 무엇으로 지정하시겠습니까?
- 프로젝트 이름을 입력하세요(예:CustomAddin).
- 어떤 Office 클라이언트 애플리케이션을 지원하고 싶으신가요?
- Excel을 선택합니다. .
- 프로젝트 유형 선택:
- 생성기가 완료될 때까지 기다립니다. 생성기는 필요한 모든 파일이 포함된 프로젝트 폴더를 설정합니다. 프로젝트에는 다음 파일이 포함됩니다:
- taskpane.html :작업창의 UI입니다.
- taskpane.js :작업창에 대한 JavaScript 코드가 포함되어 있습니다.
- manifest.xml :Office에 대한 추가 기능을 설명합니다.
3단계:Visual Studio Code에서 프로젝트 열기
설정을 완료한 후 터미널을 이용하여 프로젝트 폴더를 열거나 VS Code에서 직접 열 수 있습니다. 프로젝트를 생성하는 동안 Yeoman은 yo office 명령을 실행한 현재 디렉터리에 폴더를 생성합니다. 폴더에는 이전에 지정한 추가 기능 프로젝트의 이름이 지정됩니다(예:CustomAddin).
터미널에서 프로젝트 폴더로 이동:
- PowerShell 또는 명령 프롬프트에서 cd(디렉터리 변경) 명령을 사용하여 프로젝트 폴더로 이동합니다.
- 다음 명령을 삽입하여 프로젝트 폴더로 이동하세요
Visual Studio Code에서 폴더 열기:
- 프로젝트 폴더에 있으면 터미널에서 직접 Visual Studio Code로 열 수 있습니다.
- VS Code에서 폴더를 열려면 다음 명령을 실행하세요.
- 이렇게 하면 Visual Studio Code에서 전체 프로젝트가 열립니다.
Visual Studio에서 프로젝트 폴더를 직접 열 수 있습니다.
- 파일 탐색기 열기 (Windows) 또는 Finder(Mac)를 선택하고 Yeoman이 추가 기능 프로젝트를 생성한 폴더로 이동하세요.
- 마우스 오른쪽 버튼 클릭 프로젝트 폴더(예:CustomAddin)>> 코드로 열기를 선택합니다. Visual Studio Code가 있는 경우 설치되었습니다.
- 또는 Visual Studio Code를 열고 파일 로 이동하세요. 탭>> 폴더 열기를 선택합니다. 을 클릭하고 프로젝트 폴더를 선택하세요.
3단계. 실시간 환율 계산기 만들기
VS Code에서 프로젝트가 열리면 추가 기능 편집 및 빌드를 시작할 수 있습니다.
설치 종속성:
필요한 종속성(예:Office.js)을 아직 설치하지 않은 경우 VS Code에서 터미널을 열고 다음 명령을 실행하세요.
VS Code에서 taskpane.html 및 taskpane.js 업데이트
이제 src/ 폴더의 HTML, JavaScript 및 CSS 파일을 편집하여 추가 기능의 기능과 모양을 정의할 수 있습니다.
taskpane.html을 수정하여 추가 기능의 사용자 인터페이스를 디자인하고, taskpane.js를 업데이트하여 대화형 기능(예:Excel과 상호 작용하는 함수)을 추가해 보겠습니다.
taskpane.html 수정:
taskpane.html을 열고 기존 콘텐츠를 다음으로 바꿉니다.
<!DOCTYPE html>
<html>
<head>
<title>Currency Converter</title>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="./taskpane.js"></script>
</head>
<body>
<h2>Currency Converter</h2>
<label for="fromCurrency">From:</label>
<input id="fromCurrency" type="text" placeholder="e.g., USD" />
<br>
<label for="toCurrency">To:</label>
<input id="toCurrency" type="text" placeholder="e.g., EUR" />
<br>
<button id="convertButton">Convert</button>
<p id="status"></p>
</body>
</html>설명:
- 섹션:
- <제목> :페이지 제목을 '통화 변환기'로 설정합니다.
- <스크립트> :
- Office 추가 기능 통합을 위한 office.js가 포함되어 있습니다.
- 맞춤 JavaScript 기능을 위해 taskpane.js를 링크합니다.
- 섹션:
- :'통화 변환기' 제목을 표시합니다.
- <라벨> 및 <입력> :사용자 입력 필드(fromCurrency 및 toCurrency)
- <버튼> :통화 변환을 실행합니다.
:상태 메시지나 오류를 표시합니다.
이 레이아웃은 Excel 추가 기능의 사용자 인터페이스를 형성합니다.
taskpane.js에 로직 추가:
taskpane.js를 열고 기존 콘텐츠를 다음 코드로 바꿉니다:
Office.onReady(() => {
document.getElementById('convertButton').addEventListener('click', convertCurrency);
});
async function convertCurrency() {
const fromCurrency = document.getElementById('fromCurrency').value.toUpperCase();
const toCurrency = document.getElementById('toCurrency').value.toUpperCase();
if (!fromCurrency || !toCurrency) {
document.getElementById('status').innerText = "Please enter valid currencies.";
return;
}
try {
const apiKey = "Your_Api_Key"; // Replace with your ExchangeRates API key
const url = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`;
const response = await fetch(url);
const data = await response.json();
const rate = data.rates[toCurrency];
if (!rate) {
document.getElementById('status').innerText = `Invalid conversion rate for ${toCurrency}.`;
return;
}
await Excel.run(async (context) => {
const range = context.workbook.getSelectedRange();
range.load("values");
await context.sync();
const convertedValues = range.values.map(row =>
row.map(cell => cell * rate)
);
range.values = convertedValues;
document.getElementById('status').innerText = `Converted to ${toCurrency} successfully.`;
await context.sync();
});
} catch (error) {
console.error(error);
document.getElementById('status').innerText = "Error fetching conversion rate.";
}
}
설명:
- Office.onReady: Office 환경이 준비되면 추가 기능을 초기화합니다.
- convertCurrency 함수:
- 입력 통화를 읽습니다(fromCurrency 및 toCurrency).
- 입력을 검증하고 API를 통해 환율을 가져옵니다.
- Excel.run을 사용하여 선택한 Excel 셀에 변환을 적용합니다.
- 작업 창에 성공 또는 오류 메시지를 표시합니다.
- 오류 처리: API 또는 Excel 런타임 오류를 포착하고 기록하여 사용자 피드백을 제공합니다.
4단계. 추가 기능 테스트
추가 기능을 테스트하여 Excel에서 어떻게 작동하는지 확인해 보겠습니다.
- 프로젝트 폴더에 없으면 터미널에서 프로젝트 폴더로 이동하세요.
- VS Code 터미널에서 다음 명령을 실행하세요.
- 개발 서버를 시작하려면 다음 명령어를 실행하세요.
- 다음 질문이 표시됩니다. “? Microsoft Edge WebView에 대해 로컬 호스트 루프백을 허용하시겠습니까?”
- 유형:예
이 명령은 Excel 파일을 실행합니다.
- Excel이 열리고 추가 기능이 작업 창에 자동으로 로드됩니다.
- 원본 통화 값이 포함된 셀 범위를 선택하세요.
- A2:A10 셀을 선택했습니다.
- 보낸사람 상자:USD를 입력하세요. 그리고 받는 사람 상자:EUR 입력 .
- 변환을 클릭하세요. .
5단계:추가 기능 배포
Office 365에 배포하거나 공유하여 조직 내에서 사용할 수 있습니다. 추가 기능을 패키징하고 Office 스토어에 업로드하면 됩니다.
추가 기능을 패키징하는 방법은 다음과 같습니다.
- 터미널에서 다음을 실행하세요:
- 이렇게 하면 웹 서버에서 호스팅하거나 Azure와 같은 클라우드 서비스에 업로드할 수 있는 추가 기능의 프로덕션 빌드가 생성됩니다.
공통적인 환경 설정 문제 및 해결 방법
- 스크립트 실행 정책 오류(npm.ps1을 로드할 수 없음)
- 해결책: 다음을 실행하여 실행 정책을 설정하세요:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
- 요 명령이 인식되지 않습니다
- 해결책: 다음을 실행하여 Yeoman이 올바르게 설치되었는지 확인하세요:
- 설치 실행을 확인하려면:
- 패키지 설치 시 권한 문제
- 해결책: PowerShell 또는 명령 프롬프트를 관리자로 실행하거나 –force를 사용하세요. 설치 중 플래그를 지정합니다.
결론
위 단계에 따라 Excel에서 통화 변환기 추가 기능을 만들 수 있습니다. 개발 환경을 설정하고, 추가 기능을 구축하고, JavaScript를 사용하여 기능을 구현하는 방법에 대한 자세한 단계를 다루었습니다. 더 많은 고급 기능을 추가하여 이 추가 기능을 더욱 확장할 수 있습니다.
솔루션이 포함된 무료 고급 Excel 연습을 받아보세요!