제 프로젝트는 사용자가 특정 차트를 고르면, 코스피 코스닥 전 종목의 과거(5년) 차트들을 모두 탐색하여 가장 유사한 차트 10개 정도를 골라 사용자에게 보여주는 것이 목표입니다.
비슷한 차트 검색기
전 종목의 최근 10년간 모든 차트를 탐색합니다. 내 종목의 차트는 과연 상승하는 차트일까요?
www.similarchart.com
웹페이지 영어 지원
저번 포스팅에서 자바스크립트로 번역을 지원했다고 했습니다. 하지만 브라우저가 html 요소들을 모두 로딩한 후에 자바스크립트가 실행되기 때문에 html 요소들이 로딩되는 동안에는 다른 언어로 보인다는 단점이 있었습니다. 또 다른 단점은 자바스크립트로 텍스트를 불러오면 SEO(검색 엔진 최적화)가 제대로 이루어지지 않는다고 알고 있습니다.
그냥 이대로 할까 하다가 이건 아니다 싶어 다른 방법을 고민해보았습니다.
맘에 쏙 드는 방법 떠올랐다!
코드들을 더럽히지 않고 깔끔하게 유지하면서 번역도 한 번에 해결하는 방법을 고민 끝에 나름 제 맘에 쏙 드는 방법이 생각났습니다.
1. 모든 페이지 lang 변수 가짐
- 일단 전과 동일하게 모든 페이지가 lang=en 또는 lang=ko 둘 중 하나의 상태를 가집니다.
2. translation.py 작성
translations라는 이중 딕셔너리를 하나 가진 translation.py를 작성합니다. 각 언어별로 키와 값들이 있는데, 키는 한글로 된 문자열이고 값은 번역본입니다.
translations = {
'ko': {
# index.html
'비슷한 차트 검색기': '비슷한 차트 검색기',
'코스피 & 코스닥': '코스피 & 코스닥',
'뉴욕증권 & 나스닥': '뉴욕증권 & 나스닥',
# ...
'en': {
# index.html
'비슷한 차트 검색기': 'Similar Chart Finder',
'코스피 & 코스닥': 'KOSPI & KOSDAQ',
'뉴욕증권 & 나스닥': 'NYSE & NASDAQ',
# ...위와 같이 구성합니다.
3. html 파일에 번역할 문자열들 지정
html 파일 안에 번역할 문자열들에 {{ translations[''] }} 을 씌웁니다. 이렇게 해도 SEO(검색엔진최적화)에는 변환된 문자열이 보이기 때문에 영향이 없다고 합니다.
<body>
<div class="container">
<h1 class="mt-5 custom-title similar_chart_finder"><b>{{ translations['비슷한 차트 검색기'] }}</b></h1>
<h3 style="text-align: center" class="kospi_daq"><b>{{ translations['코스피 & 코스닥'] }}</b></h3>
<h3 style="text-align: center" class="nyse_naq"><b>{{ translations['뉴욕증권 & 나스닥'] }}</b></h3>4. 렌더링시 translations 딕셔너리 전달
translation.py 에 작성한 translations 딕셔너리를 렌더링시에 전달합니다. 2년 전에 공부해서 가물가물하지만 이런 값들을 Spring에선 보통 Model이라고 불렀던 것 같네요.
from translation import translations
@app.route('/', methods=['GET'])
def index():
# ...
return render_template('index.html', lang=lang, translations=translations[lang])DB에서 조회하는 동적인 값들은 어떻게 해?
또한 저번에 해결하지 못했던 db에서 오는 데이터들의 번역도 구현했습니다. 그냥 db에 영어버전도 번역하여 저장했습니다.
그런데 그냥 번역만 해서 저장해 놓으면 쉬운데 신규상장되는 종목들을 추가로 번역해야 했습니다. 또한 미국주식의 이름은 한국어로, 한국주식의 이름은 영어로 번역해야 합니다. 물론 모든 건 자동화해야 하죠. 이 과정에서 웹 스크래핑을 이용했습니다.
생각보다 개발 시간이 오래 걸렸다
한 1주일이면 될 줄 알았는데, 번역 관련 개발만 거의 2주나 걸렸습니다. 생각보다 쉽지 않네요. 개발 자체는 그리 오래 걸리지 않았지만, 항상 테스트가 문제입니다. 한국과 미국의 주식종목 수를 합하면 거의 1만 개입니다. 이들을 웹 스크래핑해 가며 번역을 진행하는데, 또 웹 스크래핑 시에는 일정 간격을 두는 게 예의죠. 그래서 시간이 꽤 걸리네요.
뿌듯
모든 사용자 기능 구현 완료!
2024년 1월, 메시지 국제화까지 해서 드디어 제가 목표하던 수준까지 기능들을 완성했습니다. 하지만 배포는 아직입니다. 테스트를 최대한 많이 진행하고 최적화가 가능한 부분들을 찾아 최적화를 진행해야 합니다. 반년동안 갈아 넣었던 노력들이 이제 끝이 보이는 걸까요?
어림도 없지 웹뷰앱도 만들어야..
'프로젝트' 카테고리의 다른 글
| 프로젝트16. 웹페이지 다 만들었다! 6개월간의 사투 끝에 승리선언 (0) | 2024.02.17 |
|---|---|
| 프로젝트15. 모든 사용자 기능 구현완료! 힘들었던 점과 식겁했던 순간 (1) | 2024.02.17 |
| 프로젝트13. 새 노트북 사서 프로젝트 옮겨 백지부터 실행했더니 에러폭탄 (0) | 2024.02.17 |
| 웹 프로젝트12. 메세지국제화 직접 구현(외국인이 내 웹페이지에?) (0) | 2024.02.17 |
| 웹 프로젝트11. 클린코드고 뭐고 일단 돌아가게 만들자? 괜찮으려나.. (0) | 2024.02.17 |