Project/Translator
-
JS코드를 TS코드로 변환해보기Project/Translator 2023. 1. 2. 14:22
JS로 뚝딱 만들어냈던 번역기 코드에 TS를 적용해봤다. TS는 JS와 다르게 정적으로 Type을 받아오는 형식이다. JS는 동적으로 Type을 부여하기 때문에 발생하는 이런 저런 문제들이 많다. 이를 개선하기 위해 나온 것이 바로 TypeScript이며, 정적으로 타입을 부여하기 때문에 안정성이 높다. doTranslate함수는 AWS translate에 있는 translateText기능을 동작시킨다. 그래서 이 함수가 반환하는 것은 없기 때문에 void로 설정해주었다. input과 outputTextArea는 번역에 필요한 text가 담긴 부분인데 inputText & outputText모두 querySelector이므로 뒤에 !를 붙여주어 무조건 존재함을 표시했다. 그리고 번역에 필요한 부분이 pa..
-
번역기 사이트 SEO 설정하기.Project/Translator 2022. 10. 7. 13:16
SEO란 서치엔진에 최적화 하는 작업을 말하는데 내 사이트가 얼마나 최적화되어 있는지 테스트 해 볼 기회가 생겨서 해봤다. 몇가지 문제가 지적되었는데..아래와 같다. 1. mete description에 키워드를 사용하고 있지 않다. ex) 번역기, 번역 등 2. robox.txt 파일을 이용하여 원하지 않는 페이지의 색인을 생성하는 것을 막아야한다. 3. 검색엔진이 URL변형을 인덱싱하지 못하도록 표준태그 추가 / 이건 뭔지 모르겠다. 4. H1 태그에 "번역기"를 사용하고 있지 않다. 간추려보면 이건데 맞는 말이다. 언어별 모든 사이트를 Kind Translator로 통합해서 쓰고 있었다.. 바보같았다. 일본, 중국, 한국어 버전에 따라서 H1태그도 수정해주고 meta Description도 수정해줘..
-
AWS Cognito로 자격증명 생성하기Project/Translator 2022. 9. 14. 03:52
기존에 루트 사용자에서 발급받은 Access Key와 Secret Key를 통해서 AWS를 이용했었는데, 루트 사용자의 사용을 AWS에서 지양하기 때문에 거기에 대한 대안으로 제시하는 Cognito를 이용해봤다. Cognito란 ? Amazon Cognito는 웹 및 모바일 앱에 대한 인증, 권한 부여 및 사용자 관리를 제공합니다. 사용자는 사용자 이름과 암호를 사용하여 직접 로그인하거나 Facebook, Amazon, Google 또는 Apple 같은 타사를 통해 로그인할 수 있습니다. AWS공식 홈페이지에서 이렇게 설명하고 있다. Cognito를 사용하면 우리가 이용하는 service에만 권한을 등록하고 sdk.js로 저장한다. 그렇다면 제한된 서비스에만 접근이 가능하기 때문에 루트 사용자보다 안정성..
-
API Keys 보호하기Project/Translator 2022. 9. 12. 02:41
나는 Vanilla JS로 해당 프로젝트를 완성했다. js파일에 내 고유 API Key를 그대로 노출시킨 채로 말이다.. 큰 문제를 안고 서비스를 시작하자마자 AWS에서 메일이 날라왔다. 대충 내용은 이러했다. 내 AWS Acitve Key와 Secret Key가 노출되었다는 내용이다. 하지만 난 권한 설정할 때 내가 사용하는 번역 기능만 가져와서 실행되도록 했기 때문에 별로 신경 안썼지만 마음 한 켠에 불안함이 남아있었다. 만약 React였다면 .env 환경변수 파일에 내 APIKeys를 입력해놓고 가져다 썼겠지만 Vanilla JS에서는 어려웠다. 그래서 로컬에서는 key.js파일을 만들어서 불러오게끔 설정했고, .gitignore에 key.js를 추가해줬다. 이상태로 깃 레퍼지토리에 푸쉬하고 net..