브라우저 언어감지, 다국어 페이지 URL로 표현하기

브라우저 언어 변경하기

chrome://settings/languages#lang

위의 링크에 들어가서 원하는 언어를 가장 위로 이동시킨다.

 

 

 

 

const browserLang = navigator.language;
const langCode = browserLang.toLowerCase().substring(0, 2);
console.log(langCode); // en, ko

 

 

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import enTranslations from "../public/locales/en.json";
import koTranslations from "../public/locales/kr.json";
import cnTranslations from "../public/locales/cn.json";

// 브라우저 언어
const browserLang = navigator.language;
const langCode = browserLang.toLowerCase().substring(0, 2);

i18n
  .use(LanguageDetector) // ->
  .use(initReactI18next)
  .init({
    lng: langCode, // -> 기본언어
    fallbackLng: "en", // 언어가 없을 경우 대체 언어
    interpolation: {
      escapeValue: false, // React는 이미 XSS를 방지함
    },
    resources: {
      en: {
        translation: enTranslations,
      },
      ko: {
        translation: koTranslations,
      },
      cn: {
        translation: cnTranslations,
      },
    },
  });

export default i18n;

 

 

이렇게 하면 크롬의 언어설정에 따라 프로젝트의 기본언어 설정이 정해진다.

 

 

 

https://www.lionbridge.com/ko/blog/global-marketing/choosing-multilingual-url-structure-5-things-consider/

다국어 URL은 어떻게 선택해야 하는가

 

 

navigator.language

 

https://blog.naver.com/quasimodo__/110179247680

브라우저 설정 언어에 따라 웹 페이지 제어하기.

 

 

리액트에서 브라우저 쿠키 읽는 법

 

1. document.cookie

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 사용 예시
const username = getCookie('username');
console.log(username);

 

2. react-cookie 사용

npm install react-cookie

import React from 'react';
import { useCookies } from 'react-cookie';

const MyComponent = () => {
  const [cookies] = useCookies(['username']); // 쿠키 이름 배열 전달

  return (
    <div>
      {cookies.username ? (
        <p>안녕하세요, {cookies.username}님!</p>
      ) : (
        <p>안녕하세요, 방문자님!</p>
      )}
    </div>
  );
};

export default MyComponent;

 

 

 

쿠키언어가 있으면 쿠키언어로,

없으면 브라우저언어로 언어초기화

 

// 브라우저 언어
const browserLang = navigator.language;
const browserCode = browserLang.toLowerCase().substring(0, 2);

// 쿠키 언어
const cookieLang = getCookie("lang");

const setCookie = (name, value, days) => {
  // let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); // days를 밀리초로 변환
    // expires = `; expires=${date.toUTCString()}`; // 만료 날짜 설정
  }
  // document.cookie = `${name}=${value || ""}${expires}; path=/`;
  document.cookie = `${name}=${value || ""}; path=/`; // 쿠키 설정
};

// 쿠키 언어 초기화
if (!cookieLang) {
  setCookie("lang", browserCode, 7); // 7일 동안 유효한 쿠키 설정
}



i18n
  .init({
    lng: cookieLang || browserCode, // 기본언어

 

 

 

 

언어전환시 쿠키언어 변경하기

 

const [cookie, setCookie, removeCookie] = useCookies<any>(["lang"]);

const updateCookie = (newLang) => {
    removeCookie("lang"); // 기존 쿠키 삭제
    setCookie("lang", newLang, { path: "/" }); // 새로운 쿠키 설정
};


<Select
      defaultValue={cookie.lang}
      options={[
        {
          value: "en",
          label: `🇺🇸 ${t("common.lang-en")}`,
        },
        {
          value: "ko",
          label: `🇰🇷 ${t("common.lang-ko")}`,
        },
      ]}
      onChange={(newLang: "ko" | "en") => {
        i18n.changeLanguage(newLang);
        updateCookie(newLang);
      }}
/>