본문 바로가기

전체 글

 (142)
Vue : In-Component Route Guards In-Component Route Guards use In-Component Route Guards to show a progress bar and only load the component if it’s successfully returned from our API. In-Component Route Guard를 사용하여 progress bar을 표시하고 API에서 성공적으로 반환된 경우에만 component를 로드합니다. Problem: When our API is slow, our page looks broken let our users know the data is on the way, and have something happen when they click a link that requires..
Vue : Flash Messages Flash Messages Cover a common web app notification feature, and utilize some features of Vue 3 to create global storage. 일반적인 웹 앱 알림 기능을 다루고 Vue 3의 일부 기능을 활용하여 전역 저장소를 만듭니다. Problem: Delivering a Temporary Message It might be nice to have a flash message, after a user registers for an event, letting them know they’re registered as we deliver them back to the event page: 사용자가 이벤트에 등록한 후 이벤트 페이지로 ..
Vue : Programmatic Navigation Programmatic Navigation Navigation is triggered using Vue Router when a is clicked, but also can be triggered programmatically from inside our code. 를 클릭하면 Vue Router를 사용하여 탐색이 트리거되지만 코드 내부에서 프로그래밍 방식으로 트리거될 수도 있습니다. Problem: Form Submit The most common place you’ll want to programmatically navigate is when a form is submitted. 프로그래밍 방식으로 탐색하려는 가장 일반적인 장소는 양식이 제출될 때입니다. Regstration form here Reg..
Vuex - Mutation & Action - 2 build out Vuex Mutations and Actions for our EventList & EventShow pages, and even implement some pagination. EventList 및 EventShow 페이지에 대한 Vuex Mutations 및 Action을 구축하고 일부 페이지 매김도 구현합니다. Problem: Loading our EventList using Vuex The first step to making this component use Vuex is to create a new Mutation and an Action. 이 컴포넌트에서 Vuex를 사용하도록 만드는 첫 번째 단계는 새로운 Mutation과 Action을 생성하는 것입니다. We want t..
Vuex - Mutation & Action - 1 Mutations use Mutations to update, or mutate, our State. 상태를 업데이트하거나 변경하려면 Mutations를 사용하세요. For simple examples, State has a count property 간단한 예를 들어 State에는 count 속성이 있습니다. store.js state: { count: 0 } store.js mutation can allow us to increment that value mutation 를 통해 해당 값을 늘릴 수 있습니다. INCREMENT_COUNT mutation is taking in our Vuex state as an argument and using it to increment the count. INC..
Vue MultiSelect MultiSelect https://vue-multiselect.js.org/ Vue-Multiselect | Vue Select Library. Probably the most complete selecting solution for Vue.js, without jQuery. vue-multiselect.js.org sample code https://github.com/pidokige02/vue2_multi_select GitHub - pidokige02/vue2_multi_select Contribute to pidokige02/vue2_multi_select development by creating an account on GitHub. github.com
Vue 3 -Teleport vue3 teleport 사용법 사용하는 이유 vue를 세팅하면 index.html의 div id = app 에 모든 화면을 집어넣습니다. 그 이후 생성되는 모든 로직은 다 에 들어가게 됩니다. 하지만 특정한 요소의 html 의 경우 다른 위치에서 렌더링되어야 하는 경우가 있습니다. 예를 들면 아래와 같은 경우가 있습니다. Styles that require fixed or absolute positioning and z-index. For example, it’s a common pattern to place UI components (like modals) right before the tag to ensure they are properly placed in front of all other par..
ES6 destructuring 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식으로, 쉽게 데이터 뭉치를 만들 수 있다. [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] // Stage 4(finished) proposal ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); console.log(a); // 10 console.log(b); // 20 console.log(rest); // {c: 30, d: 40} 배열 구조 분해 기본 변수 할당 var foo = ["one", "tw..

티스토리툴바