프론트 엔드 개발 기록

Computed 인자 값을 받지 않음 (가능하긴 하나 인자 값을 받으면 computed의 특장점인 캐싱 기능이 없어지기 때문에 권장되지 않음) 주로 기존 데이터를 재조립, 계산해서 template에서 사용하는 용도 캐시가 저장된다. computed 속성에서 사용된 데이터와 연결되어 값이 변할때만 재실행된다. Methods 인자 값을 받을 수 있음 주로 이벤트 발생에 따른 기능들, 반복되는 로직들을 묶을 때 사용 캐시가 저장되지 않는다. methods 속성에서 사용된 데이터와 연결되지 않아, update라이프 사이클이 동작할때마다(특정 변수가 바뀔 때마다) 재실행된다. 참고 https://stackoverflow.com/questions/40522634/can-i-pass-parameters-in-comp..

블로그가 이관되었습니다! https://yemsu.github.io/vue-devtools-not-detected-vue3 Vue3 Vue.js devtools - not detected Vue.js devtools - not detected 이슈 해결 yemsu.github.io

블로그가 이관되었습니다! https://yemsu.github.io/vue3-router Vue3 Router 사용하기 (+ 동적 라우팅) Vue CLI에서 Router를 설치하고 사용합니다. 각 옵션에 대한 내용과 함께 동적 라우팅도 설정합니다. yemsu.github.io

api호출은 정상적으로 잘 되는데 자꾸 빨간 콘솔에러가 떠있어서 너무 거슬렸다. axios__WEBPACK_IMPORTED_MODULE_2___default.a.get(...).then(...).error is not a function 구글링 해봐도 같은 케이스가 찾기 힘들어서 봤더니 .error로 써놨다. .catch로 바꿔주니까 콘솔창 깔꿈! fetchList(type) .then(response => commit(`SET_LIST`, {data: response.data, type})) .error(error => console.log(error)) //.error를 .catch로 바꿔야함

mode: 'history' 를 아래 예시와 같이 라우터 설정에 넣어 준다. export const router = new VueRouter({ mode: 'history', // #값 제거 설정 routes: [ { path: '/news', component: NewsView, } ] })

블로그가 이관되었습니다! https://yemsu.github.io/vue-cli-working-with-sass Vue CLI Sass 사용하기 Vue CLI에서 Sass를 설치하고 Global Sass까지 적용해봅니다. yemsu.github.io

부모 컴포넌트에 정의되어 있는 method를 자식 컴포넌트에서 사용하고 싶을 때. props로 해당 method를 받아 사용한다. *Parent 컴포넌트 *Child 컴포넌트 getParentMethod(parentMethod)