Welcome to our platform

Start your journey with us today

\n \n

\n );\n}\n```\n\n**추출 요구 사항:**\n\n1. 하드코딩된 문자열을 react-intl 훅과 컴포넌트로 대체\n2. 변수 및 복수형에 ICU 포맷팅 사용\n3. 컴포넌트 구성에 따라 키를 계층적으로 구성\n4. 모든 키를 소스 JSON 파일에 추가\n5. 일관된 명명 규칙 유지\n\n**AI 프롬프트:**\n\n```\nReact 컴포넌트에서 모든 하드코딩된 문자열을 추출하고:\n\n1. react-intl로 대체:\n - 동적 문자열에는 useIntl 훅 사용\n - 정적 텍스트에는 FormattedMessage 사용\n - 변수({name})와 복수형({count})에 ICU 포맷팅 추가\n\n2. 번역 키 구조화:\n - 컴포넌트 계층에 따라 그룹화(components.*, pages.*)\n - 설명적이고 중첩된 키 사용(header.nav.home)\n - JSON에서 컴포넌트 구조와 일치시키기\n\n3. 로케일 업데이트:\n - 모든 키를 src/locales/en.json에 추가\n - 앱 전체에서 일관된 명명 유지\n```\n\n**AI 추출 후:**\n\n```jsx\nimport { useIntl } from \"react-intl\";\n\nfunction WelcomeCard() {\n const intl = useIntl();\n\n return (\n

{intl.formatMessage({ id: \"welcome.title\" })}

{intl.formatMessage({ id: \"welcome.description\" })}

\n \n

\n );\n}\n```\n\n**생성된 en.json:**\n\n```json\n{\n \"welcome.title\": \"Welcome to our platform\",\n \"welcome.description\": \"Start your journey with us today\",\n \"welcome.getStarted\": \"Get started\"\n}\n```\n\n## 배치 처리\n\n여러 컴포넌트의 경우, 모든 파일을 선택하고 동일한 종합적인 프롬프트를 사용하세요. Cursor, GitHub Copilot 등과 같은 AI IDE는 여러 파일을 동시에 처리하여 애플리케이션 전체에서 일관된 키 이름을 유지할 수 있습니다.\n\n## 번역 생성\n\nAI IDE가 키를 추출한 후, 다음 명령으로 번역을 생성하세요:\n\n```bash\nnpx lingo.dev@latest i18n\n```\n\n이 명령은 소스 파일의 번역 버전을 생성합니다:\n\n```bash\nsrc/locales/\n en.json (추출된 키가 있는 소스)\n es.json (스페인어 번역)\n fr.json (프랑스어 번역)\n de.json (독일어 번역)\n```\n\n## 유효성 검증\n\n추출 후, 설정을 확인하세요:\n\n**번역 커버리지 확인:**\n\n```bash\nnpx lingo.dev@latest i18n --frozen\n```\n\n이 명령은 누락된 번역이 있으면 실패하여 완전한 커버리지를 보장합니다.\n\n**다양한 로케일로 테스트:**\n\n```jsx\n// 앱에서 로케일을 전환하여 번역이 작동하는지 확인\n\n \n\n```\n","content","\n기존 React 앱을 다국어를 지원하도록 변환하는 것은 하드코딩된 문자열을 찾아 번역 키로 대체하는 번거로운 과정일 수 있습니다.\n\n**Lingo.dev CLI**는 Cursor, GitHub Copilot 및 유사한 도구와 같은 AI 기반 IDE와 원활하게 작동하여 React 컴포넌트에서 번역 가능한 콘텐츠를 자동으로 추출합니다.\n\n아래 설명된 개념은 모든 기술 스택에 사용할 수 있지만, 간단하게 아이디어를 설명하기 위해 예시로 hello world React 앱을 사용하겠습니다.\n\n## 사전 요구 사항\n\n키를 추출하기 전에 React 앱에서 기본 국제화를 설정하세요. 전체 설정 지침은 [react-intl 문서](https://formatjs.io/docs/react-intl/)를 참조하세요.\n\n기술 스택에 맞는 국제화 설정을 따른 후, 프로젝트에는 다음이 포함되어야 합니다:\n\n- 앱에서 동적으로 언어를 전환하는 기능\n- 번역 파일을 구성하기 위한 기본 프로젝트 구조\n\n## 설정 프로세스\n\n**Lingo.dev CLI 설치 및 구성:**\n\n```bash\nnpx lingo.dev@latest init\n```\n\n**빈 소스 파일 생성:**\n\n```bash\nmkdir -p src/locales\necho '{}' > src/locales/en.json\n```\n\n**i18n.json 구성:**\n\n```json\n{\n \"locale\": {\n \"source\": \"en\",\n \"targets\": [\"es\", \"fr\", \"de\"]\n },\n \"buckets\": {\n \"json\": {\n \"include\": [\"src/locales/[locale].json\"]\n }\n }\n}\n```\n\n## AI를 활용한 키 추출\n\n**React 컴포넌트를 선택**하고 AI IDE를 사용하여 하드코딩된 문자열을 추출하세요:\n\n**추출 전:**\n\n```jsx\nfunction WelcomeCard() {\n return (\n

Welcome to our platform

Start your journey with us today

\n \n

{intl.formatMessage({ id: \"welcome.title\" })}

{intl.formatMessage({ id: \"welcome.description\" })}

\n \n

AI를 활용한 i18n 키 추출