react-i18next(i18n)

프로젝트에 언어 설정이 필요하기 때문에 해당 프레임워크를 넣기로 결정하여 사용방법을 정리하려고 한다.https://react.i18next.com/문서를 토대로 공부하려고 한다2011년에 만들어졌고 주요 프론트엔드(react, vue, anglure) 보다 먼

네임스페이스 용이성 다양한 변수가 생기고 겹쳐지는 변수의 이름이 많아질수록 변수이름이 길어지고 헷갈리게 된다. 해당 부분을 해결하기 위해서 하위로 하여 접두사를 붙이는 식으로 사용이 가능하다 네임스페이스로 키값 활용 네임스페이스 기본값 설정 해당 네임스페이스가 없

i18n에서 가장 많이 사용되는 기능이며, 동적인 값을 번역문에 넣을 수 있음XSS 공격을 완화하기 위해서 사용escape 옵션 사용

개수에 따른 처리를 하고싶을 때 사용key 이름의 공통된 부분을 넣어 만들고 변수에 해당하는 값을 넣을 수 있음복수형 처리xxx_one : 1값일때 사용할 키 (사용 불가)xxx_other : 복수형에 사용할 키xxx_zero : 0값일때 사용할 키접미사를 붙여 개수에

변수의 형식을 지정해 줄 수 있음내부에서 처리외부 설정을 통한 처리

context를 통해 번역을 다르게 할 수 있다.

src 디렉토리에 i18n.js 파일 생성App.jslearn key로 설정해둔 언어가 보여지는걸 알 수 있다.description 의 경우 정의되어 있지않아 key값이 리턴debug : true 설정으로 missingKey 오류 보여줌

App.jsonClick : i18n.changeLanguage(lng) 버튼 클릭시 설정언어 변경disabled : 현재 설정된 언어와 같을 경우 버튼 비활성i18n.jslanguageDetector : 브라우저의 언어를 감지하여 초기에 한국어로 자동 설정이 된다.로

public 폴더에 locales 폴더 추가local 하위 폴더에 en, kr 폴더 추가en/translation.jsonkr/translation.jsoni18n.js번역이 비동기식으로 로드되므로 오류를 방지하기 위해서 설정 필요index.jsSuspense렌더링 작

키를 찾을 수 없는 경우에 대한 설정App.jsBackend(i18next-http-backend)가 로컬에 설정된 파일에 Post 요청을 보내서 확인하여 없어 missinKey 메시지 보임이렇게 Post 요청을 대신하여 사용할 수 있는 다른 방법i18next 제작자들