라라벨, Nuxt 번역 패키지 사용

Updated on

목차:

라라벨 번역 패키지 사용에 관해서…
기존에 만들었던 번역 패키지는 상당히 부실하기도 하고, 그냥 별로였다..

그래서 새롭게 다시 만들려고 했지만, 사실 상 지금도 이렇게 시간이 늦어지는데 굳이 내가 그걸 만들어야되나 싶었다..

그래서 그냥 패키지를 사용하기로 했다..
https://github.com/joedixon/laravel-translation
https://github.com/barryvdh/laravel-translation-manager

둘 중 하나를 선택하려고 했는데, 그냥 후자를 선택했다… 전자가 깔끔하기는 하지만,
그래도 후자를 택한건 생각보다 라라벨 번역 패키지가 중간에 중단되는 경우가 많았기 때문이다..
사실 후자도 중단된거나 마찬가지라고 생각이 들긴하지만..

번역 패키지를 dev 환경에서만 사용할 것이므로,

composer require --dev barryvdh/laravel-translation-manager
composer require --dev martinlindhe/laravel-vue-i18n-generator

로 설치해주었다…
그리고 nuxt.js 에는 vue i18n을 적용하려고 하는데.. 마침..
https://www.larablocks.com/package/martinlindhe/laravel-vue-i18n-generator
이것을 찾았다…
이걸로, 라라벨에서 번역 파일을 만든 다음에.. 번역 파일을 js 파일로 변환시켜준다..
그럼 그 js파일을 프론트엔드단에 넣어주면 된다..
하지만.. 그렇게 Nuxt-i18n에서 문제가 발생하게 되는데…

Nuxt-i18n 사용

https://nuxt-community.github.io/nuxt-i18n/
를 사용하게 되었는데..

이게 생각보다 문제가 있다… 아니 문제라고 해야되려나.. 일단.. 큰 문제는 없긴 한데..
$rotue.push 에서 path로 보낼 경우에는 params 전송이 안된다는거다..
근데 이 Nuxt-i18n의 경우 localePath은 path로 지원한다는 거다..

그렇다면, 나는 Name으로 보내야되는데.. 그러지 못한다는거다…
데이터를 어떻게 전송해줘야할까..

https://router.vuejs.org/guide/essentials/navigation.html

여기에 보면 알겠지만, path에서는 params 전송이 안된다…
그래서 나는 그냥, 편법으로 사용하긴 했다.. 이 문제는 route 에서 의도적으로 제공하는게 아니기 때문에.. 사실 옳바른 방법은 아닌 것 같다.. 그래도 뭐.. 데이터를 한번 보내주긴 해야하니까 어쩔 수 없지 않는가..

이 방법은 그냥 store에 담아서 push 시키는 방법이 옳은 방법 인 듯 싶다… (흠흠흠….)

자 이제 작업 시작..

  i18n: {
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      // alwaysRedirect: true,
      // fallbackLocale: 'en'
    },
    seo: true,
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        css: 'flag-icon-us',
        file: "en.js"
      },
      {
        code: 'ko',
        iso: 'ko',
        name: '한국어',
        css: 'flag-icon-kr',
        file: "ko.js"
      },
      {
        code: 'ja',
        iso: 'ja',
        name: '日本',
        css: 'flag-icon-jp',
        file: "ja.js"
      }
    ],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
    },
    lazy: true,
    langDir: 'lang/',
  },

대충.. 이렇게 nuxt i18n 을 설정했다..

다양한 언어가 있는건 아니지만, 그냥 파일 별로 나누는게 나을 것 같아서 저리 했음..
실제로, 브라우저 언어에 맞춰서 설정되긴 한다.. en과 ko를 동시에 불러오고, 그 다음에 다른 언어를 선택하면, 새로운 언어를 불러온다.

일단.. 라라벨에서 먼저 번역 패키지를 이용해서, 작성해줘야 하므로..
https://github.com/caouecs/Laravel-lang
에서 en, ko, ja 를 다운 받아서 넣어줬다..

이제 하나 둘 씩 작업을 해야한다..
라라벨 번역 페이지에서 작업을 끝내면, 파일 내보내기로 js로 만든 다음에..

php artisan vue-i18n:generate --multi-locales

명령어 입력해서 en.js, ko.js, ja.js로 바꾼 다음에.. 이제 이것을 다시 프론트 엔드에 옮겨주면 된다.. 열심히 작업해둔 프론트엔드들에 번역을 입히는 중이다..

Auth 인증 링크를 들어왔을때 문제점..

Auth 인증 링크를 백엔드에서 만들고, 메일로 보내주게 되는데..
domain/auth/JDJ5JDEwJGtLQmxmSkprTy95VWRkd1gzQU55V08vS2RLU29kLnlEOWI3NzU1YjYwLzZaRDh6dmtOVVF1

하지만, 이 링크를 타게 되면 en 기준으로 접근된다.. 하지만, 아무것도 없는 크롬 새 시크릿창에서 실행하면 자동으로 브라우저에 맞는 ko로 변경 한 후에 연결 시켜주긴 하지만..
기존에 ko로 쿠키값을 가지고 있을때에 접근해버리면, 그냥 en 주소로 인식해서.. en로 띄워버리는 문제가 발생한다..

그래서 이 문제에 대해서 이야기 해보긴 했지만,, 음.. 그냥 auth 페이지에 접근했을때에 첫 접근일 경우에는 자동으로 브라우저 언어로 세팅하지만, 두번째 접근이 문제다.. 여기서 alwaysRedirect: true 를 주면 또 문제가 생기니까..

그냥.. auth 페이지에서 쿠키값을 찾아서, 쿠키값에 따라서 리다이렉션을 해주는것이 좋겠다고 답변을 받아서.. 차라리 이렇게 내가 따로 쿠키값에 따라서 리다이렉션을 해주는 것을 만들 생각이다..

이제 남은거..

대충 번역 작업은 잘 되어가고 있는거 같다..
- 프론트엔드 번역 적용하고..
- vee-validate에 번역 적용하고..
- axios로 api 호출할때에 header에 언어 설정 값 보내고..
- 라라벨에서 header 값에 따른 언어 설정하는 미들웨어 만들고..
- 백엔드 언어 설정에 따른 번역 출력 해주고..
- route push 할때에 store로 데이터 담아서 보내주는 걸로 변경하고..
- auth 인증 링크 들어왔을때 쿠키 언어값에 따른 리다이렉션을 실행시켜주고..

이렇게까지 하면….. 번역 작업이 끝날 듯 싶다..
이거 끝나면.. 라라벨로 이미지 업로드하고 관리하고 출력하는 걸 개발 해야 된다..

내일이면 싱가포르 여행 가는데….. 언… 제… 다할지..

다른 글