본문 바로가기

👓Vue4

[Vue]Want Reuse? Use Composables, 재사용에는 믹스인 대신 컴포저블 Intro 기존, 그러니까 Vue2에서는 코드를 재사용하기 위한 방법으로 Mixin(믹스인)을 활용했습니다. Vue3로 넘어오면서 Mixin을 대체하는 Composables이 생겼습니다. Vue3 공식 문서에서는 Mixin 대신 Composables를 사용하기를 추천하고 있습니다. 하지만 생각보다 Composables를 소개해주는 문서(혹은 글)가 한국어로 된 건 없더군요. 아직 Vue3는 한국에서 사용하시는 분들이 조금 적은 게 아닌가 싶네요. 어쨌든 공식 문서를 요약하는 글이겠지만 Composables에 대해서 주저리주저리 떠들어보겠습니다 Result // App.vue Mouse position is at: {{ x }}, {{ y }} ... // mouse.js import {onMounted,.. 2022. 5. 12.

[Vue]Pass Object as Router Params, 라우트 파라미터로 오브젝트 넘기기 Intro Vue에서는 다른 페이지로 이동하기 위해 Vue Router를 사용합니다. Router를 사용하다 보면 단순히 페이지만을 옮기는 게 아닌 데이터도 함께 옮기고 싶은 때가 있습니다. 그럴 때를 위해 query와 params를 Vue Router는 준비해 두었죠. 하지만 요게 요게 맘대로 안 될 때가 있습니다. 바로 Object 형식의 데이터를 옮기고 싶을 때 말이죠. Result // PUSH const router = useRouter() router.push({ name: 'xxx', params: { 'A': JSON.stringify({ stringify: 'JSON.stringfy', GOOD: 'So GOOD!!!' }) } }) // RECEIVE const route = useRo.. 2022. 4. 29.

[Vue]Reactivity System, 뷰에서 값이 바뀔 때 일어나는 일 Intro 안녕하세요. 개발자 위성빈입니다. 오늘은 Dynamic Components에 이어서 Vue의 Reactivity 시스템에 대해서 알아보려 합니다. 그저 머릿속에만 있는 거보단 글로 남기는 게 기억도 잘 되고, 글을 쓰면서도 더 찾아보게 되니 참 좋은 거 같아요. 하지만 역시 글을 쓰는 게 쉽진 않네요. Vue Reactivity Vue의 장점이라고 하면 꼭 등장하는게 있습니다. 바로 Data Binding입니다. Vue의 데이터 바인딩은 화면에 표시되는 값과 데이터 값이 연결이 되어 서로를 변경시키기 때문에 양방향 데이터 바인딩이라고도 합니다. 그리고 이 양방향 데이터 바인딩이 가능한 이유가 Vue의 Reactivity 시스템 덕분입니다. Vue Guide Reactivity in Depth .. 2021. 12. 26.

[Vue]Dynamic components, 내가 원할 때 내가 원하는 컴포넌트 불러오기 Intro 안녕하세요. 개발자 위성빈입니다. 최근에 Vue.js 공부를 시작했습니다. 새롭게 배운 놈이니 바로 써먹고 싶어 개인 프로젝트를 시작했죠. 프로젝트 제목은 'everything', '대시보드 위에 생각나는 모든 것을 올려보자'라는 아이디어를 바탕으로 차근차근 진행하고 있습니다. 그러다 만난 'Dynamic components', 동적 컴포넌트를 구현하면서 겪었던 것들을 오늘 적어보려 합니다. Result export default{ // ... data() { return { // ... , currentTab: 'VueRouter' } }, computed: { componentLoader() { const tab = this.currentTab return () =>import(`@/com.. 2021. 12. 26.

이전 1 다음

티스토리툴바