티스토리 블로그 카카오 번역 API 적용

#함께보면_좋은글

sangminem.tistory.com/160

티스토리 블로그(홈페이지) GTranslate 구글 번역 위젯 적용

 

이어서 Kakao 번역 API 적용에 대해서도 알아 보도록 하겠습니다.

 

developers.kakao.com/docs/latest/ko/translate/common

Kakao Developers

API를 활용하는 방법은 커스터마이징이 용이하다는 장점이 있는 반면에

무료이기 때문에 API 호출 건수에 제한이 있습니다.

 

일단 적용 방법을 알아 보겠습니다.

 

먼저 아래 사이트에서 계정을 만듭니다.

developers.kakao.com

Kakao Developers

그리고 내 애플리케이션 > 애플리케이션 추가하기 를 선택하여

앱 이름과 사업자명을 적당히 적습니다.

 

그리고 앱설정 > 플랫폼 > Web 플랫폼 등록 을 선택합니다.

본인의 블로그나 홈페이지 주소를 적어 줍니다.

 

앱설정 > 앱 키 에서 플랫폼별 키를 알 수 있습니다.

이제부터 적용할 번역 API는 REST API 키를 사용합니다.

 

 

 

 

여기서는 언어 감지 및 번역 API를 활용하여 번역하는 기능을 만들어 볼 건데요.

샘플 코드를 참고하여 GET 방식으로 자바스크립트 코드를 작성해 보겠습니다.

 

다음은 언어 감지 API 호출 샘플입니다.

 

function detectLang(str) {
    return new Promise(function(resolve, reject) {
        $.ajax({
            type: "GET",
            url: "https://dapi.kakao.com/v3/translation/language/detect?query="+str,
            dataType: 'json',
            headers: {"Authorization": "KakaoAK KKKKKKKKKKKKKKKKKKKKKKK"},
            data: {},
            success: function (data){
                var res = null;
                var confidence = data.language_info.map(function(v){return v.confidence});
                var index = confidence.indexOf(Math.max.apply(null, confidence));
                resolve(data.language_info[0].code);
            },
            error: function (xhr,ajaxOptions,throwError){
                reject(throwError);
            }
        });
    });
}

jQuery의 ajax 메서드를 이용하여 번역할 언어를 파라미터로 넘겨주고

어떤 언어인지 판단하여 코드를 넘겨 받도록 작성하였습니다.

 

이어서 번역 API 호출 샘플입니다.

function translate(str) {
    return new Promise(function(resolve, reject) {
        $.ajax({
            type: "GET",
            url: "https://dapi.kakao.com/v2/translation/translate?src_lang=kr&target_lang=en&query="+str,
            dataType: 'json',
            headers: {"Authorization": "KakaoAK KKKKKKKKKKKKKKKKKKKKKKKKKKKK"},
            data: '{}',
            success: function (data){
                resolve(data.translated_text[0][0]);
            },
            error: function (xhr,ajaxOptions,throwError){
                reject(throwError);
            }
        });
    });
}

소스 언어는 한국어, 타겟 언어는 영어로 고정하고 넘겨받은 문장을 번역하는 함수도 하나 작성하였습니다.

 

 

 

 

앞서 구현한 언어 감지 및 번역 기능을 활용하여 샘플 함수를 작성해 보겠습니다.

async function transContent() {
    for(var i=0;i<4;i++) {
        var dom = $('.tt_article_useless_p_margin > p#'+i);
        var str = dom.text().trim();
        if(str){
            try {
                var langCode = await detectLang(str);
                if(langCode === 'kr') {
                    var res = await translate(str);
                    dom.after('<p style="color:#6a79ff;">'+res+'</p>');
                }
            } catch(e) {
                console.log(e);
            }
        }
        await delay(1000);
    }
}

일단은 간단하게 이 부분부터 4줄을 번역해 보겠습니다.

단시간 과도한 호출을 막기 위해 위에서 부터 한 줄씩 1초 간격으로 호출하는 함수입니다.

 

실제 호출 테스트를 위해 버튼을 하나 만들어 놓을테니 한 번씩 클릭해 보세요.

여기까지만 번역하겠습니다.

 

 

번역 예시 부분은 에디터 HTML 모드에서 다음과 같이 작성하였습니다.

 

번역한 결과는 다음과 같습니다.

위젯으로 번역할 때와는 다르게 한글 원문을 그대로 남겨 놓아 보았습니다.

 

 

더 필요한 정보가 있으시면 아래 문서를 참고 바랍니다.

developers.kakao.com/docs/latest/ko/translate/dev-guide

Kakao Developers