[AWS번역기]뚝딱 만들어버린 번역기 - CodeHan의 SideProject

 

최근에 유튜브에서 너무 거창한 웹이 아니고 기본적이고 간단한 기능을 가진 웹도 큰 수익을 가져다준다는 영상을 봤다.

simmillarweb이라는 사이트에서 방문자 수 분석을 대략적으로 해주는데, 대략적인 수치지만 그 방문자 수는 어마어마했다.

검색해본 웹은 날씨웹, 메모장, 계산기 등 정말 심플하지만 자주 사용하는 것들이었다.

나도 여기에서 아이디어를 얻어서 번역기를 만들어보고자 했다.

 

번역 API를 제공하는 사이트 중에서 AWS에서 제공하는 번역기가 글자수 제한도 크고 초과 비용도 저렴해서 

AWS를 선택했다.

 

결과적으로 며칠만에 뚝딱! 만들어버렸다.

https://www.kindtranslator.com/

KindTranslator

 

 

 

처음으로 사이트 만들고 도메인까지 구매해서 배포해봤다. 가격은 연13달러 정도였고 내년엔 17달러 정도 된다고 한다.

나름 의미있는 경험이었고 뭔가 내 사이트가 된 것 같아서 좋았다.

 

만들면서 겪은 문제들?을 하나하나 나열해보도록 하겠다.

 

1. 바닐라 자바스크립트 라우팅

리액트에서는 react-Router로 쉽게 라우팅을 했었는데 바닐라 자바스크립트로 하려니까 뭔가 어려웠다.

번역기 사이트라 일어, 중국어, 영어로 된 html파일을 만들었는데 이걸 어떻게 해야하지 하다가 그냥 사용언어 설정 옵션을

만들어서 선택하면 바로 해당 html파일이 load되게 만들었다. 쉽게쉽게 끝날 것 같아서 그냥 자바스크립트로 코딩했는데

이럴거면 그냥 리액트 쓸 걸 그랬다..ㅎㅎ

 

2. 클립보드 복사 기능

document.command에 copy기능이 있어서 처음에는 이걸로 구현했었다. 하지만 모바일환경(Safari-Iphone12Pro)에서

테스트했더니 먹히질 않았다. 그래서 역시 구글링으로 cilpboardJS라는 라이브러리를 찾아내서 해결했다. 깔끔하고 좋은 것 같았다.

 

3. AWS SDK불러오기

AWS Translate기능을 사용하는데 있어서 문서를 참고했지만 어려움이 있었다. 예시코드도 잘 안보이고 SDK를 npm으로 다운해서 쓰라는데 문서화가 잘 된 것 같지만 뭔가 내겐 어려웠다. AWS웹을 열심히 서칭해서 SDK를 커스터마이징해서 원하는 기능만 넣은 js파일을 받을 수 있었다. 그래서 원하는 기능만 넣고 다운받아서 사용했다. 문서활용 능력을 조금 기를 필요가 있다고 느꼈다.

 

4.npm build문제

프로젝트 폴더 파일을 구성이 번잡하긴 했다. 난 언어별로 html을 다르게 썼기 때문에 딱 하나의 index.js파일도 없었고 js파일도 언어별로 다르게 불러와야할 내용들이 있어서 거의 html파일 안에 inline해서 썼다.(덕분에 코드가 좀 더러워졌다)

그렇다보니 build에서 index.html파일도 찾지 못하고 index.js파일도 찾지 못해서 난항을 겪었다.

기존에 create-react-app에서 사용했던 파일 구조도 보고 구글링으로 사람들이 사용하는 것도 보면서 번역기 프로젝트 파일 구조를 index.html파일 하나, js파일 하나, public폴더, 나머지 language.html파일로 나눠서 build하니까 문제없이 잘 진행 됐다. 

 

나열한 문제들 말고도 사소한 것들이 있었지만 그건 패스하도록 하자..다시 순수 JS로 코딩하면서 느낀 점은 React가 편하긴 하다는 것.. 처음 react를 공부했을 때 작은 component단위로 쪼개서 코딩하는 게 매우 번거롭다 생각했지만, 편리함을 위한 과정이었다는 것을 깨달았다. 

 

지금 main으로 준비하고 있는 프로젝트는 Snichat이지만 잠시 딴길로 새서 완성한 번역기...나름 재미있었다.

이제는 다시 Snichat에 집중해보자!!