Custom Plugin

보호되어 있는 글입니다.

2024.02.02

LoadingSpinner | EventBus

보호되어 있는 글입니다.

2024.01.31

Navigation Guard

Navigation Guard 네비게이션 가드는 특정 URL에 접근(Navigation) 하기 전에 불려지는 (Hook)의 일종으로, 다른 페이지로 우회 하거나 접근 자체를 취소시킬 수 있기 때문에 네비게이션 가드라고 불립니다. 사용자의 권한에 따라 페이지 접근을 막거나 페이지를 로딩하기 전에 데이터를 미리 불러올 때 사용하기 좋은 기술입니다. 사실상 싱글 페이지 어플리케이션을 구현할 때는 거의 필수로 구현해야 합니다. 네비게이션 가드 종류 네비게이션 가드의 종류는 적용되는 위치, 범위에 따라서 전역, 지역, 컴포넌트 3가지로 나뉩니다. 전역 가드 전역 가드는 모든 라우팅에 적용되는 네비게이션 가드입니다. 라우터의 beforeEach라는 메소드를 통해 전역가드의 로직을 설정할 수 있습니다. 아래는 전역 ..

2024.01.31

mixin | Component recycling

mixin 믹스인은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법입니다. 믹스인에 정의할 수 있는 재사용 로직은 data, methods, create 등과 같은 컴포넌트 옵션입니다. 믹스인 코드 형식 믹스인을 주입 할 컴포넌트에 mixins 속성을 선언하고 배열 [] 안에 주입할 믹스인들을 추가합니다. src/mixins/ListMixin.js import EventBus from '@/utils/EventBus'; // mixin export default { // 재사용할 component option & logic | data, methdos, create 등... created() { EventBus.$emit('start:spinner'); this.$store ...

2024.01.31

HOC | high order component | Component recycling

HOC (high order component) 뷰의 하이 오더 컴포넌트는 리액트의 하이 오더 컴포넌트에서 기원된 것입니다. 리액트의 하이 오더 컴포넌트 소개 페이지를 보면 아래와 같이 정확한 정의가 나와 있습니다. A higher-order component (HOC) is an advanced technique iin React for reusing component logic. 이 말을 정리해보면 다음과 같습니다. 하이 오더 컴포넌트는 컴포넌트의 로직(코드)을 재사용하기 위한 고급 기술입니다. 반복되는 컴포넌트 로직 여기서 커포넌트 로직을 재사용한다는 말은 무슨 의미일까요? 이 표현에서 가리키고 있는 컴포넌트 로직이란 뷰에서 인스턴스 옵션을 의미합니다. 컴포넌트 들에서 공통적으로 들어가는 인스턴스 ..

2024.01.31

Vuex, 헬퍼, 모듈화

보호되어 있는 글입니다.

2024.01.25