개인용 언어학습앱 만들기 (feat. Google API)

Terminal

git clone https://github.com/h662/cra-tailwind-template-2.git review-english

cd folder

npm install

npm run start

npm i react-router-dom

App.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Main from "./pages/main";
import Day from "./pages/day";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/:day" element={<Day />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

Pages/main.jsx & day.jsx

main.jsx

const Main = () => {
    return <div>main</div>;
};

export default Main;

day.jsx

import { useParams } from "react-router-dom";

const Day = () => {
  const { day } = useParams();

  return <div>Day {day}</div>;
};

export default Day;

음성 API 가져오기 - Google tts

https://cloud.google.com/text-to-speech?hl=ko

• error 안 뜨려면 Cloud Text-to-Speech 사용 눌러줘야 함