제 프로젝트는 사용자가 특정 차트를 고르면, 코스피 코스닥 전 종목의 과거(5년) 차트들을 모두 탐색하여 가장 유사한 차트 10개 정도를 골라 사용자에게 보여주는 것이 목표입니다.
비슷한 차트 검색기
전 종목의 최근 10년간 모든 차트를 탐색합니다. 내 종목의 차트는 과연 상승하는 차트일까요?
www.similarchart.com
영어도 선택할 수 있게 해 보자
8월부터 시작한 프로젝트가 거의 반년이 되어가고 있네요. 이렇게까지 오래 걸릴 줄은 몰랐습니다. 직접 배포를 해서 사용자들에게 보여주는 건 생각보다 신경 써야 할 부분이 많은 것 같습니다.
제 프로젝트는 주식과 관련된 웹사이트를 만드는 프로젝트입니다. 그리고 한국 주식뿐만이 아닌 미국 주식도 지원합니다. 요즘은 미국 주식에 투자하는 한국인들도 많아졌다고 합니다. 저 역시 한국 주식보다는 미국 주식을 많이 매매합니다.
이렇게 미국주식도 추가하다 보니 혹시 외국인들도 제 웹페이지에 방문하지 않을까 하는 생각이 들었습니다. 만약 외국인이 제 웹페이지를 방문했는데 텍스트들이 다 한글로 되어있으면 바로 뒤로 가기를 누를 수도 있겠다 싶어 영어도 지원해 보기로 했습니다.
Flask 전용 메시지국제화 라이브리러인 Flask-Babel! 그런데..
메시지 국제화라고 하면 2년전에 수강했던 김영한 선생님의 Spring 강의에서 본 기억이 있습니다. 이렇게 보통은 프레임워크에서 메세지 국제화 기능을 제공해 준다고 알고 있습니다.
Flask는 가벼운 대신에 처음에는 없는 기능들이 많아 제가 직접 라이브러리를 추가해야 하는 경우가 많습니다. 그래도 Flask의 네임밸류정도면 Flask 전용 메시지 국제화 라이브러리가 있으리라고 생각했습니다. 역시 찾아보니 Flask-Babel이라는 라이브러리가 있더군요.
하지만 역시 일이 순조롭게 진행된 적이 거의 없죠.. Flask-Babel의 메시지 국제화 진행 단계 중에는 .py 파일과 .html 파일들에서 번역해야하는 텍스트들을 추출하여 한 파일에 모으는 첫번째 단계가 있습니다. 그런데 파일 경로를 잘 인식하지 못하는 건지, 파일은 잘 찾는데 text 추출이 안되는건지 아무리 해도 텍스트들이 추출이 되지 않았습니다.
물론 제가 이상하게 했을 가능성이 제일 많긴 하지만 Flask-Babel은 꽤 오래전에 만들어진 라이브러리로써 Docker 컨테이너와의 호환은 잘 이루어지지 않는 것 같습니다. 그래서 하루종일 삽질하다가 다른 방안을 찾아보게 되었습니다.
메시지 국제화 직접 구현해보자. 어떤 방법들이 있을까?
제가 생각했던 방법은 크게 3가지로 나눌 수 있습니다.
- 보통의 메시지 국제화 라이브러리처럼 파일들을 다 탐색 후 번역해야하는 메세지 추출 후 한 파일에 모아 관리
- GET 요청을 사용할 때 'ko', 'en'등의 파라미터를 받아 각각의 html 파일 헤더에 자바스크립트로 번역
- 그냥 html 파일을 한국어용, 영어용으로 2개씩 만들기
규모가 큰 프로젝트라면 무조건 1번 방법을 사용해야 할 것 같습니다. 하지만 제 프로젝트는 규모가 작은 개인 프로젝트라 2,3번 방법을 고려해 보았습니다.
어차피 데이터베이스에서 오는 데이터들도 html 파일 내에서 말고 flask에서 동적으로 번역해야 하기에 2번 방법을 사용했습니다. 모든 GET 요청을 받는 페이지마다 lang=en 또는 lang=ko 둘 중 하나의 상태를 가집니다.
그리고 html 파일들에는 아래와 같은 방식으로 자바스크립트를 넣어주었습니다. 아래 코드는 404 에러 페이지를 번역하기 위한 코드입니다.
<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
var lang = '{{ lang }}'; // Flask에서 보내주는 lang 변수를 받습니다.
if (lang === 'en') { // lang이 'en'인 경우에만 번역을 진행합니다.
var translations = {
'en': {
'error_msg': 'Invalid access detected.',
}
};
// 모든 키(클래스 이름)에 대해 반복문을 돌립니다.
for (var key in translations[lang]) {
var elements = document.getElementsByClassName(key);
// 각 요소에 대해 텍스트를 변경합니다.
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = translations[lang][key];
}
}
}
});
</script>
</head>
대신 위와 같이 자바스크립트로 구현하면, html이 모두 로딩될 때까지는 다른 언어로 보인다는 단점이 있습니다. 이 부분이 좀 걸리네요. 그래도 일단은 만들어놓고 봅니다.
일단은 위와 같이 모든 페이지의 화면 우측 상단에 언어를 설정할 수 있는 select를 만들었습니다. 하지만 보통은 footer에 배치하더군요. 어디에 배치하면 좋을지 계속 고민 중입니다.
이제 슬슬 끝이 보인다
이제 제가 원하는 기능들을 대부분 구현한 것 같습니다. 몇몇 부분 최적화를 하면 거의 완성에 가깝겠네요. 조금만 더 힘내봐야겠습니다!
'프로젝트' 카테고리의 다른 글
| 프로젝트14. 웹페이지 다국어 간단하게 지원하는 방법(직접 제작) (0) | 2024.02.17 |
|---|---|
| 프로젝트13. 새 노트북 사서 프로젝트 옮겨 백지부터 실행했더니 에러폭탄 (0) | 2024.02.17 |
| 웹 프로젝트11. 클린코드고 뭐고 일단 돌아가게 만들자? 괜찮으려나.. (0) | 2024.02.17 |
| 웹 프로젝트 - 10. AWS 청구서 분석3 (RDS, KMS, VPC) (0) | 2024.02.17 |
| 웹 프로젝트 - 9. AWS 청구서 분석2 (Route 53, 데이터전송) (0) | 2024.02.17 |