본문 바로가기

Java Scripts/Vue.js

(36)
Vue : Scoped Slots: Part 2 Cover some of the limitations to scoped slots as well as alternative syntax for scoped slots. scoped slots 의 일부 제한 사항과 대체 구문을 다룹니다. Why it is called “scoped” slots It provides the bookTitle data to the title slot, which we then access in our parent component: Title slot에서 bookTitle 데이터를 제공하고, parent component 에서 title slot의 bookTitle에 액세스합니다. Book.vue It provides the bookTitle data to the title ..
Vue : Scoped Slots - Part1 Slots allow developers to have the flexibility to provide content to a child component. 슬롯을 사용하면 개발자가 child component에 콘텐츠를 유연하게 제공할 수 있습니다. but What happens when the child component has control of the data? 하지만 하위 구성 요소가 데이터를 제어하면 어떻게 되나요? when we want to access data from the child, standard slots will not give us permission to grab that data. 하위 항목의 데이터에 액세스하려고 할 때 표준 슬롯은 해당 데이터를 가져올 수 있는 권한이 ..
Vue : Slots: Techniques What if you need to define multiple slots? you need a component to have the ability to receive content in multiple slots. 여러 슬롯에서 콘텐츠를 받아들일 수 있는 구성 요소가 필요합니다. To accomplish this, you need to understand two concepts: named slots and template blocks. 이를 달성하려면 named slots과 템플릿 블록이라는 두 가지 개념을 이해해야 합니다. What are named slots? Named slots are a way to configure your slots so that they are unique from o..
Vue - Global and Per-Route Guards use Global and Per-Route Guards to provide a progress bar when our application has slow internet API calls. 애플리케이션에 느린 인터넷 API 호출이 있을 때 진행률 표시줄을 제공하려면 전역 및 경로별 가드를 사용하세요. Problem: Our API calls might not always be super fast Solution #3: Global and Per-Route Guards /src/router.js use two new Global Route Guards inside our router.js and make the progress bar appear on every page of our app. route..
Vuex : Success & Error Notifications Success & Error Notifications Add notifications to our Vuex store when things like errors and successful actions occur. 오류나 성공적인 작업이 발생하면 Vuex 스토어에 알림을 추가하세요. Display those notifications within our UI. UI 내에 해당 알림을 표시합니다. Problem: Need to Log and Display Notifications need a way to log them so we can share that state across our application. 애플리케이션 전체에서 해당 상태를 공유할 수 있도록 로그하는 방법이 필요합니다. Solution: ..
Vuex - Modules Modules As our application gets bigger, we’re going to end up with a gigantic store.js file. This is where Vuex modules come in, allowing us to keep our Vuex code organized and easier to test. 애플리케이션이 커질수록 거대한 store.js 파일이 생성될 것입니다. 여기가 Vuex 모듈이 필요한 부분으로, Vuex 코드를 체계적으로 유지하고 테스트하기 쉽게 해줍니다. Problem: We need to organize our code Solution Vuex has an option called modules which makes it simple to s..
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: 사용자가 이벤트에 등록한 후 이벤트 페이지로 ..