Translation 파일 업로드 플로우 개선기

i18next .use(BackEnd) .use(initReactI18next) .init({ lng: DEFAULT_LANG, // default language fallbackLng: LOCALES.ko, interpolation: { escapeValue: false }, maxRetries: 1, backend: { loadPath: isDevEnv // locale resources ? '/src/locales/{{ns}}/{{lng}}.json' : `your_storage/{{ns}}/${env}/{{lng}}.json, }, });

const { t } = useTranslation(); const text = t('key');

# users.query.mutation.graphql query UsersOperation { users { id name } }

$ yarn codegen

// users.query.mutation.generated import { gql } from '@apollo/client'; import * as Apollo from '@apollo/client'; const defaultOptions = {} as const; export function useUsersOperationQuery(baseOptions?: Apollo.QueryHookOptions<UsersOperationQuery, UsersOperationQueryVariables>) { const options = {...defaultOptions, ...baseOptions} return Apollo.useQuery<UsersOperationQuery, UsersOperationQueryVariables>(UsersOperationDocument, options); } export function useUsersOperationLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<UsersOperationQuery, UsersOperationQueryVariables>) { const options = {...defaultOptions, ...baseOptions} return Apollo.useLazyQuery<UsersOperationQuery, UsersOperationQueryVariables>(UsersOperationDocument, options); } export const namedOperations = { Query: { UsersOperation : 'UsersOperation' as const } }

# tranlationgen.yaml target: https://docs.google.com/spreadsheets/d/adfkljjdfslkjlk/edit#gid=0 serviceAccount: google-workspace-manager@your_project.iam.gserviceaccount.com output: "./translation" locales: ["ko", "en", "jp"] sheet: "translation" sheetId: your_sheet_id depthSeparator: $

TRANSLATIONGEN_PRIVATE_KEY_PATH="/path/to/key.json"

{ ... "scripts": { "transgen": translationgen } }

$ yarn transgen

import { GoogleSpreadsheet } from "google-spreadsheet"; import { auth } from "google-auth-library"; import yaml from "js-yaml"; import fs from "fs"; import dotenv from "dotenv"; import { error } from "console"; dotenv.config(); const getAuthKey = () => { const key = fs.readFileSync(process.env.TRANSLATIONGEN_PRIVATE_KEY_PATH, { encoding: "utf8", }); return JSON.parse(key); }; const key = getAuthKey(); const client = auth.fromJSON(key); const getMetaData = () => { const doc = yaml.load(fs.readFileSync("./translationgen.yaml")); return doc; }; const metadata = getMetaData(); // translationgen.yaml 파일 읽기 const output = metadata.output; client.email = metadata.serviceAccount; client.scopes = ["https://www.googleapis.com/auth/spreadsheets"]; const doc = new GoogleSpreadsheet(metadata.sheetId, client); // 설정 정보를 가지고 객체 만들기 const readSheet = async (doc, sheetTitle) => { await doc.loadInfo(); const sheet = doc.sheetsByTitle[sheetTitle]; const rows = await sheet.getRows({ offset: 0, }); return rows; }; const makeDir = (name) => { const exists = fs.existsSync(name); if (!exists) { fs.mkdirSync(name, { recursive: true }); } }; const makeJSON = (rows, locale, separator = ".") => { const json = {}; rows.forEach((row) => { const key = row.get("KEY").trim(); const keys = key.split(separator); const str = row.get(locale.toUpperCase()); if (!str) return; if (keys.length === 1) { json[prune(key)] = prune(str); } else { let nested = json; const lastIndex = keys.length - 1; for (let i = 0; i < keys.length - 1; i++) { const currentKey = prune(keys[i]); if (!nested[currentKey]) { nested[currentKey] = {}; } nested = nested[currentKey]; } nested[prune(keys[lastIndex])] = prune(str); } }); return json; }; const writeJSON = (source, path) => { fs.writeFile( path, source, { encoding: "utf8", }, (err) => { const success = err === null; if (!success) throw new Error(`Can not be created ${path}: ${error}`); console.log(`Successfully ${path} was created.`); } ); }; /** * @description Remove invalid strings generated during encoding */ const prune = (string) => { return string.replaceAll("\\n", "\n"); }; const generate = async ( doc, locales, { output, sheetTitle, depthSeparator } ) => { makeDir(output); // translationgen.yaml output 경로로 디렉토리 만들기 locales.forEach(async (locale) => { const sheetRows = await readSheet(doc, sheetTitle); // 스프레드시트 파일 읽기 const json = makeJSON(sheetRows, locale, depthSeparator); // 스프레드시트에서 읽은 데이터로 json 만들기 const source = JSON.stringify(json, null, 2); writeJSON(source, `${output}/${locale}.json`, locale); // output 경로에 json 파일 만들기 }); }; generate(doc, metadata.locales, { output, sheetTitle: metadata.sheet, depthSeparator: metadata.depthSeparator, });

id: 'upload-translation' if: steps.changed-files.outputs.any_changed == 'true' uses: 'google-github-actions/upload-cloud-storage@v2' with: path: './tranlation/' destination: '/translation'

name: Upload Translation on: workflow_dispatch: inputs: target: description: 'production or staging or develop' required: true jobs: upload_to_gcs: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: create-json # 서비스 계정 키 생성 id: create-json uses: jsdaniell/create-json@v1.2.2 with: name: 'key.json' json: ${{ secrets.GOOGLE_WORKSPACE_MANAGER_KEY }} - name: Set key path # 환경 변수 세팅 run: | echo "TRANSLATIONGEN_PRIVATE_KEY_PATH=./key.json" >> .env - name: generate translation run: pnpm tgen # json 파일 생성 - id: 'auth' uses: 'google-github-actions/auth@v2' # GCP 인증 with: credentials_json: ${{ secrets.GOOGLE_WORKSPACE_MANAGER_KEY }} - id: copy-folder run: | cp -r ./src/locales/translation ./${{github.event.inputs.target}}/ - id: 'upload-folder' # JSON 파일 업로드 uses: 'google-github-actions/upload-cloud-storage@v2' with: path: './${{github.event.inputs.target}}' destination: '/translation'