[Node.js] 네이버 파파고 API Node.js에서 사용하기

네이버 파파고 클론 코딩을 하면서 이 코딩에 핵심인 파파고 API를 쓰는 방법을 정리해보려한다.

??? : 예? 저는 파*고 아닙니다. 아무튼 아닙니다.

우선 Node.js 개발환경이 구성되었다는 가정 하에 진행한다.

제일 먼저 할 일은 네이버 개발자 센터에서 내 애플리케이션을 등록하고, API 키를 발급받는 것이다.

https://developers.naver.com/main/

NAVER Developers

이 사이트에서 내 애플리케이션을 등록하고, 사용할 API를 지정하는 등 과정을 모두 마치면

하단의 사진 처럼 ID와 비밀번호를 발급받는다.

이 정보는 절대 깃 등에 업로드 하면 안된다. 1일 할당량이 있어서 이를 초과하면 그 날은 더 이상 해당 api를 사용할 수 없기 때문이다.

이 일일 할당량은 아래의 bar로 확인 가능하다.

이 처럼 개발자 센터에서의 세팅을 끝냈으면, Node.js에 dotenv를 npm으로 설치해서 .env 파일을 만든다.

npm i dotenv

이 작업을 하는 이유는 위의 api 키의 보안을 위해서 이다.

.env 파일안에는 

CLIENT_ID=your_id
CLIENT_SECRET=your_secret

이런 형식으로 입력한 후, 

const dotenv = require('dotenv');
dotenv.config();

const clientId = process.env.CLIENT_ID
const clientSecret = process.env.CLIENT_SECRET

이런 식으로 js 파일에서 불러와서 사용한다.

 

네이버 개발자 센터에 들어가면, Node.js의 코드 예시가 api 별로 있다.

나의 예제에서는 언어감지와 번역을 사용할 것이기 때문에 아래의 두 가지 문서를 참고했다.

https://developers.naver.com/docs/papago/papago-nmt-overview.md

Papago 번역 - Papago API

https://developers.naver.com/docs/papago/papago-detectlangs-overview.md

언어 감지 - Papago API

 

언어 감지 코드를 먼저 작성해보았다.

프론트에서 번역할 문장을 JSON parse를 이용해 가져온 후, 지정된 api url을 통해서 언어감지 요청을 보낸다.

이후 감지된 것을 다시 요청에 담을 것이다. (이후 번역 코드로 넘겨야 하기 때문이다.)

코드는 다음과 같다.

app.post('/detectLangs', (req, res) => {
    // 번역할 문장 가져오기
    const { text:query, targetLanguage } = req.body;
    const url = 'https://openapi.naver.com/v1/papago/detectLangs';

    const options = {
        url,
        form: {query},
        headers: {'X-Naver-Client-Id':clientId, 'X-Naver-Client-Secret': clientSecret}
    }

    // options에 요청에 필요한 데이터 동봉
    request.post(options, (error, response, body) => {
        if (!error && response.statusCode == 200) {
            console.log(body);
            const parsedBody = JSON.parse(body);
            
			// 쿼리 스트링으로 데이터 전송 (GET 요청)
            res.redirect(`translate?lang=${parsedBody['langCode']}&targetLanguage=${targetLanguage}&query=${query}`);
        } else {
            console.log('error = ' + response.statusCode);
        }
    });
    

});

이후 감지된 언어 코드와 번역할 언어의 코드, 번역할 문장(쿼리)를 가지고 번역 코드로 이동한다.

번역 코드는 이 정보를 받아서 번역 api를 통해 번역하고, 이때의 결과 값을 응답 객체로 만들어 프론트에 다시 전달한다. 

코드는 다음과 같다.

app.get("/translate", (req,res) => {
    const url = 'https://openapi.naver.com/v1/papago/n2mt';
    console.log(req.query);
    const options = {
        url,
        form: {
            // 쿼리 스트링으로 받은 값을 mapping or binding
            source: req.query['lang'],
            target: req.query['targetLanguage'],
            text: req.query['query'],
        },
        headers: {'X-Naver-Client-Id':clientId, 'X-Naver-Client-Secret': clientSecret}
    }

    request.post(options, (error, response, body) => {
        if (!error && response.statusCode == 200) {
            res.json(body); // 프론트에 보내는 응답?
        } else {
            console.log('error = ' + response.statusCode);
        }
    });
});

이후 프론트는 이 정보를 받아와 화면에 뿌려주면 된다.

 

간단하게 API를 사용하는 코드를 작성해보았는데, 동작할 때 너무 신기했다.

진행하는 미니 프로젝트에서 api 이용해보려고 하는데, 이걸 참고해서 진행해야겠다.

프로젝트하는 건 재밌긴 한데, 코드 짜는 건 힘들다. 힘듬이 재미를 이긴다.

머리가 무거워지는 게 실시간으로 느껴진다.

거의 이 상태로 코드 짠다

문서화하는 연습을 열심히 하긴 하는데, 어렸을 때부터 노트필기 잼병이었던 나는 솔직히 티스토리 쓰는 것도 힘들어 죽겠다. 아니 할 말은 있는데 정리가 안된다니까요

 

내일까지 미니 프로젝트 완성해야 하는 데 그냥 자고 싶다. 침대와 혼연일체를 꿈꾸며