반응형

2022/08/07 5

65. UX를 고려한 데이터 호출 시점

데이터 호출 시점 1. 라우터 네비게이션 가드 - 특정 URL로 접근하기 전의 동작을 정의하는 속성(함수) - beforeEnter : to, from, next 3개의 인자를 받음 import Vue from 'vue' import VueRouter from 'vue-router' import NewsView from '../views/NewsView.vue' import AskView from '../views/AskView.vue' import JobsView from '../views/JobsView.vue' import ItemView from '../views/ItemView.vue' import UserView from '../views/UserView.vue' // import create..

vue.js/vue.js 2 2022.08.07

64. <vue-news> 프로젝트 | Mixins (여러 컴포넌트 간에 공통으로 사용되고 있는 로직, 기능들을 재사용하는 방법)

믹스인은 여러 컴포넌트 간에 공통으로 사용되고 있는 로직, 기능들을 재사용하는 방법입니다. 믹스인에 정의할 수 있는 재사용 로직은 data, methods, created 등과 같은 컴포넌트 입니다. 믹스인 코드 형식 var HelloMixins = { //컴포넌트 옵션 (data, methods, created 등) }; new Vue({ mixins: [HelloMixins] }) 위와 같이 믹스인을 주입할 컴포넌트에 mixins 속성을 선언하고 배열 [] 안에 주입할 믹스인들을 추가합니다. routes 폴더 import Vue from 'vue' import VueRouter from 'vue-router' import NewsView from '../views/NewsView.vue' import..

vue.js/vue.js 2 2022.08.07

63. <vue-news> 프로젝트 | 컴포넌트의 코드마저 재사용하는 하이 오더 컴포넌트

vue의 하이 오더 컴포넌트는 리액트의 하이 오터 컴포넌트에서 기원된 것입니다. 리액트의 하이 오더 컴포넌트 소개 페이지를 보면 아래와 같이 정확한 정의가 나와 있습니다. A higher-order-component (HOC) is an advanced technique in React for reusing component logic. 이 말을 정리해보면 다음과 같습니다. 하이 오더 컴포넌트의 컴포넌트의 로직(코드)을 재사용하기 위한 고급 기술 입니다. 1. 공통적으로 사용하는 로직을 컴포넌트 하나에 올리고 2. 그 컴포넌트를 내려받아 사용 routes 폴더 import Vue from 'vue' import VueRouter from 'vue-router' import ItemView from '....

vue.js/vue.js 2 2022.08.07

[vue.js] Error : vue/multi-word-component-names

구성 요소 이름 "스피너"는 항상 다중 단어 vue/multi-word-component-name이어야 합니다. 라는 error가 떴다. 이 에러는 Eslint와 같이 사용할 때 발생하는 에러인데, vue에서 component명을 만들 때 반드시 단어의 조합(CmmMenu)으로 지어야 한다는 의미이다. 이는 html 태그와 헷갈리지 않게 하려고 그렇게 설정해놨다고 한다. 해결하려면 경고메세지와 같이 컴포넌트명을 단어의 조합으로 바꿔도 되지만 이 에러가 아에 안뜨게 하려면, vue.config.js 파일에 lintOnSave: false를 추가해주면 된다. const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({..

실무/Front 에러 2022.08.07
반응형