uni's code uni's code

현재 다국어를 지원하는(i18n) 프로젝트를 맡고 있습니다. 다국어 정보를 DB에 잘 넣기 위해서 모델링하는 작업을 해보았고, 이 작업을 통해 다국어 DB 설계에 대한 간단한 아이디어를 적어보겠습니다. 유저에게 제공해야하는 언어가 “영어”, “한국어” ,”일본어” … 등등 여러 언어가 있을 때, 제공해야하는 다국어 타입(?)이 2가지가 있을 것 같습니다. 정적으로 화면에 담아야하는 정보 동적으로 다국어를 생성하는 정보 첫번째 정적으로 화면에 담아야하는 정보는 화면을 기획할 때 동적인 내용을 제외한 나머지 영역일 수 있을 것 같습니다. 두번째 동적으로 다국어를 생성하는 정보는 보통 운영진(혹은 관리자)에 의해서 동적으로 데이터를 생성하는 부분입니다. 예를 들어 동적으로 다국어를 생성하는 정보에 해당하는 경..

안녕하세요. 이 글은 이전 글과 이어진 글입니다. https://uni-s-code.tistory.com/43 [Next] i18n 자동화 프로세스 도입 - (1) : i18next-scanner를 통해 코드에서 key 값 추출하기 이 글은 https://meetup.toast.com/posts/295 참고자료를 바탕으로 직접 적용해보면서 작성한 글입니다. 국제화(i18n) 자동화 가이드 : NHN Cloud Meetup 프런트엔드 개발을 하다 보면 국제화와 번역을 수작업과 uni-s-code.tistory.com 이전 글을 읽지 않으신 분들은, 이전 글을 참고해주시길 바랍니다. 이 글은 https://meetup.toast.com/posts/295 참고자료를 바탕으로 직접 적용해보면서 작성한 글입니다...

안녕하세요. 이 글은 이전 글과 이어진 글입니다. https://uni-s-code.tistory.com/42 [Next] i18n 자동화 프로세스 도입 - (1) : i18next-scanner를 통해 코드에서 key 값 추출하기 이 글은 https://meetup.toast.com/posts/295 참고자료를 바탕으로 직접 적용해보면서 작성한 글입니다. 국제화(i18n) 자동화 가이드 : NHN Cloud Meetup 프런트엔드 개발을 하다 보면 국제화와 번역을 수작업과 uni-s-code.tistory.com 이전 글을 읽지 않으신 분들은, 이전 글을 참고해주시길 바랍니다. 이전 글과 마찬가지로 https://meetup.toast.com/posts/295 참고자료를 바탕으로 직접 적용해보면서 작성..

1. i18n 자동화 프로세스 도입 배경 서비스에 유저에 해당하는 국가의 언어로 세팅하거나, 그 국가에 맞는 sw를 개발하는 과정을 i18n이라고 칭한다. 서비스에서 I18n을 성공적으로 이끌기 위한 가장 큰 요소는 번역이라고 할 수 있다. 이때, 번역을 서비스에 입히기 위해서는 아래와 같은 불편한 절차가 진행될 것이다. 1) 번역 담당자는 서비스에 번역이 필요한 언어를 선정하고, 서비스에서 번역이 필요한 부분을 정리하여 번역가들에게 번역을 넘겨야 한다. 2) 그 이후, 전달 받은 번역을 개발자에게 전달하여 서비스에 적용하는 작업을 해야 한다. 이 과정에서 아래의 단점이 있다. 첫번째로, 번역가에게 필요한 부분을 넘기는 과정에서 필요한 부분을 정리하고, 메일 등으로 전달해야 하는 번거로운 의사소통 작업이..

1. i18n이란? 글로벌 유저를 대상으로 하는 서비스일 경우, 글로벌 유저가 자국어가 아닐 경우 페이지를 이탈할 확률은 높다. 그래서, 글로벌 유저를 유치하고자 하는 서비스들은, 각 유저에 맞게 언어를 다르게 보여주며 유저 친화적인 경험을 제공하는 것은 필수적이다. 이렇게 서비스에 유저에 해당하는 국가의 언어로 세팅하거나, 해당 국가에 맞는 sw를 개발하는 과정을 i18n이라고 칭한다. i18n은 interationalization의 약자로 i와 n사이의 18개의 알파벳이 있다고 하여 i18n이라고 부른다. 2. i18n 의 범위 대표적인 글로벌 사이트인 페이스북, 틱톡, 유튜브 등에 접속해보면, 자동으로 유저의 컴퓨터 브라우저 환경 혹은 접속한 국가에 맞는 언어로 설정되어 있는 것을 확인할 수 있다...

1. 설치 yarn add next-i18next npm install next-i18next 2. 사용법 (1) 루트 디렉토리에 next-18next.config.js 생성 module.exports = { i18n: { defaultLocale: "en", locales: ["en", "ko"], // 지원하는 locale 목록 }, }; (2) public 폴더 → locales 폴더 → 각 언어 코드 폴더 (en, ko) → common.json next.js 에서 i18n을 지원하고 있기 때문에, public/locales 라는 지정된 폴더 위치에 생성하면 됨. (3) next.config.js 에 next-18next.config.js 추가 /** @type {import('next').Nex..