프론트엔드
GatsbyJS에서 l10n(지역화) 지원하기 (간단한 함수형을 곁들인)
두줄요약
Gatsby Node API와 GraphQL로 언어별 번역 노드·페이지를 생성하는 방식을 소개했습니다.\nReact Context와 fp-ts를 활용해 브라우저 언어 라우팅 및 타입 안전한 번역 적용을 구현했습니다.
구조와 흐름
- Gatsby Node API의 스키마 정의와
sourceNodes기반TranslationDataGraphQL 노드 생성 createPages에서 언어별 노드 조회 후/ko/,/en/,/ja/경로와 페이지 컨텍스트 생성- 루트 경로에서 브라우저 언어를 판별해 지원 언어 페이지 또는 기본 한국어 페이지로 이동
해결 방법
- 번역 데이터 키로 GraphQL Fragment를 파일 생성하고 페이지 쿼리로 언어별 번역 데이터 조회
- React Context API와
useTranslation훅으로 하위 컴포넌트 전체에 번역 함수 제공 - 타입 생성 결과와
keyof기반 번역 키 자동완성 지원
선택 이유
- Gatsby GraphQL 노드 활용으로 정적 사이트 생성 흐름에 번역 데이터 통합
fp-ts의Option,TaskEither,pipe기반으로 결측값·비동기 오류·배열 순회 처리
주의할 점
createNode,createNodeId,createContentDigest의 순수 함수성 보장 불가- 지원 언어 미일치 시 기본 언어 처리와 구형 브라우저의 언어 속성 차이 고려
