구글 번역 googleTranslate API, 웹페이지 번역 2/2

이번에는 번역기능을 구현하는 내용을 작성할까 한다.

 

이전에 작성하던 내용 중 googleTranslate API의 키를 잘 보관하고 있으니 API 키를 발급 못 받은 사람들은 이전 게시물로 확인해서 발급받아야 한다.

https://peynes.tistory.com/entry/%EA%B5%AC%EA%B8%80-%EB%B2%88%EC%97%AD-googleTranslate-API-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%B2%88%EC%97%AD-12

구글 번역 googleTranslate API, 웹페이지 번역 1/2

 

구글 클라우드에 Translate API를 통해서 내가 만드는 웹사이트, 페이지에 있는 HTML 텍스트를 번역해서 출력하는 기능을 구현 해보도록 하자.

 

1. 구글 번역 GoogleTranslate 컴포넌트 생성

디렉토리 구조에서 웹사이트 'page'를 구현하는 폴더를 "pages" 디렉터리를 만들어 구글 번역 컴포넌트 작성 하자.

import { useState } from 'react';

const Translate = () => {
  const [text, setText] = useState('');
  const [translatedText, setTranslatedText] = useState('');
  const [language, setLanguage] = useState('es');

  // 번역버튼으로 클릭시에 호출되는 함수이다.
  const changeLaguage = async () => {
  	// API를 호출해준다.
    const response = await fetch('/api/translate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ text, language }), // JSON 형식으로 텍스트, 언어 데이터를 'body'에 담아 전송
    });
    const data = await response.json();
    setTranslatedText(data.translatedText);
  };

  return (
    <div>
      <h1>Google Translate API TEST</h1>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        rows="4"
        cols="50"
        placeholder="입력 해주세요"
      ></textarea><br />
      <select value={language} onChange={(e) => setLanguage(e.target.value)}>
        <option value="en">영어</option>
        <option value="fr">프랑스어</option>
        <option value="de">독일어</option>
      </select>
      <button onClick={changeLanguage}>번역</button>
      <h2>번역 내용:</h2>
      <div>{translatedText}</div>
    </div>
  );
};

export default Translate;

예시를 보면 'useState' 훅을 사용해서 상태를 관리허면서 텍스트를 관리해 준다.

2. 구글 번역 GoogleTranslate 엔드포인트 설정하기

api 관리해주는 파일이 필요하다 파일 이름은 "trasnlateApi.js"로 생성해서 Google Translate API를 호출을 담당하는 코드는 작성한다. 

텍스트와 선택할 수 있는 언어 데이터를 google translate API 전달 후 번역한 텍스트로 리턴되는 걸 설정해준다.

export default async function handler(req, res) {
  if (req.method === 'POST') { 
    const { text, language } = req.body;
    const apiKey = process.env.Google_API_Key; //환경변수로 api 키 가지고홈
    const url = `https://translation.googleapis.com/language/translate/v2?key=${apiKey}`;
    
    //API 
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        q: text,
        target: language,
      }),
    });
    
    const data = await response.json(); // 응답온 번역 데이터 data변수로 
    res.status(200).json({ translatedText: data.data.translations[0].translatedText});
  } else {
    res.status(405).end();
  }
}

여기 코드에서 가장 중요한 기능들이 수행이 된다.

• 'req.method' 체크해서 POST 요청해 처리한다.
• 'req.body' 보내온 텍스트, 언어 데이터를 추출
• API요청 보내고 request 받아서 번역된 텍스트를 반환해 준다.

3. 구글 번역 GoogleTranslate 기능 테스트 하기

마지막 단계이다. 

여기서 테스트를 거쳐서 디버깅을 하며  필요의 경우 수정해서 완성해야 한다.

npm run dev

로컬 서버를 시작할 때 터미널에서 위에 같이 명령어 입력해서 실행 후 터미널에 나오는 로컬 주소를

브라우저 이동해서 텍스트 입력 후 번역 버튼 클릭하여 원하는 언어로 번역이 되는지 확인하여 마무리할 수 있다.

 

마지막으로는 검토하며 문제해결할 수 있다.

 

이렇게 해서 google translate API활용해서 번역할 수 있다.

현제 필자는 API 활용해서 웹페이지에 HTML 텍스트를 자동 번역을 하는 기능을 구현 중이다.
이 프로젝트도 완료가 된다면 정리해서 다음에 추가로 더 올려 보도록 하겠다.