강디너의 개발 일지

운영중인 Vscode 플러그인을 잠깐 소홀하게 뒀더니 깜짝 놀랄 일이 생겼었다. 사용자는 많이 늘지 않았는데 갑자기 사용량만 엄청 많이 늘었다. 결국 네이버 API 일일 허용량 초과로 이어졌으니... 갑작스런 변화에 이상해서 저장 데이터를 확인했다. 음....; 으음..;; 번역하는데 딜레이가 있어 막 클릭해서 그런건지는 모르겠지만 어뷰징 대책이 필요했다. 1. 같은 단어를 같은 시간(분)에 검색하면 막기 - 시간은 분단위 까지 저장 중 2. 사용자 IP를 저장하고 하루에 100번 사용하면 막기 - Firebase DB에 저장 후 비교 1번, 2번 두개다 적용해야 할 듯 한데 사용자 IP를 막 저장해도 괜찮은지 고민이 되었다. 사용시 IP를 하루 동안 저장합니다. 위의 약관을 ReadMe에 추가하면 될 ..

번역기 플러그인을 만들고... vscode 를 쓰는 사람들은 대부분 ? 개발자니깐... 어떤 영어를 번역하는지 보고싶었다. 보려면 DB가 필요한데... 항상 켜져있어야하고... 흐음.. 하다가 찾은게 파이어베이스 !vscode 가 electron 기반이라고 듣고 electron 은 node 기반이니깐 firebase node 쪽을 써보면 되겠다 ! 싶어서 개발 착수 ...! 가이드를 보며 열심히 따라 했다. node 쪽은 admin(관리자) 로 개발 해야하며, 가이드가 너무 잘나와있어서 막 오랜시간 삽질을 안했다. 여기서 serviceAccount 는 구글에서 json 파일을 준다. 그곳에 API 키라든지 토큰이라든지 등등.. 중요한건 다들어가있다. db에 translate 라는 큰 가지를 만들고그 아래..

Vscode Extension (플러그인) 만들기_7 음... 어떻게하면 더 편하게 쓸수 있을까 생각하다가 어짜피 번역되서 나오는 값이 1개인데 굳이 선택하게 할 필요가 있을까 ? 라는 생각이 들어서 바로 번역되게 코딩을 해봤습니다.( + 카카오 API 허용량 넘으면 메시지 뜨게끔..) 바뀐점은translationText 함수가 editor 인수를 받게끔 해놨습니다.editor 를 밖으로 꺼내서 this 로 할려했는데 실패.. 그냥 함수를 실행할 때 editor 를 보내줍니다. translationText(editor); function translationText(editor: any) { console.log('-------testCode--------'); const src_lang = 'kr'; ..

Vscode Extension (플러그인) 만들기_6 시간을 많이 투자해서 결국 해냈습니다 ! vscode 내에서 텍스트 선택 후 번역 -> 카카오 번역기 -> vscode 선택한 단어 교체 로 하겠습니다. 완성된 코드는 https://github.com/DinnerKang/korean_translator 에 있습니다. 우선 코드부터 보여드리겠습니다. 설명보다 예제를 더 좋아하기에 ㅎㅎ function translationText() { console.log('-------testCode--------'); const src_lang = 'kr'; const target_lang = 'en'; let query = text; const headers = { 'Authorization': 'KakaoAK ..

Vscode Extension (플러그인) 만들기_5 커맨드 + 시프트 + p 누르지 않고 활성화 시키기위하여 작업해보겠습니다 ! 아 우선.. 함수 이름 바꿀께요 ~sayHello 였는데 언제까지 그대로 쓸순 없잖아요 ? package.json 파일을 수정해줍니다.json 파일은 주석이 안되기 때문에 지워주세요 !(설명을 위하여 적었습니다) 결과 ! 관련 문서 일부 입니다. menus -> 의 editor / context 를 이용하여 작성합니다. https://code.visualstudio.com/docs/extensionAPI/extension-points#_contributesmenus vscode extension 만드는데 문서가 생각보다 길고 많고.. 검색을 뭐라고 해야할지도 애매해서 찾기 힘..

Vscode Extension (플러그인) 만들기_4 본격적으로 코드를 직접 수정해볼껍니다. 참고 자료https://github.com/sculove/translator/blob/master/src/extension.ts 위의 코드를 보면서 작성하며 익혔습니다. 1. 선택한 텍스트 정보 얻기2. 선택한 텍스트를 번역? 할 준비하기 'use strict'; import { window as vswindow, commands, ExtensionContext, Range, } from 'vscode'; export function activate(context: ExtensionContext) { console.log('Congratulations, your extension "hello-world" is n..

Vscode Extension (플러그인) 만들기_3 저번 markdown 파일에서 업그레이드 버전입니다.단어수 체크할 때 Hi 를 계속 호출하기 귀찮으니자동으로 체크해주는 코드입니다. 우선 클래스를 하나 만들어 주고.. class WordCounterController { private _wordCounter: WordCounter; private _disposable: Disposable; constructor(wordCounter: WordCounter) { this._wordCounter = wordCounter; // subscribe to selection change and editor activation events let subscriptions: Disposable[] = []; win..

Vscode Extension (플러그인) 만들기_2 MD 파일의 문자 개수 측정하는 플러그인 예제 vscode page -> https://code.visualstudio.com/docs/extensions/example-word-count 우선 다시 폴더를 만들어주시고 extesion.ts 함수입니다. 계속 Hello World 만 쳐야 하는게 싫어서 Hi 로 바꿔봤습니다. // The module 'vscode' contains the VS Code extensibility API // Import the module and reference it with the alias vscode in your code below import { window, commands, Disposable, Exten..

Vcode Extension 만들기(플러그인 만들기) 어떤 발표자료를 보고.. 함수이름 만들때 번역기를 자주가는 나를 마주치고 결심했다.영어못하는 나를 위하여 번역 플러그인을 만들기로...만들려고 조사좀 해보니 이미 하나가 만들어져있.....ㅠ(제꺼 아녀요)https://marketplace.visualstudio.com/items?itemName=sculove.translator#overview 고수님들이 이미 만들어 놓으셔서..내 수준에 맞게 만들어 보려고 한다. 우선 vscode 에서 지원하는 extension 만드는 예제 따라하기 (이게 제목인가) vscode 공식 홈페이지https://code.visualstudio.com/docs/extensions/example-hello-world 사진에는..