SAP BTP - Luigi React Application에 다국어 기능 추가하기

29 Apr 2024

기존에 만들었던 프로젝트에서 react-cord-mf/public/luigi-config.js 파일을 수정해준다.

메뉴의 label을 바꿔보자.

아래 myTranslationProvider도 변경해주자

var dict = {
    "en-US": { PRODUCTS: "Products", ORDERHISTORY: "Order History" },
    "de-DE": { PRODUCTS: "Kutentak product", ORDERHISTORY: "Kutentak History" },
    "ko-KR": { PRODUCTS: "제품", ORDERHISTORY: "주문 내역" },
  };

language.js에 언어 추가

export const dict = {
    "en-US": {
      ITEMS: "Products",
      STOCKS: "Stocks",
      SELECTLANGUAGE: "Please select a language",
      PRICE: "Price",
      WELCOME_LUIGI: "Welcome to Luigi - a micro-frontend framework",
      DESCRIPTION: "Description",
      PRODUCTADDED: "Product has been added to cart",
      AVAILABLE: "Available",
      AVAILABLEQUANT: "Available quantity: ",
      ADDTOCART: "Add to cart",
      BACK: "Back",
      OUTOFSTOCK: "Out of stock",
    },
    'de-DE': {
      ITEMS: 'Produkte',
      STOCKS: 'Bestand',
      SELECTLANGUAGE: 'Bitte wählen Sie eine Sprache',
      PRICE: 'Preis',
      WELCOME_LUIGI: 'Willkommen bei Luigi - einem Micro-Frontend Framework',
      DESCRIPTION: 'Beschreibung',
      PRODUCTADDED: 'Das Produkt wurde hinzugefügt',
      AVAILABLE: 'Verfügbar',
      AVAILABLEQUANT: 'Verfügbare Anzahl: ',
      ADDTOCART: 'Zu Einkaufswagen hinzufügen',
      BACK: 'Zurück',
      OUTOFSTOCK: 'Nicht auf Lager'
  },
  'ko-KR': {
      ITEMS: "제품",
      STOCKS: "재고",
      SELECTLANGUAGE: "언어 선택",
      PRICE: "가격",
      WELCOME_LUIGI: "Welcome to Luigi - a micro-frontend framework",
      DESCRIPTION: "설명",
      PRODUCTADDED: "제품이 장바구니에 추가되었습니다.",
      AVAILABLE: "구매 가능",
      AVAILABLEQUANT: "구매 가능 수량: ",
      ADDTOCART: "장바구니에 추가",
      BACK: "뒤로가기",
      OUTOFSTOCK: "재고 없음",
  },
};

home.js에 언어팩 하드코딩으로 추가

  const [options] = useState(
                      [
                        { key: 'en-US', text: 'en-US' }, 
                        { key: 'de-DE', text: 'de-DE' }, 
                        { key: 'ko-KR', text: 'ko-KR' }
                      ]);

언어를 바꾸어 보자.

언어 적용이 잘된 것 같다.

처음에 설정한 label과 dict 내의 키값과 매칭이 되니 꼭 맞추어 주어야한다.