[MyMemory] TypeScript 번역 API

 

프로젝트를 진행하면서, 영어로 된 문장을 한국어로 바꿔야 되는 일이 생겼다. 

서버를 켜지 않고도 번역 기능을 사용하고 싶어서, MyMemory를 선택하게 되었다.

( 원래는 다른 오픈 소스 API를 쓰려고 했었는데, Axios 에러와 CORS 문제가 생겨서 MyMemory로 )

 

어색한 문장들도 있지만, 나름 잘 번역이 되는 것 같아서 만족하고 있다. 

 

 

// src > components > Char > Huggingwrite.tsx

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { translateText } from '../../services/translateService';  // 서비스 파일 경로에 맞게 조정
import './Huggingwrite.css';

const Huggingwrite: React.FC = () => {
  const { t } = useTranslation();
  const [inputText, setInputText] = useState<string>('');
  const [translatedText, setTranslatedText] = useState<string | null>(null);
  const [loading, setLoading] = useState<boolean>(false);

  const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    setInputText(event.target.value);
  };

  const translateStory = async () => {
    setLoading(true);
    try {
      const result = await translateText(inputText, 'en', 'es'); // 'en'에서 'es'로 번역
      setTranslatedText(result);
    } catch (error) {
      console.error('Error translating text:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className='total huggingwrite-container'>
      <div className='mid1'>
        <h1 className="huggingwrite-title" style={{ textAlign: 'center' }}>{t('story')}</h1>
        <div className='midbox1'>
          <textarea
            value={inputText}
            onChange={handleInputChange}
            rows={4}
            cols={50}
            style={{ fontSize: '20px' }}
            placeholder={t('Enter your text here...')}
            className="huggingwrite-textarea"
          />
        </div>
        <button
          onClick={translateStory}
          disabled={loading}
          className={`huggingwrite-button ${loading ? 'loading' : ''}`}
        >
          {loading ? t('잠시 기다려주세요...⚡⚡⚡') : t('번역하기')}
        </button>
      </div>

      <div className='mid2'>
        <h1 className="huggingwrite-title" style={{ textAlign: 'center' }}>{t('translatedStory')}</h1>
        <div className='midbox2'>
          <div className="huggingwrite-story-container">
            {translatedText}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Huggingwrite;

 

// src > services > translateService.ts

import axios from 'axios';

// MyMemory API URL
const MYMEMORY_API_URL = 'https://api.mymemory.translated.net/get';

// 번역 함수
export const translateText = async (text: string, sourceLang: string, targetLang: string): Promise<string> => {
  try {
    // GET 요청을 통해 번역 수행
    const response = await axios.get(MYMEMORY_API_URL, {
      params: {
        q: text,
        langpair: `${sourceLang}|${targetLang}`,
      },
    });

    // 번역된 텍스트 반환
    return response.data.responseData.translatedText;
  } catch (error) {
    console.error('Error translating text:', error);
    throw error;
  }
};