개발자
리액트로 다국어 기능
이런식으로 다국어 기능을 만드는 방법 말고 이렇게 작성하면 하나하나 다 변경할 부분들을 영어와 한국어로 작성해야하는데 그러지 않고 다른 방법은 없을까요?? 일일이 작성하지 않아도 그냥 사이트 내에 모든 언어가 영어로 변경된다든지 하는 그런 거요..!!ㅠㅠ
1const resources = {
2 en: { // 영어
3 translation: {
4 "welcome": "Good morning."
5 }
6 },
7 ko: { // 한국어
8 translation: {
9 "welcome": "좋은 아침 입니다."
10 }
11 }
12}
답변 2
구글 페이지 번역과 같은 기능을 생각하신 것 같네요! 그런데 저도 다국어 지원을 위해서는 각 언어별 문구들을 정리한 파일을 만들어서 사용하는 것으로 알고 있습니다. `lang.en.json`, `lang.ko.json` 처럼요. 결국 원리는 질문에도 첨부해주신 코드처럼 변수로 선언해서 언어 설정별 다른 값이 보여지게 하는 거니까요. ㅎㅎ ㅠ
하나하나 작성하는 부분이 귀찮다면 엑셀을 이용한 자동 번역을 하는 방법이 있습니다. 이전에 제가 작성한 포스팅이 있어 공유드립니다. 엑셀, 스크립트를 활용해서 구글 스프레드시트의 테이블을 가져와 자동으로 언어별 파일을 만든 경험을 작성한 글이에요 https://all-dev-kang.tistory.com/m/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%80%EB%A1%9C%EB%B2%8C%ED%95%9C-%EC%9B%B9%EC%9D%84-%ED%96%A5%ED%95%98%EC%97%AC-react-i18n-%EB%8B%A4%EA%B5%AD%EC%96%B4%EC%A7%80%EC%9B%90
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 12월 06일
리액트에서 다국어를 쉽게 처리하기 위해 가장 많이 사용되는 라이브러리 중 하나는 i18next 입니다. i18next를 사용하면 언어 리소스를 JSON 파일로 분리하고, 해당 JSON 파일은 각 언어별로 작성하여 관리할 수 있습니다. 이렇게 함으로써 코드 내에 직접적인 번역문을 넣지 않아도 되므로 유지보수성을 향상시킬 수 있습니다. i18next에서 제공하는 'react-i18next' 라이브러리를 활용하면 리액트 컴포넌트 안에서 번역문에 직접 접근 가능합니다. 예제 코드는 아래와 같습니다. ```javascript import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import translationEN from './locales/en/translation.json'; import translationKO from './locales/ko/translation.json'; // the translations const resources = { en: { translation: translationEN }, ko: { translation: translationKO } }; i18n.use(initReactI18next) // passes i18n down to react-i18next .init({ resources, lng: "en", // language to use interpolation: { escapeValue: false // react already safes from xss } }); ``` 그런데 사용자가 요청하는 모든 내용을 자동으로 영어나 다른 언어로 변환하는 것은 자동 번역 기능이 필요하게 됩니다. 이는 번역 API, 예를 들어 Google Translate API를 활용하여 구현할 수 있습니다. 하지만 이 경우, 애플리케이션의 성능과 사용자 경험, 그리고 비용 문제 등을 고려해야 합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!