Gatsby와 Strapi를 사용한 국제화의 최선 방법
Gatsby 프레임워크와 Strapi 헤드리스 CMS를 사용하여 정적 웹사이트를 구축하는 경우, 다른 언어 배경을 가진 사용자를 대상으로 하는 국제화 (i18n)의 필요성을 마주칠 수 있습니다. 하나의 해결책이 없지만, 몇 가지 잠재적인 접근법을 살펴보고, 여러분의 맥락에 맞는 적합한 해결책을 찾도록 도와드리겠습니다.
i18n의 도전 과제
해결책에 대해 깊이 알아보기 전에, Gatsby와 Strapi를 사용하여 국제화를 구현하는 것의 몇 가지 도전 과제를 인정해 보겠습니다. Strapi는 현재 기본 i18n 지원을 갖고 있지 않지만, 로드맵에 따르면 2020년 말에 지원 예정입니다. 다른 방법을 제공하는 Gatsby이지만, 여러분의 특정 요구 사항에 적합한 해결책을 찾는 것은 약간의 도전이 될 수 있습니다.
플러그인 옵션 탐색
Gatsby에서 i18n을 해결하는 한 가지 방법은 플러그인을 찾는 것입니다. “gatsby-source-strapi-localized”라는 플러그인을 찾을 수도 있습니다. 그러나 이 플러그인은 현재 활발하게 유지되지 않으므로 프로젝트에 가장 적합한 선택은 아닐 수 있습니다.
Strapi에서 접미사 사용하기
Strapi가 내장 i18n 지원을 갖고 있지 않기 때문에, 필드 이름에 접미사를 사용하는 방법으로 우회할 수 있습니다. 예를 들어, 언어 코드로 필드에 접미사를 추가할 수 있습니다 (예: “Title”은 “Title_en” 또는 “Title_fr”로 변경됨). 이를 통해 동일한 콘텐츠의 다른 언어 버전을 구분할 수 있습니다.
Gatsby 쿼리 사용자 정의하기
Gatsby에서는 원하는 언어로 데이터를 검색하기 위해 GraphQL 쿼리를 사용자 정의할 수 있습니다. 예를 들어, “mainBanner” 제목이 있는 홈페이지를 가지고 있다면, 다음과 같이 쿼리를 작성할 수 있습니다:
allStrapiHomePage {
edges {
node {
mainBanner {
title_lang
}
}
}
}
또는 각 언어에 대해 별도의 유형을 사용할 수도 있습니다. 예를 들어, “allStrapiHomePage_en” 또는 “allStrapiHomePage_fr”입니다. 그러나 이 접근법은 코드 중복을 초래할 수 있다는 점을 염두에 두세요.
여러 페이지 생성하기
도전 과제는 올바른 URL과 쿼리를 가진 한 페이지당 두 개의 페이지를 생성하는 것입니다. Gatsby의 “createPage” 함수를 사용하면 컨텍스트에 변수를 전달하여 쿼리 사용자 정의에 도움을 줄 수 있습니다. 또한 경로를 수정하여 원하는 URL 구조를 구현할 수 있습니다. 그러나 Gatsby의 “pages” 폴더가 이미 처리되었으므로 처리 과정을 수정하는 것은 불가능합니다.
대안적인 접근법
다른 해결책은 Gatsby의 “pages” 폴더 내에 각 언어에 대한 별도 하위 폴더를 생성하는 것입니다. 예를 들어, “en” 폴더와 “fr” 폴더를 생성할 수 있습니다. 각 폴더 내에서 해당 언어의 페이지를 생성할 수 있습니다. 예를 들어, 영어의 경우 “about.js”이고 프랑스어의 경우 “fr/about.js”입니다. 이러한 페이지는 동일한 리액트 컴포넌트를 쿼리하지만, 언어별로 다른 데이터를 사용합니다.
import React from "react"
import { graphql } from "gatsby"
import _get from "lodash/get"
import AboutPage from "../../components/pageComponents/About.js"
export default function About({ data }) {
const BannerAbout = _get(
data,
"allStrapiAboutEn.edges[0].node.Banner.BackgroundImage.childImageSharp.fluid"
)
const TitleBannerAbout = _get(
data,
"allStrapiAboutEn.edges[0].node.Banner.Title"
)
const DescriptionBannerAbout = _get(
data,
"allStrapiAboutEn.edges[0].node.Banner.Description"
)
return (
<AboutPage
BannerAbout={BannerAbout}
TitleBannerAbout={TitleBannerAbout}
DescriptionBannerAbout={DescriptionBannerAbout}
/>
)
}
export const query = () => graphql`
query {
allStrapiAboutEn {
edges {
node {
Banner {
Title
Description
BackgroundImage {
childImageSharp {
fluid(maxWidth: 1920) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
}
}
}
}
}
}
}
`
이러한 방식으로 코드를 구조화하면 언어별 페이지를 생성하면서 코드 중복을 피할 수 있습니다.
이미지 배열 최적화하기
다양한 언어 간에 공유되는 이미지 배열을 처리할 때는, 이미지를 여러 번 업로드하는 대신 컬렉션 유형을 사용하는 것이 좋습니다. 이는 향상된 최적화를 보장하고 콘텐츠 관리 시스템에서의 중복성을 줄입니다.
결론
Gatsby와 Strapi를 사용하는 경우 국제화는 복잡할 수 있지만, 제공되는 플러그인을 탐색하고, Strapi에서 접미사를 활용하며, Gatsby 쿼리를 사용자 정의하고, 여러 페이지를 생성하고, 이미지 배열을 최적화함으로써 견고한 i18n 솔루션을 구현할 수 있습니다. 이러한 접근방식을 프로젝트의 특정 요구 사항과 제한 사항에 맞게 수정하도록 기억하세요. 즐거운 코딩하세요!
참고 자료 :
같은 카테고리의 다른 글 보기 :
