티스토리 뷰

IT 이야기/Node.js

Express.js와 EJS를 사용하여 다국어 지원 관리자 페이지를 작성하려면

하늘과 나b 2025. 1. 14. 17:44

1. i18n 모듈 사용

express-i18n 또는 i18next 같은 다국어 지원 라이브러리를 사용하면 언어 설정과 번역 파일 관리를 쉽게 할 수 있습니다.

설치

bash
코드 복사
npm install i18n

설정

i18n을 Express.js에 통합합니다.

javascript
코드 복사
const express = require('express'); const i18n = require('i18n'); const path = require('path'); const app = express(); // i18n 설정 i18n.configure({ locales: ['ko', 'ja'], // 지원할 언어 directory: path.join(__dirname, 'locales'), // 번역 파일 위치 defaultLocale: 'ko', // 기본 언어 queryParameter: 'lang', // 언어를 query string으로 설정 가능 (?lang=ja) cookie: 'i18n-lang', // 언어 쿠키 저장 }); app.use(i18n.init); // EJS 설정 app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, 'views'));

2. 번역 파일 생성

locales 폴더를 생성하고 언어별 JSON 파일을 추가합니다.

파일 구조

bash
코드 복사
/locales ├── ko.json ├── ja.json

ko.json

json
코드 복사
{ "welcome": "환영합니다", "dashboard": "대시보드", "logout": "로그아웃" }

ja.json

json
코드 복사
{ "welcome": "ようこそ", "dashboard": "ダッシュボード", "logout": "ログアウト" }

3. EJS에서 번역 사용

EJS 템플릿에서 다국어 키를 사용하려면 __() 함수를 호출합니다.

views/index.ejs

html
코드 복사
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%= __('dashboard') %></title> </head> <body> <h1><%= __('welcome') %></h1> <nav> <ul> <li><%= __('dashboard') %></li> <li><a href="/logout"><%= __('logout') %></a></li> </ul> </nav> </body> </html>

4. 언어 변경 지원

사용자가 언어를 변경할 수 있도록 링크를 제공하거나, 자동으로 언어를 설정합니다.

언어 변경 링크

html
코드 복사
<a href="/?lang=ko">한국어</a> | <a href="/?lang=ja">日本語</a>

Express 라우팅

언어를 query나 cookie로 받아 처리합니다.

javascript
코드 복사
app.get('/', (req, res) => { res.render('index'); }); app.get('/logout', (req, res) => { res.send(__('logout')); });

5. 동적 언어 설정

기본적으로 쿠키, 브라우저 언어, 또는 쿼리 파라미터를 기반으로 언어를 설정합니다.

브라우저 기본 언어 감지

i18n 설정 시 아래 옵션을 추가합니다:

javascript
코드 복사
i18n.configure({ detectLanguage: true, });

6. 언어 관리 팁

  • 중앙 집중화: 번역 파일을 항상 최신 상태로 유지하고, 키 이름은 명확하게 작성합니다.
  • 자동화: i18n 관리 툴 (예: Transifex, Phrase)과 같은 서비스를 사용하면 협업이 쉬워집니다.
  • 캐싱: 번역 파일이 많아질 경우, 성능을 위해 캐싱을 고려하세요.

이 설정을 통해 사용자는 한국어와 일본어를 쉽게 전환할 수 있는 관리자 페이지를 경험할 수 있습니다.

'IT 이야기 > Node.js' 카테고리의 다른 글

[express.js] 카페24API로 고객ID 가져오기  (0) 2025.01.21
[express.js] 카페24 쇼핑몰의 적립급을 조회/지급/차감 - 1편  (0) 2025.01.21
express.js와 mariaDB 연결 문제  (0) 2025.01.10
express.js 로그인 시스템 구현 시 보안  (0) 2025.01.05
[SERVER] ubuntu, nginx, node.js mariaDB로 서버 세팅하기  (1) 2024.09.26
[express.js] express.js와 mariaDB를 이용하는 기본 설정  (0) 2024.09.24
Hostinger 사용기1 - 설치  (0) 2024.06.13
공유하기 링크
댓글