반응형 VueJS/VueJS46 [VueJS] Vue에서 페이지 새로고침 하기 Vue에서 페이지 새로고침하기 VueJS를 사용했다면 SPA(Single Page Appclication) 방식으로 개발을 진행했다고도 할 수 있는데, 이럴 경우에는 일반적으로 location.href/reload 같은 방식의 새로고침은 권장하지 않는다. 이전에 작성했던 글 중에 라우터 관련한 글이 있었는데 그 방법을 활용할 것이다. https://mine-it-record.tistory.com/661 [VueJS] 라우터(Vue Router) push/replace/go - 프로그래밍 방식 페이지 전환 사용하기 Programmatic Navigation 프로그래밍 방식 내비게이션은 를 사용하여 선언적 내비게이션을 사용하기보다는 라우터의 인스턴스 메서드를 사용하여 프로그래밍으로 동일한 기능을 수행할 수 .. 2023. 3. 7. [VueJS] Deep Selectors 사용하여 자식 컴포넌트의 스타일 정의하기 자식 컴포넌트 스타일 정의하기 VueJS 기반의 프로젝트를 진행하게 되면 스타일 캡슐화를 사용하여 각 컴포넌트별로 어떤거를 사용해도 상관은 없지만 첫 번째 방식의 경우 Sass 같은 전처리기에서 인식이 안된다 한다. 그럼에도 ::v-deep 방식을 많은 사람들이 추천하는 모양이다. 하지만 ::v-deep 역시 Vue 3에서는 사용방법이 바뀌었으니 Vue버전을 변경한다면 주의해야 한다. Vue3 버전에서는 v-deep을 다음과 같이 사용하라고 github 문서에 나와있다. ::v-deep(.bar) {} 스택오버플로우를 살펴보면 vue 2.7 이상에서는 위와 같은 방식을 사용해야 한다고 한다. 그리고 공식문서를 살펴보니까 아래와 같은 방식으로도 사용한다. :deep(.bar) {} 실제로 Vue 3 환경에.. 2023. 1. 30. [VueJS] 믹스인(Mixins) 사용하기 Mixins VueJS를 사용하게 되고 규모가 점차 커진다면 한 번쯤은 접해볼 수밖에 없는 믹스인(Mixins)에 대해 알아보자. 믹스인(Mixins)은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하기 위해 사용하는 방법이다. 하지만 Composition API의 등장으로 믹스인을 굳이 사용할 필요가 없어졌다. 그래서 이 글은 Vue3 버전을 사용하지 않으며, Composition API를 사용하지 않고 Composition API를 사용함에도 믹스인을 혼합해서 사용하는 경우에만 보면 도움이 될 것이다. 아 물론 Vue3의 안정화가 이미 이루어 졌지만 아직은 우리나라에서 Vue3가 많이 사용되지는 않는 듯 하니 알아두면 좋다. 사용 방법은 매우 간단하다 Vue의 속성중에 mixins.. 2023. 1. 29. [VueJS] plugin 활용하여 Infinite scroll 구현하기 Infinite scroll 일명 무한스크롤이라고도 하는데, 보통 무한스크롤을 구현하는 데 있어서 onScroll, Intersection Observer API를 사용하여 만들고는 한다. 하지만 이왕 VueJS를 사용하는김에 사용하기 유용한 플러그인이 있을 거 같아서 플러그인 기반으로 무한스크롤을 만들어 보고자 한다. vue-infinite-loading VS vue-infinite-scroll vuejs에서 무한 스크롤 관련 플러그인을 찾아보면 일반적으로 저렇게 두 개의 플러그인이 나온다. 이왕 선택하는 거 더 좋은 거 선택하고 싶어서 이것저것 비교해 보았다. vue-infinite-loading / vue-infinite-scroll 사용방법 둘의 사용방법은 그렇게 어려운 거 없이 매우 간단해 보인.. 2023. 1. 6. [VueJS] watch 와 watchEffect 비교 vue3 공식문서를 기반으로 watch와 watchEffect를 비교해보고자 한다. 사실 이 게시글을 작성하기 이전에 [VueJS] computed와 watch 속성 비교라는 게시글을 작성한 적이 있는데, 여기서 watch를 다룰 때 지금 보다 공식문서가 좀 허접(?) 했던 시절에 작성하다 보니 꼼꼼하게 담아내질 못했던 기억이 있다. 마침 이번에 vue3에서 새롭게 생긴 watchEffect와 같이 비교할 겸 정리하려고 한다. watch() watch 속성은 "특정 데이터"의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성이다. watch라는 속성은 vue2에서부터 계속해서 존재했던 속성이기에 익숙하지 좀 더 개선되었으며, options api, composition api 어느 곳에서나 사용이 가.. 2022. 12. 26. [VueJS] 라우터(Vue Router) push/replace/go - 프로그래밍 방식 페이지 전환 사용하기 Programmatic Navigation 프로그래밍 방식 내비게이션은 를 사용하여 선언적 내비게이션을 사용하기보다는 라우터의 인스턴스 메서드를 사용하여 프로그래밍으로 동일한 기능을 수행할 수 있는 방식이다. 개발을 하는 동안에 만 사용하면 좋겠지만 그렇지 않은 경우도 상당히 많기 때문에 아마 Vue Router를 사용하게 된다면 이러한 방식을 사용하게 될 것이다. 만약 VueJS가 Options API를 사용하고 있다면 Vue 인스턴스 내부에서 this.$router를 통해 접근할 수 있겠지만, 요즘은 Composition API를 많이 사용하기 때문에 Composition API의 경우에는 useRouter()를 사용해서 접근한다. (애초에 setup단계에서는 this접근이 불가능하기 때문에 Comp.. 2022. 11. 8. [VueJS] v-memo : 특정 요소가 변경될 때만 렌더링 하기 (메모이제이션) v-memo VueJS의 전체적인 버전들이 3.x로 변경되어가는 현재 나중을 위해 변화에 적응해보고자 시간이 날 때마다 공식문서를 뒤적거리던 와중에 v-memo라는 게 Deriectives의 하나로 추가되어있는 것을 발견했다. 굉장히 흥미로운 지시어이지만 안타깝게도 현재 사용하는 Vue 버전이 3.2이상이 아니라면 사용할 수 없다. 내가 왜 v-memo라는 지시어를 흥미롭게 보냐면 React에서 React.memo, useMemo, useCallback라는 리렌더링을 방지하기 위해 메모이제이션을 사용하는 훅들이 존재했기 때문이다. 여기서 메모이제이션을 사용하게 되면 동일한 입력이 주어졌을 경우 재평가하지 않고 함수가 동일한 값을 반환하도록 하여 성능을 위해 프로그램을 최적화하는 기술이라고 할 수 있다. .. 2022. 11. 5. [VueJS] 뷰 라우터(Vue Router) 라이프사이클(LifeCycle) (ft. Navigation Guards) Vue Router LifeCycle 뷰 라우터 라이프사이클 이라고는 했지만 결국에는 뷰 라우터의 내비게이션 가드(Navigation Guards)의 흐름이라고 생각하면 된다. 공식문서에서 안내하고 있는 전체적인 흐름은 다음과 같다. Navigation triggered. Call beforeRouteLeave guards in deactivated components. Call global beforeEach guards. Call beforeRouteUpdate guards in reused components. Call beforeEnter in route configs. Resolve async route components. Call beforeRouteEnter in activated comp.. 2022. 11. 3. [VueJS] 리스트 렌더링(v-for) 에서 key를 사용하는 이유 v-for에서 key를 사용하는 이유는 뭘까? 우선 key의 역할은 반복되는 내용을 하나로 관리하기 위해 사용되는 유니크한 값이다. 그 유니크한 값이 새 노드 목록을 이전 목록과 비교하기 위한 힌트로 제공된다. 좀 더 자세히 알아보기 위해 공식문서에서의 설명을 한번 살펴보자. Vue가 v-for로 렌더링 된 요소 목록을 업데이트할 때 기본적으로 "in-place patch" 전략을 사용합니다. 데이터 항목의 순서가 변경된 경우 항목의 순서와 일치하도록 DOM 요소를 이동하는 대신 Vue는 각 요소를 제자리에 패치하고 특정 인덱스에서 렌더링 되어야 하는 항목을 반영하는지 확인합니다. 이 기본 모드는 효율적이지만 목록 렌더링 출력이 하위 구성 요소 상태 또는 임시 DOM 상태(예: 양식 입력 값)에 의존하지.. 2022. 10. 26. 이전 1 2 3 4 ··· 6 다음 반응형
