[미니 프로젝트] 파파고 만들기

https://papago.naver.com/

파파고를 만들기 위한 준비

1. 파파고 html파일 만들기
2. node.js 다운로드
3. 파파고 open api를 사용하기 위한 네이버 계정

1. 파파고 html 파일

파파고 html 파일은 Papago폴더 > public 폴더 안에 넣어주었다.
Tailwind를 사용해 CSS 파일 없이 스타일을 넣어주었다. (내가 하진 않았다.)
tailwind.config.js 파일을 만들어 설정을 해주고,
Tailwind의 자동 완성 기능을 사용하고 싶다면 extensions에서 Tailwind CSS IntelliSense를 설치해보자

2. node.js 다운로드

파파고의 번역 api를 사용하려면 html과 js파일만 있어서는 안된다.
파파고 번역 api에 요청하고 이에 관한 응답을 받아 넘겨줄 서버가 사이에 있어야 한다.
클라이언트 -> 서버(현재는 로컬) -> 파파고 서버
js를 배우고 있는 만큼 server는 node.js로 구현하였다.

node.js 서버 만들기

1. 일단 node.js 서버를 만드려면 node.js를 설치해야한다.
   https://nodejs.org/ko
   위 사이트에 접속하여 다운을 받자!
   여기서 주의할 점은 최신버전이라고 다 좋은 것이 아니기 때문에 나는 좀더 안정적인 LTS를 다운했다.
   설치 중에 별다른 세팅은 만지지 않았다.
   설치 완료 후 node -v 를 입력했을 때 nodejs의 버전이 나오면 성공!
2. vscode에서도 잘 깔렸는지 확인해보자
   Ctrl + ~을 누르면 터미널이 열리는데 나는 powershell말고 cmd로 설정하였다.
   

   

   
   cmd에서는 확인이 됐는데 vscode에서는 확인이 안된다면?? -> vscode를 껐다 켜보자!
3. npm i express
   nodejs만 설치한다고 해서 서버가 돌아가는 것은 아니다.
   express라는 웹 프레임워크를 설치해주도록한다.
   nodejs가 설치되었다면 npm(Node Package Manager)를 통해 다양한 패키지를 설치할 수 있다.

   C:\경로>npm i express

4. 의존성(dependency)
   express 프레임워크를 install하게 되면 node_modules와 package.json파일이 생성될 것이다.

node_modules/: 실제 라이브러리 코드들이 위치한 폴더
node_modules 같은 경우 서버 구동에 필요한 패키지들이 함께 들어 있는 패키지로 project가 express에게 의존하고 있다라고 얘기할 수 있다
프로젝트는 express없이 구동될 수 없기 때문
또한 express는 하위 패키지들에게 의존하고 있다고 말할 수 있다. (하위 패키지들 없이 express 사용 불가)
express만 설치했는데 하위 패키지가 같이 다운받아지는 이유는 자동으로 의존성 관리가 됐기 때문이다.
node_modules 폴더 안에는 많은 패키지들이 있기 때문에 깃허브에 올리지 않는다.
그렇다면 다른 사람이 깃헙에 올린 nodejs 파일을 구동시키고 싶을 때 어떻게 해야할까??
-> npm i 를 입력하면 package.json에서 express 버젼을 가져오고 저절로 의존성을 주입해준다.
package.json : 해당 프로젝트에 대한 메타 정보
- 어떤 라이브러리를 사용 중인지
- 어떤 명령어를 가지고 있는지
- 프로젝트 작성자, 설명 등
package.json을 보면 dependencies에 버전들을 관리할 수 있다.
또한 "scripts":{}를 사용해 명령어를 정의할 수 있다.

