Correct Sentences는 영어 문장을 입력하면 올바르게 교정해주는 애플리케이션이다.
혼자서 영어를 공부하면서 틀린 문장을 교정받을 수 없었기 때문에 잘못된 표현을 익히는 것 같았다. 돈을 들이지 않고 손쉽게 영어를 배울 수 있는 방법이 없을까 고민하다가 OpenAI를 접하게 되었다.
OpenAI에 질문을 하여 내가 원하는 답을 얻을 수 있기 때문에 나의 AI 영어선생님이 되기에 아주 적합하다 여겼다.
Next.js는 React 라이브러리의 프레임워크이다. 기본적으로 React는 Client Side Rendering(CSR)를 한다. 웹사이트를 요청했을 때 빈 html을 가져와 script를 로딩하기 때문에 첫 로딩 시간도 오래걸리고 Search Engine Optimization(SEO)에 취약하다는 단점이 있다.
반면 Next.js는 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있다. pre-reloading은 SSR 뿐만 아니라 SSG(Static-Site Generate)도 가능하게 해준다.
Not yet
https://learning-english-alpha.vercel.app
For building and running the application you need:
git clone https://github.com/YeonsuBaek/learning-english.git
npm install
npm run dev
- OpenAI API
- Speech Synthesis
자바스크립트가 제공하는 내장 Web Speech API인 Speech Synthesis를 사용하였다.
- react-copy-to-clipboard
react-copy-to-clipboard 라이브러리를 이용하여 클릭 시 텍스트가 클립보드에 복사되는 기능을 구현하였다.
- API key를 포함해 Vercel에 배포하기
Vercel에 배포하면서 겪은 500 에러를 해결하였다.