frontend/vue&nuxt
-
[VueJS] Vue2 watch를 통해 중첩 데이터 감지하고 변경된 데이터 확인하기frontend/vue&nuxt 2023. 1. 18. 19:12
오늘은 Vue를 개발할 때 자주 이용하셨던 watch에 대해서 알아보도록 합니다. vue에서 watch는 특정 데이터의 변화를 감지하여 특정 로직을 동작하게 할 때 주로 사용합니다. 성능을 위해서 자주 사용하는 건 권장드리지 않지만 꼭 사용해야될 상황이 있습니다. 오늘은 이러한 watch를 이용해 중첩 데이터를 감지하고 그 이상으로 변경된 데이터를 알 수 있는 방법을 알려드리도록 하겠습니다. 1. 기본 문법 watch: { //감지할데이터 : function(바뀐값,바뀌기전 값) obj: function (val, oldVal) { //로직 } } 기본적인 문법은 위와 같습니다. watch 내부에 감지할 데이터를 넣고 바뀐값과 바뀌기 전 값을 알고 있습니다. 하지만 이러한 구조에서는 중첩데이터를 감지할 ..
-
[VueJS] 컴포넌트간 통신을 위한 이벤트 버스 개념과 활용frontend/vue&nuxt 2022. 9. 5. 14:21
오늘은 Vue 개발할 때 자주 사용되는 것 중 하나인 컴포넌트 간 통신을 위한 이벤트버스(EventBus)에 대해서 알아보도록 하겠습니다. 보통 컴포넌트간의 통신을 위해서는 refs를 이용하여 상위컴포넌트에서 하위컴포넌트를 호출하거나 내장 이벤트버스(this.$emit)를 이용하여 하위컴포넌트에서 상위컴포넌트를 호출합니다. 개발을 진행하다보면 상위 또는 하위로 드릴링하여 들어가여 호출하고 받는 것이 아니라 직접적으로 컴포넌트의 이벤트를 실행하고 싶은 경우가 있습니다. 이럴 경우 우리는 EventBus라는 것을 사용하게 됩니다. 자세한 내부 코드가 궁금하면 vue 공식 github 링크에 들어가셔서 확인하실 수 있습니다. github 코어 코드를 보다보면 배우는게 많으니 시간날때 core부터 찬찬히 보면 ..
-
[VueJS] Vue2 업데이트 시작 Vue2.7 Naruto 공식 릴리즈frontend/vue&nuxt 2022. 9. 2. 09:54
오늘은 멈춰있던 Vue2를 다시 움직이게 할 Vue 2.7 공식 릴리즈 Naruto에 대해서 알아보겠습니다. 기존의 Vue 2.6에서의 변경점과 Vue3와의 차이점에 대해서 알아 보겠습니다. Vue3로 넘어가기 위해서 파격적으로 공식적으로 Vue3를 지원하기도 하고 많은 변화들이 있었는데 Vue2에서도 Vue3의 기능을 사용할 수 있게 2.7 릴리즈가 된다고 알고 있었는데 드디어 되었습니다. 사내에선 Vue2 기반으로 프로젝트가 진행되었었는데 Vue3로 마이그레이션을 진행해야될지 고민하던 찰나에 2022 7월에 Naruto가 나와서 일단은 Vue2에서 최신버전으로 올리겠습니다. 올리면서 알게된 변경점들에 대해서 말씀드리겠습니다. 바뀐점(2.7 release) 어차피 vue3를 사용하신분이라면 다들 아실 ..
-
[VueJS] 적응형 모바일 - 태블릿 멀티 디바이스 환경 구축기 (구조 편)frontend/vue&nuxt 2022. 4. 5. 17:10
오늘은 제가 작년 이 맘때쯤 진행했던 Vue 멀티 디바이스 환경 프로젝트에 대해서 얘기해보려고 합니다. 일단 제게 주어진 상황은 다음과 같았습니다. 짧은 개발기간 재구축건으로 AS-IS가 있음 프론트엔드 개발자 단 1명..(본인)..분량 많음 반응형 웹이 아닌 적응형 웹으로 분기 ( 모바일과 태블릿의 화면 depth 차이) 이러한 상황이였기 때문에 최대한 빠른 시간내에 정확히 많은 양을 처낼 수 있는 방법이 필요했습니다. 위와 같은 조건으로 인해 반응형으로도 개발할 수 없었기 때문에 저는 다음과 같은 방법을 생각했었습니다. 이 방법이 정답이 아니며 그냥 여러 방향중 가능성 있는 하나 정도로 보시면 될 것 같습니다. 그럼 제가 진행했던 방식과 그렇게 진행한 이유에 대해서 천천히 살펴보도록 하겠습니다. 1...
-
[VueJS] Vue의 새로운 상태 관리 : Pinia (피니아 간단 사용법)frontend/vue&nuxt 2022. 3. 17. 17:20
오늘은 Vue3에서 추천하는 상태관리 라이브러리인 Pinia에 대해서 얘기해볼까 합니다. 이때까지 Vue의 상태관리하면 당연하게도 Vuex를 떠올리곤 했는데 작년에 컨퍼런스에서 류에반씨가 직접 Pinia를 추천했었습니다. 메인테이너가 직접 추천하는 상태관리 툴은 알고 있으면 좋을 거라고 생각하며 글을 써봅니다. 우선 Pinia를 쓰기전에 그럼 Vuex는 이제 끝인가요? 라고 물으신다면 그건 또 아닙니다. Vuex의 다음버전인 Vuex5와 Pinia사이의 전환이 매우 쉬울 것이라고 말했으니 그냥 피니아라는 선택지가 하나정도 더 늘었다고 생각하면 될 것 같습니다. React처럼 이제 Redux, Mobx, Recoil 골라 잡듯이.. 이제 Vue도 상태관리 고르는 재미...?가 있을 것 같습니다. 1. Pi..