파파고 번역기 VS Code Extension 개발기
코드
동기
번역을 위해 VS Code -> Chrome -> VS Code 하는 과정이 불편하다.
VS Code에서 바로 한글->영어 번역을 하고 싶다.
하지만 비용이 들지 않았으면 좋겠다.
요구사항
- 네이버 파파고 API
- VS Code Extension
- 번역 문구를 입력받기 위한 수단
- 네이버 파파고 API Client Id/Secret 입력받기 위한 수단
과정
아래의 링크를 참고하고 구글링을 열심히 하면서 개발하였습니다.
스케폴딩 Cli 설치
npm install -g yo generator-code
프로젝트 셋팅
아래의 명령어를 실행하는 패키지 관리자를 선택하는데 pnpm
은 안 하시는걸 추천합니다.
vsce package
하는 과정에서 문제가 발생할 수 있습니다.
yo code
개발환경
아래의 명령어를 실행해 파일 저장 시 재컴파일 되도록 준비
npm run watch
작업을 하면서 동작을 확인하고 싶을때마다
src/extension.ts
파일 연 뒤 F5
를 눌러 extension 테스트 환경 실행
특징
번역 문구를 입력받기 위한 수단
아래의 기능을 이용하면 번역 문구를 입력받기 위한 수단을 사용자에게 제공할 수 있습니다.
const input = await vscode.window.showInputBox({ placeHolder: '번역할 문구 입력', });
네이버 파파고 API Client Id/Secret 입력받기 위한 수단
VS Code Extension Context에 secrets 필드를 보면 SecretStorage라는 비밀정보를 저장할 수 있는 저장소를 제공합니다. 이걸 활용해 네이버 파파고 API Client Id/Secret을 입력 받아서 저장하는데 활용했습니다.
여기에 SecretStorage가 있습니다.
export function activate(context: vscode.ExtensionContext) { const secretStorage = context.secrets;
아래의 방식으로 Client Id/Secret을 입력받아 Secret Storage에 저장하도록 했습니다.
async function changeSecret({ secretStorage, key, inputPlaceholder, errorMessage, }: SecretOptions) { const secretInput = await vscode.window.showInputBox({ placeHolder: inputPlaceholder || `${key} 등록`, }); if (!secretInput) { throw new Error(errorMessage || `${key} 를 입력해주세요.`); } await secretStorage.store(key, secretInput); return secretInput; }
조금이나마 VS Code Extension을 개발하시는 분께 도움이 되면 좋겠네요.