Vscode 플러그인 리팩토링 - async & await

리팩토링 목표

 

1. 비동기 함수 정리

2. 쓸모없는 코드 삭제

3. 나중에 다시 봐도 바로 이해가 될 정도로 코드 정리

4. async & await 익숙해지기

 

현재 사용하고 있는 API는 2가지 입니다.

 - 파파고 언어 감지 API

 - 네이버 번역 API

 

 

       
  // 함수 시작
        papago(text).then(
              function(data: any){
                translationText(editor, data.langCode);
            }
        );
        
 	var data = new FormData();
        data.append("json", JSON.stringify({'query' : text}));


// papago API
        function papago(text: any){
            return new Promise( function(resolve, reject){
                const naver_header = {
                    'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8',
                    'X-Naver-Client-Id' : '---------------',
                    'X-Naver-Client-Secret' : '----------'
                };
                console.log('언어입니다 : ', text);
                
                let language = fetch(`https://openapi.naver.com/v1/papago/detectLangs`, {
                    method : 'POST',
                    headers: naver_header,
                    body : `query=${text}`
                }).then( res=> res.json());
                resolve(language);
            });
        }
   
   
   function translationText(editor: any, langCode: any) {
            let source = langCode;
            let target = 'en';
            let query = text;

            const translation_headers = {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                'X-Naver-Client-Id': '----------------------',
                'X-Naver-Client-Secret': '-----'
            };
            if (langCode == 'en') {
                source = 'en';
                target = 'ko';
            }

            query = encodeURI(query);
            return fetch(
                `https://openapi.naver.com/v1/papago/n2mt`, {
                    method: 'POST',
                    headers: translation_headers,
                    body: `source=${source}&target=${target}&text=${query}`
                }).then(
                    (res: Response) => {
                        console.log('res-----', res);
                        if (res.status == 200) {
                            console.log('성공');
                            return res.json();
                        }
                    }
                ).then(resJson => {
                    console.log('result', resJson);
                    var data = resJson.message.result;
                    successRef.push({
                        'Source': source,
                        'Text': text,
                        'Translation': data.translatedText,
                        'Time': time
                    });
                    editor.edit((edit: any) => edit.replace(selection_range, String(data.translatedText)));
                })
                .catch((error: Error) => {
                    console.log('실패', error);
                    errorRef.push({
                        'Text': text,
                        'Source': source,
                        'Time': time
                    });
                });
        }

 

기존 코드의 문제점

사용하지 않는 코드가 그대로 남아있다.

코드 흐름이 완전 이상해서 알아보기 힘들다.

 

 

함수 papago 를 먼저 수정해보자.

쓸모없는 promise를 없애고 await로 흐름을 정리했다.

아래 코드만 보아도 언어감지 -> 언어번역은 알 수 있게 되었다.

        // papago 언어감지 API
        async function papago(text: any) {
            console.log('언어 감지할 Text', text);
            const papago_header = {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                'X-Naver-Client-Id': 'gBQ1QI8_eElsuFeCu8TC',
                'X-Naver-Client-Secret': 'UPHmuQo2zi'
            };
            try{
                let language = await fetch(`https://openapi.naver.com/v1/papago/detectLangs`,{
                                                method: 'POST',
                                                headers: papago_header,
                                                body: `query=${text}`})
                                                .then(res => res.json());
                let translate = await translationText(editor, language.langCode);
            }catch(err){
                errorRef.push({
                    'Error': err,
                    'Time': time
                });
                vswindow.showInformationMessage(err);
            }
        }
        papago(text);

 

translationText 함수를 보니 매우 지저분해 보이고 papago 함수에 넣어서 await로 순차적으로 진행하면 될 것 같습니다.

 

 

최종 코드

	const papago_header = {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
            'X-Naver-Client-Id': '------------',
            'X-Naver-Client-Secret': '-'
        };
	const translation_headers = {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
            'X-Naver-Client-Id': '----------',
            'X-Naver-Client-Secret': '---'
        };


// papago 언어감지 API
        async function translator(text: any) {
            console.log('언어 감지할 Text', text);

            let target = 'en';
            try{
                let language = await fetch(`https://openapi.naver.com/v1/papago/detectLangs`,{
                                            method: 'POST',
                                            headers: papago_header,
                                            body: `query=${text}`})
                                            .then(res => res.json());

                if(language.langCode == 'en') target = 'ko';
                
                let translate = await fetch(`https://openapi.naver.com/v1/papago/n2mt`, {
                                            method: 'POST',
                                            headers: translation_headers,
                                            body: `source=${language.langCode}&target=${target}&text=${text}`})
                                            .then(res=> res.json());
                
                await editor!.edit((edit: any) => edit.replace(selection_range, String(translate.message.result.translatedText)));
                await successRef.push({
                        'Source': language.langCode,
                        'Text': text,
                        'Translation': translate.message.result.translatedText,
                        'Time': time
                });
            }catch(err){
                errorRef.push({
                    'Text': text,
                    'Error': err,
                    'Time': time
                });
                vswindow.showInformationMessage(err);
            }
        }
        translator(text);

 

변경 사항

1. async & await 사용함으로써 한눈에 흐름이 보임

2. 변수 이름 변경

 - naver_header 를 papago_header로 변경 -> papago 언어 감지 헤더, naver 번역기 헤더 2개라 확실하게 하기 위함

3. 만들고 사용하지 않는 코드 삭제

 

 

코드 흐름이 언어 감지 -> 언어 번역 -> vscode에 결과 표시 -> 데이터 저장이 눈에 보입니다.

코드 라인도 엄청 줄어든 것을 확인했습니다.