i18n Scanner Test

React, TypeScript, i18n-scanner를 사용한 다국어 웹사이트입니다.

기능

• 🌍 다국어 지원 (한국어/영어)
• 🔍 i18n-scanner를 통한 자동 번역 키 스캔
• 📱 반응형 디자인
• 🎨 모던한 UI/UX
• 📄 3개 페이지 (홈, 소개, 연락처)

설치 및 실행

1. 의존성 설치

npm install

2. 개발 서버 실행

npm start

브라우저에서 http://localhost:3000을 열어 확인하세요.

3. 번역 키 스캔 및 한국어 키 자동 채우기

npm run i18n-scan-full

이 명령어는 다음을 수행합니다:

• 소스 코드에서 번역 키를 스캔
• 새로운 키를 번역 파일에 자동 추가
• 한국어 번역 파일에서 빈 값들을 키 값으로 자동 채움

4. 개별 명령어

# 번역 키 스캔만 실행
npm run i18n-scan

# 한국어 번역 파일에서 빈 값들을 키 값으로 채우기
npm run fill-korean

프로젝트 구조

src/
├── i18n/
│   ├── index.ts          # i18next 설정
│   ├── ko/
│   │   └── translation.json
│   └── en/
│       └── translation.json
├── pages/
│   ├── Home.tsx          # 홈 페이지
│   ├── About.tsx         # 소개 페이지
│   └── Contact.tsx       # 연락처 페이지
├── App.tsx               # 메인 앱 컴포넌트
├── App.css               # 앱 스타일
├── index.tsx             # 앱 진입점
└── index.css             # 기본 스타일

사용된 기술

• React 18 - 사용자 인터페이스 라이브러리
• TypeScript - 타입 안전성
• React Router DOM - 클라이언트 사이드 라우팅
• i18next - 국제화 라이브러리
• react-i18next - React용 i18next 바인딩
• i18n-scanner - 번역 키 자동 스캔 도구

번역 키 사용법

컴포넌트에서 번역 키를 사용하려면:

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();
  
  return <h1>{t('welcome')}</h1>;
};

i18n-scanner 설정

이 프로젝트는 i18n-scanner를 사용하여 번역 키를 자동으로 스캔하고 관리합니다.

한국어 번역 자동화

이 프로젝트는 한국어 번역 파일에서 키가 자동으로 값으로 채워지도록 설정되어 있습니다.

설정 파일

i18n-scanner.config.js에서 한국어 번역 파일(ko/translation.json)에 새로운 키가 추가될 때, 키 자체가 값으로 자동 설정되도록 구성되어 있습니다:

defaultValue: function(lng, ns, key) {
  // 한국어의 경우 키 자체를 값으로 사용
  if (lng === 'ko') {
    return key;
  }
  // 다른 언어는 빈 문자열
  return '';
}

자동화 스크립트

scripts/fill-korean-keys.js 스크립트가 한국어 번역 파일에서 빈 값들을 자동으로 키 값으로 채웁니다.

사용법

1. 새로운 번역 키 추가: 코드에서 t('newKey')를 사용하면 자동으로 번역 파일에 추가됩니다.
2. 스캔 실행: npm run i18n-scan 명령어로 번역 키를 스캔합니다.
3. 자동 생성: 한국어 번역 파일에는 키가 값으로, 영어 번역 파일에는 빈 문자열이 자동으로 설정됩니다.

예시

코드에서 t('helloWorld')를 사용하면:

ko/translation.json:

{
  "helloWorld": "helloWorld"
}

en/translation.json:

{
  "helloWorld": ""
}

이후 한국어 번역 파일에서 실제 번역으로 수정하면 됩니다.

언어 전환

헤더의 언어 버튼을 클릭하여 한국어와 영어 간에 전환할 수 있습니다.

빌드

프로덕션 빌드를 생성하려면:

npm run build