본문 바로가기

프로그래밍/Web62

Vue 3 Composition API 관련 심화 내용 Vue 3에서 {{ count }} 이 구문은 Vue 3에서 새로운 컴포넌트를 작성할 때 효율적이고 선언적인 방식을 제공합니다. ref() vs toRefs() Vue 3의 Composition API에서 ref()와 toRefs()는 반응형 참조를 다루는 데 사용되지만, 각각 다른 목적과 사용 방식을 가지고 있습니다. ref(): ref() 함수는 주로 기본 타입(문자열, 숫자, 불리언 등) 또는 객체/배열 등을 반응형 데이터로 만들기 위해 사용됩니다. ref()를 사용하여 생성된 참조는 .value 속성을 통해 실제 값을 얻거나 설정합니다. ref()는 단일 값에 대한 반응성을 제공하며, 주로 템플릿에서 직접적으로 사용될 때 유용합니다. 예시: import { ref } from 'vue'; cons.. 2024. 1. 26.
Laravel Inertia - Shared data 공유 데이터 데이터 공유하기 애플리케이션 내의 여러 페이지에서 특정 데이터에 액세스해야 할 때가 있습니다. 예를 들어, 사이트 헤더에 현재 사용자를 표시해야 할 수 있습니다. 전체 애플리케이션에 걸쳐 각 응답에 이 데이터를 수동으로 전달하는 것은 번거롭습니다. 다행히 더 나은 방법이 있습니다: 공유 데이터. Inertia 의 서버 측 어댑터는 모든 요청에 공유 데이터를 사용할 수 있는 방법을 제공합니다. 이는 일반적으로 컨트롤러 외부에서 수행됩니다. 공유 데이터는 컨트롤러에서 제공된 페이지 props와 자동으로 병합됩니다. Laravel 애플리케이션에서는 일반적으로 HandleInertiaRequests 미들웨어를 통해 처리됩니다. 이 미들웨어는 서버 측 어댑터 설치 시 자동으로 설치됩니다. class .. 2024. 1. 18.
Laravel Inertia - Validation 유효성 검증 작동 방식 Inertia에서 서버 측 유효성 검증 오류를 처리하는 방법은 전통적인 XHR 기반 폼과 다릅니다. XHR 기반 폼에서는 422 응답에서 유효성 검증 오류를 캐치하고 폼의 오류 상태를 수동으로 업데이트해야 하지만, Inertia에서는 422 응답을 받지 않습니다. 대신, Inertia는 전통적인 전체 페이지 폼 제출과 매우 유사하게 작동합니다. 아래는 그 방법입니다: 먼저, Inertia를 사용하여 폼을 제출합니다. 서버 측 유효성 검증 오류가 있는 경우, 이러한 오류를 422 JSON 응답으로 반환하지 않습니다. 대신, 유저를 이전에 있던 폼 페이지로 리다이렉트하고 세션에 유효성 검증 오류를 플래시합니다. Laravel과 같은 일부 프레임워크는 이를 자동으로 처리합니다. 다음으로.. 2024. 1. 18.
Laravel Inertia - File uploads 파일 업로드 FormData 변환 파일(중첩된 파일 포함)이 포함된 Inertia 요청을 수행할 때, Inertia는 자동으로 요청 데이터를 FormData 객체로 변환합니다. 이 변환은 XHR을 통해 multipart/form-data 요청을 제출하기 위해 필요합니다. 데이터에 파일이 포함되어 있지 않더라도 요청이 항상 FormData 객체를 사용하도록 하려면 요청을 수행할 때 forceFormData 옵션을 제공하면 됩니다. import { router } from '@inertiajs/vue3' router.post('/users', data, { forceFormData: true, }) FormData 인터페이스에 대한 자세한 정보는 MDN 문서를 참조하세요. 버전 .. 2024. 1. 18.
Laravel Inertia - Forms 폼 폼 제출 전통적인 HTML 폼 제출 방식도 Inertia에서 사용할 수 있지만, 이는 전체 페이지를 새로고침하므로 권장되지 않습니다. 대신 폼 제출을 가로채고 Inertia를 사용하여 요청을 하는 것이 좋습니다. First name: Last name: Email: Submit 위 예제에서 볼 수 있듯이, Inertia를 사용할 때 클라이언트 측에서 폼 응답을 검사할 필요가 일반적으로 없습니다. 대신 서버 측 라우트/컨트롤러는 일반적으로 리다이렉트 응답을 발행합니다. 이 방식을 사용하면 Inertia 폼 제출을 처리하는 것이 전통적인 HTML 폼 제출을 처리하는 것과 매우 유사하게 느껴집니다. class UsersController extends Controller { public function i.. 2024. 1. 18.
Laravel Inertia - Manual visits Manual visits 수동 방문 링크를 생성하는 것 외에도, JavaScript를 통해 프로그래밍 방식으로 Inertia 방문/요청을 수동으로 수행할 수 있습니다. 이는 router.visit() 메소드를 통해 이루어집니다. import { router } from '@inertiajs/vue3' router.visit(url, { method: 'get', data: {}, replace: false, preserveState: false, preserveScroll: false, only: [], headers: {}, errorBag: null, forceFormData: false, onCancelToken: cancelToken => {}, onCancel: ().. 2024. 1. 18.
Laravel Inertia - Links 링크 Inertia 앱 내에서 다른 페이지로의 링크를 생성할 때는 일반적으로 Inertia 컴포넌트를 사용합니다. 이 컴포넌트는 표준 앵커() 링크를 둘러싼 가벼운 래퍼로, 클릭 이벤트를 가로채고 전체 페이지 새로고침을 방지합니다. 이를 통해 애플리케이션이 로드된 후 싱글 페이지 앱 경험을 제공합니다. 링크 생성하기 Inertia 링크를 생성하려면 Inertia 컴포넌트를 사용하세요. 이 컴포넌트에 제공된 모든 속성은 기본 HTML 태그로 전달됩니다. import { Link } from '@inertiajs/vue3' Home 기본적으로 Inertia는 링크를 앵커() 요소로 렌더링합니다. 그러나 as 속성을 사용하여 태그를 변경할 수 있습니다. import { Link } from &#.. 2024. 1. 18.
Laravel Inertia - Title & meta 타이틀 & 메타 Inertia로 구동되는 JavaScript 애플리케이션은 문서의 내에서 렌더링되므로, 문서의 타이틀 축약형 문서의 여러 Head 인스턴스 애플리케이션 전체에 걸쳐 여러 // About.vue import { Head } from '@inertiajs/vue3' Inertia는 한 번에 하나의 태그만 렌더링하지만, 다른 태그는 여러 인스턴스가 있을 수 있기 때문에 쌓입니다. 중복 태그를 피하기 위해 head-key 속성을 사용할 수 있으며, 이는 태그가 한 번만 렌더링되도록 보장합니다. 위 예제에서 태그에 대해 이를 설명합니다. 위 코드 예제는 다음 HTML을 렌더링합니다. Head 확장 실제 애플리케이션을 구축할 때, Inertia의 사용자 정의 컴포넌트를 생성한 후에는 .. 2024. 1. 18.
Laravel Inertia - Routing 라우팅 라우트 정의하기 Inertia를 사용할 때, 애플리케이션의 모든 라우트는 서버 측에서 정의됩니다. 이는 Vue Router나 React Router가 필요하지 않다는 것을 의미합니다. 대신, Laravel 라우트를 정의하고 해당 라우트에서 Inertia 응답을 반환하기만 하면 됩니다. 간편한 라우트 "FAQ"나 "about" 페이지처럼 해당 컨트롤러 메소드가 필요 없는 페이지가 있다면, Route::inertia() 메소드를 통해 컴포넌트로 직접 라우팅할 수 있습니다. Route::inertia('/about', 'About');URL 생성하기 일부 서버 측 프레임워크는 명명된 라우트에서 URL을 생성할 수 있습니다. 그러나 클라이언트 측에서 이러한 헬퍼에 접근할 수는.. 2024. 1. 18.
Laravel Inertia - Redirects 리다이렉트 Inertia를 사용하여 non-GET 요청을 수동으로 하거나 요소를 통해 수행할 때, 항상 적절한 Inertia 리다이렉트 응답으로 응답하는 것이 중요합니다. 예를 들어, 컨트롤러가 새로운 사용자를 생성하는 경우, "store" 엔드포인트는 사용자 "index" 페이지와 같은 표준 GET 엔드포인트로 리다이렉트되어야 합니다. Inertia는 이 리다이렉트를 자동으로 따라가고 페이지를 그에 맞게 업데이트합니다. class UsersController extends Controller { public function index() { return Inertia::render('Users/Index', [ 'users' => User::all(), ]); } publi.. 2024. 1. 18.
Laravel Inertia - Responses Responses 응답 Creating responses 응답 생성하기 Inertia 응답을 생성하는 것은 간단합니다. 시작하려면, 컨트롤러나 라우트 내에서 Inertia::render() 메소드를 호출하고, 렌더링하고자 하는 JavaScript 페이지 컴포넌트의 이름과 페이지에 대한 props(데이터)를 제공하면 됩니다. 아래 예제에서, 단일 prop(event)을 Event/Show 페이지 컴포넌트에 전달합니다. 이 prop에는 네 개의 속성(id, title, start_date, description)이 포함됩니다. use Inertia\Inertia; class EventsController extends Controller { public function show(Event $event) { .. 2024. 1. 18.
Laravel Inertia - Pages Inertia 를 사용하여 애플리케이션을 구축할 때, 애플리케이션의 각 페이지는 일반적으로 자체 컨트롤러/라우트와 해당하는 JavaScript 컴포넌트를 가집니다. 이를 통해 해당 페이지에 필요한 데이터만 검색할 수 있으며, API는 필요하지 않습니다. 또한, 페이지에 필요한 모든 데이터는 브라우저에서 페이지가 렌더링되기 전에 검색될 수 있어, 사용자가 애플리케이션을 방문할 때 "loading" 상태를 표시할 필요가 없어집니다. Creating pages 페이지 생성하기 Inertia 페이지는 단순히 JavaScript 컴포넌트입니다. Vue, React, 또는 Svelte 컴포넌트를 작성해본 적이 있다면 금방 익숙해질 것입니다. 아래 예시에서 볼 수 있듯이, 페이지는 애플리케이션의 컨트롤러로부터 pro.. 2024. 1. 18.
Laravel Inertia Client-side 설치 Inertia.js의 클라이언트 측 설정 과정은 서버 측 프레임워크를 설정한 후에 이루어집니다. Inertia는 현재 React, Vue, Svelte를 지원합니다. Laravel starter kits Laravel의 스타터 키트인 Breeze와 Jetstream은 Inertia 애플리케이션을 위한 준비된 스캐폴딩을 제공합니다. 이 스타터 키트들은 Laravel 및 Vue 또는 React를 사용하여 새로운 Inertia 프로젝트를 시작하는 가장 빠른 방법입니다. 수동으로 Inertia를 설치하려면 아래 문서를 참조하십시오. Install dependencies 우선, 선택한 프레임워크에 해당하는 Inertia 클라이언트 측 어댑터를 설치합니다. npm install @inertiajs/vue3 Init.. 2024. 1. 10.
Laravel Inertia Server-side 설치 Inertia.js 서버 측 설정의 첫 단계는 서버 측 프레임워크를 구성하는 것입니다. Inertia는 Laravel을 위한 공식 서버 측 어댑터를 유지하고 있습니다. 다른 프레임워크를 사용하는 경우 해당 어댑터가 유지하는 프레임워크별 문서를 참조하십시오. Laravel Stater kits Laravel의 스타터 키트인 Breeze와 Jetstream은 Inertia 애플리케이션을 위한 즉시 사용 가능한 스캐폴딩을 제공합니다. 이러한 스타터 키트는 Laravel 및 Vue 또는 React를 사용하여 새로운 Inertia 프로젝트를 시작하는 가장 빠른 방법입니다. 그러나 Inertia를 수동으로 설치하려면 아래 내용을 참조하십시오. Install dependencies 먼저 Composer 패키지 관리자.. 2024. 1. 10.
Laravel Jetstream Livewire Laravel Livewire는 Laravel Blade를 템플릿 언어로 사용하여 현대적이고 반응적이며 동적인 인터페이스를 간단하게 구축할 수 있는 라이브러리입니다. 동적이고 반응적인 애플리케이션을 구축하고 싶다면 이 스택을 선택하는 것이 좋으며, Vue.js와 같은 전체 JavaScript 프레임워크에 대한 훌륭한 대안입니다. Livewire를 사용할 때, 애플리케이션의 라우트는 일반적인 Blade 템플릿으로 응답합니다. 그러나 이러한 템플릿 내에서 필요에 따라 Livewire 컴포넌트를 렌더링할 수 있습니다: @livewire('server-list') Livewire 스택을 사용할 때, Jetstream은 몇 가지 독특한 기능을 가지고 있는데, 이에 대해 알아야 합니다. 아래에서 이러한 기능들에 대.. 2024. 1. 8.

티스토리툴바