신형준의 기술 블로그 신형준의 기술 블로그

inertia.js

• lang, translate, locale, 다국어, global 언어 지원하기(laravel + inertia.js + nuxt 버전 추가)

  Laravel/Inertia.js 2022. 10. 29. 13:03

  * nuxt 버전은 blueprep.com (모의고사) 참고 (아래 글도 남겨놓긴함) # What? inerita.js에서 laravel lang 사용하는법 # How? 1. 일단 lang 폴더 밑에 en, ko 등 지원하고자하는 나라별 php 언어파일 만들기 2. 파일시스템 설정하기 @ filesystems.php 'disks' => [ 'languages' => [ 'driver' => 'local', 'root' => base_path('resources/lang'), ], ], 3. 언어파일 php를 json으로 변환해줄 명령어 만들기 @ app/Console/Commands/CreateJsonTranslationFileCommand.php

  Read More

• Root View 변경하는법 (루트 뷰, 레이아웃)

  Laravel/Inertia.js 2022. 8. 27. 13:45

  # What? - 한 사이트 내 다른 레이아웃 2개를 사용하고싶을 때 url에 따른 레이아웃 변경 필요 # How? @HandleInertiaRequests.php protected $rootView = 'app'; ... public function rootView(Request $request) { if(str_contains($request->path(), "shopping")) $this->rootView = "shopping"; else $this->rootView = "brand"; return parent::rootView($request); // TODO: Change the autogenerated stub } @ resources/views에 brand.blade.php, shoppin..

  Read More

• Infinite Scroll 구현 (더보기)

  Laravel/Inertia.js 2022. 6. 17. 11:17

  # What? 일반적인 페이징 방식이 아닌, 더보기를 누르는 방식 # How? - 핵심은 replaceState로 url 파라미터를 초기화하는것. -> 이렇게 안하면 page 파라미터가 url에 남아있어서 새로고침 시 3페이지부터 보이고 이럼 @ Test.vue 더보기

  Read More

• Inertia.js에서 AOS 사용하는법

  Laravel/Inertia.js 2022. 5. 21. 18:34

  # What? 애니메이션 효과 스크립트이나 링크 이동 시 문제 있음 # How? @ Header.vue mounted() { // AOS.init(); AOS.init(); this.$inertia.on("finish", (event) => { AOS.init(); }); },

  Read More

• 검색 필터 및 더보기 구현(#Filter #Search #LoadMore)

  Laravel/Inertia.js 2021. 11. 16. 15:16

  # What? 스크롤 유지하면서 리스트 필터링 및 더보기 구현 # Why? 요즘은 페이지 바뀌면서 스크롤 초기화되는거 지양 # How? 1. form을 watch로 검사하지 말고 각 input에 @change를 걸어 filter 메소드 호출하게 하기 2. preserveScroll : true 옵션으로 스크롤 유지하기 3. replace: true 옵션으로 페이지 히스토리를 남기지 않고 뒤로가기 시 진짜 이전 페이지로 이동하게끔 하기(안그러면 필터값 바꿀때마다의 페이지 히스토리 다 남아서 뒤로가기 시 몇번을 눌러대야함) 4. preserveState : true 옵션으로 더보기 구현 시 이전 데이터 리스트에 새로 불러온 데이터 리스트를 추가하기 전체 {{ category.title }} 인기순 최신순 데..

  Read More

• Shared Data

  Laravel/Inertia.js 2021. 9. 21. 21:39

  # What? - 전역변수처럼 프론트단 어떤 페이지에서나 가져다 쓸 수 있게 공유되는 데이터 # Why? - User나 Flash 메시지같은거 공유 필요 # How? @HandleInertiaRequests public function share(Request $request) { return array_merge(parent::share($request), [ "user" => auth()->user(), "flash" => function() use ($request){ return [ "success" => $request->session()->get("success"), "error" => $request->session()->get("error"), ]; }, // 기타 공유하고픈 데이터 ]);..

  Read More

• 레이아웃 설정법

  Laravel/Inertia.js 2021. 9. 21. 18:35

  # What? 기본틀 잡는법 # Why? 헤더, 푸터같은건 공통으로 가져가야 편함(매번 작성 x) # How? @ Pages/Layout.vue header // 공통부분 // 이 자리에 페이지 내용이 들어감 footer // 공통부분 @app.js(내가 만든 Layout.vue를 default Layout으로 사용하게 하기) import Layout from "./Pages/Layout"; createInertiaApp({ resolve: name => { // 해당 페이지에서 layout를 따로 설정안했다면 기본으로 내가 만든 Layout 컴포넌트 사용 const page = require(`./Pages/${name}`).default; page.layout = page.layout || Layou..

  Read More

• 초기세팅

  Laravel/Inertia.js 2021. 9. 7. 17:07

  # What? laravel mpa 구조 그대로 spa 구현 가능하게 도와주는 라이브러리 (후원자는 ssr까지 제공) # How? 1. Back-end 세팅 composer require inertiajs/inertia-laravel - welcome.blade.php => app.blade.php로 변경 @ app.blade.php @inertia php artisan inertia:middleware @ Kernel.php 'web' => [ // ... \App\Http\Middleware\HandleInertiaRequests::class, ], @ UserController.php

  Read More