// npm start -> node server.js 시작
{
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

npm init을 사용하여 메타정보를 세팅할 수 있다.
package.json이 있는데 오류나요
-> 위치를 잘 봐보기! server파일과 한 폴더에 넣어주시라요~~

3. 파파고 open api를 사용하기 위한 네이버 계정

https://developers.naver.com/docs/papago/README.md
위 사이트를 보면 파파고 open api 사용법을 알 수 있다.
https://developers.naver.com/docs/papago/papago-nmt-api-reference.md
API 레퍼런스에 들어가보면 어떤 url에 어떤 메소드로 파라미터는 무엇을 보내야하는지 나와있다.
응답이 오는 형식도 나와있으니 참고하여 원하는 정보를 가져올 수 있다.

const options = (method, headers, body) => {
    return {method, headers, body: JSON.stringify(body)}
}

// 번역 API에 필요한 request 객체를 생성해준다.
const op2 = options('POST', {'Content-Type': 'application/json'}, {source: sourceSelect.value, target: targetSelect.value, text: sourceText})

// Promise객체를 반환받고 api호출이 성공했을 때는 response를 resolve하고 실패했을 때는 error을 reject한다.
await fetch('/translate', op2)
    .then(r => r.json())
    .then(data => {
        targetTextArea.value = data.message.result.translatedText
    }).catch(err => console.error(err));

이렇게 나의 로컬 서버로 요청을 보내면 이제 로컬 서버에서는 papago 서버에 api를 통해서 요청하고 응답받게 된다.
https://developers.naver.com/docs/papago/papago-nmt-example-code.md
예시는 위를 참고하였고

// 미들웨어 설정
app.use(express.static('public')); // 정적인 자원은 public 폴더에 있음
app.use(express.json()) //역질렬화 처리용 모듈

app.post('/translate', function(req, res){
    const api_url = 'https://openapi.naver.com/v1/papago/n2mt'
    const request = require('request')
    console.log(req.body);
    const options = {
        url: api_url,
        form: req.body,
        headers: {'X-Naver-Client-Id': clientId,
        'X-Naver-Client-Secret': clientSecret}
    }
    request.post(options, function(error, response, body){
        if (!error && response.statusCode == 200) {
            res.send(body);
          } else {
            res.status(response.statusCode).end();
            console.log('error = ' + response.statusCode);
          }
    })
})

보내달라는 거 보내주고(papago 서버에) 파파고 서버로부터 받은 응답을 다시 넘기는 코드이다.

가장 어려웠던 점

아무래도 가장 어려웠던 점은 fetch().then().catch()의 사용법과 async, await의 사용법이었다.
또한 json파일을 직렬화하고 서버에서 역직렬화를 처리하는 미들웨어를 설정했던 부분을 처음 알게 되었다.
동기 비동기, Promise 객체에 대해서는 다음 포스팅에 다룰 예정이다.ㅎㅎ
확실히 디자인과 배치만 하는 것보다 실제 로직을 가지고 구동되는 서버를 만들어보니 재미있었고 시간가는 줄 몰랐던 것 같다.
그리고 clientId와 clientSecret같은 예민한 정보들은 따로 .env파일에 빼야하는데 아직 빼지 않았다.(깃에 올라가면 안되기 때문)

npm i dotenv

로 dotenv lib를 설치해준다음

// .env
CLIENT_ID=~~~
CLIENT_SECRET=~~~

에 넣어준다음 require("dotenv").config(); 꺼내는 코드보다 위에 쓰고
process.env.CLIENT_ID 이런식으로 꺼내쓰면 된다.
(ES 모듈은 require대신에 import 사용)
마지막으로 .gitignore에 .env 파일을 넣어주면 git에는 올라가지 않게 된다.

 

※ 추가

디바운싱 : 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

쓰로틀링 : 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

파파고 번역창에 번역하고 싶은 내용을 입력할 때 키보드 인풋이 들어올 때마다 함수를 호출 즉 api를 호출하게 됩니다.유료 api나 호출 제한이 걸린 api라면 어마어마한 낭비가 일어날 수 있겠죠??이를 방지하기 위해 특정 시간 안에 인풋이 들어오면 clearTimeout을 사용해 다시 타이머를 리셋시킵니다.특정 시간동안 인풋이 없다면 그때 아 입력을 완료했구나! 하고 보내게 됩니다.

// 디바운싱 & 쓰로틀링
let debouncer; // timerId 값을 저장하는 변수
sourceTextArea.addEventListener('input', (e) => {
    if(debouncer) clearTimeout(debouncer);

    debouncer = setTimeout(async() => {
        const sourceText = e.target.value;

        // 첫 번쨰 요청: 언어 감지 기능 -> server.js(Node서버)로 전송
        await detectLanguage(sourceText);
        

    }, 2000); // 2초 후에 콜백함수 동직

})