이승영

이승영

i18n?

글로벌 어플리케이션은 화면에 있는 모든 레이블링과 메시지를 로그인을 한 사용자의 언어로 표출해야합니다. i18n은 internalization을 의미하며 i와 n 사이에 18개의 알파벳이라는 뜻입니다.

코드

var text = "Hello {name}. I'm from {city}.";

var data = {
    name : "Lee Seungyoung",
    city : "Korea"
}

/**
 * 치환
 */
function translate(form, params = {}) {
    return form.replace(/{[^}]*}/g, match => {
        console.log(match);
        return params[match.slice(1, -1)];
    });
}

console.log(translate(text, data));

/**
 * 결과
 * {name}
 * {city}
 * Hello Lee Seungyoung. I'm from Korea.
 */

text : 텍스트 입니다. 특정 국가의 언어로 치환을 해줘야 합니다.

data : 사용자의 Parameter 입니다

translate :

정규표현식으로 form 파라미터로 들어온 모든 {} 안의 문장이 data 안에 있는 key와 매칭이 된다면 해당 key의 value로 치환을 하고, { }는 지우는 함수입니다.

const i18n = {
    en: {
        "Hello {name}. I'm from {city}.": "Hello {name}. I'm from {city}."
    },
    ko: {
        "Hello {name}. I'm from {city}.": "안녕하세요 {name}. 나는 {city}에서 왔습니다."
    }
};

const language = "ko";

그럼 위의 변수를 추가로 넣겠습니다.

i18n : 특정 언어의 key를 입력할 시 미리 설정해둔 문장입니다.

language : 해당 유저가 사용하는 언어입니다.

const translation = translate(i18n[language]["Hello {name}. I'm from {city}."], data);
console.log(translation);

/**
 * 결과
 * 안녕하세요 Lee Seungyoung. 나는 Korea에서 왔습니다.
 */

위와 같이 작성을 해보면 아래와 같은 출력 결과를 얻을 수 있습니다.

이런식으로 간단하게 다국어를 구현할 수 있습니다.

전체 코드

var text = "Hello {name}. I'm from {city}.";

var data = {
    name : "Lee Seungyoung",
    city : "Korea"
}

const i18n = {
    en: {
        "Hello {name}. I'm from {city}.": "Hello {name}. I'm from {city}."
    },
    ko: {
        "Hello {name}. I'm from {city}.": "안녕하세요 {name}. 나는 {city}에서 왔습니다."
    }
};

const language = "ko";

/**
 * 치환
 * @return : 다국어로 매칭된 텍스트
 */
function translate(form, params = {}) {
    return form.replace(/{[^}]*}/g, match => {
        return params[match.slice(1, -1)];
    });
}

const translation = translate(i18n[language]["Hello {name}. I'm from {city}."], data);
console.log(translation);

/**
 * 결과
 * 안녕하세요 Lee Seungyoung. 나는 Korea에서 왔습니다.
 */

참고

소프트웨어의 국제화 Software i18n
국제화와 지역화 - 위키백과, 우리 모두의 백과사전

참고