대가는 결과를 만든다

vue에서 this.$router.push를 이용해 페이지를 이용할 때 현재 페이지 URL과 동일한 경로로 push하는 경우에는 이와 같은 에러가 발생한다. 현재 페이지와 같은 페이지인지 체크하는 로직을 추가해서 개선이 가능하다.

Array/Object type을 vue component의 props로 사용하는 경우 default를 정의할 때, props:{ something: { type: Object,//혹은 Array default: { example: "foo", foo: "example" } } 다음과 같이 정의 하면 에러가 발생한다. 아래와 같이 정의해 주어야 한다. props:{ something: { type: Object, default: ()=> { return{ example: "foo", foo: "example" } } } }

vue로 개발 중 code splitting을 하면서 가장 기본적으로 하는 것이 router에서 혹은 component내에서 component의 dynamic import를 활용하는 것이다. import aDialog from 'Views/dialogs/aDialog';//기본 import const aDialog = import('Views/dialogs/aDialog');//동적 import 하지만 위의 동적 import 코드를 적용해도 사실 기본 prefetch 설정 때문에 실제 chunk들이 layz로드 되지 않고, 초기 로딩 시 모두 http 요청이 되고 있었다. chunk들을 가시적으로 관찰할 수 있게 다음과 같이 주석으로 chunk name을 부여할 수 있다. const aDialog = i..

react-native 처럼 vue로도 native app을 빌드할 수 있는 솔루션들도 점점 생기고 좋아지고 있다. https://nativescript-vue.org/en/docs/introduction/ NativeScript-Vue - A NativeScript plugin for building truly native applications using Vue.js A NativeScript plugin for building truly native applications using Vue.js nativescript-vue.org 참고로 weex 라는 vue로 개발할 수 있는 cross flatform framework도 있다. Alibaba에서 시작해서 현재 아파치 재단에 속해 있는 오픈소스 이..

Vue에는 slot이라는 개념이 있는데 무엇? Parent Component에서 Child Component의 Element Tag사이에 삽입하여 Child Component의 원하는 Element로 fallback해주고자 할때 사용하는 개념이다. 1. Basic Component를 다음과 같이 정의: Submit 그러면 이라는 Component를 사용할 때, Submit 다음과 같이 렌더링이 될 것이다. 하지만 전송 과같이 Component를 사용하면 전송 으로 렌더링이 된다. 앞서 말한 것처럼 Tag사이에 넣은 값을 Child Component의 Slot으로 fallback되는 것이다. 2. Named Slot *name을 정하지 않은 의 name은 "default" 이라는 Component를 다음과..

Vuex 란? Vue.js 의 상태관리 를 위한 패턴이자 라이브러리. 다른 상태관리 패턴이나 라이브러리와 비교했을 때 Vue 의 Reactivity 체계를 효율적으로 활용하여 화면 업데이트가 가능하다는 차이점이 있다. 상태관리 (State Management)의 필요성 컴포넌트 기반 프레임워크에서는 화면 구성을 위해 화면 단위를 컴포넌트로 구현하여 사용한다. 예를 들면, header, button, list 등의 컴포넌트들이 단위가 되어 한 화면에서 사용된다. 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생긴다. 달리 말해, header -> button, button -> list , button -> footer 등의 컴포넌트 간 데이터 전달 및 이벤트 통신 등의..

Grid System? - 12Point Grid System - 내용물들의 레이아웃 설정을 위해 flex-box를 사용하여 구현됨. - 특정 스크린 사이즈나 배치에 따라 5가지 유형의 미디어 BreackPoint가 포함되어 있음. (Bootstrap4의 GridSystem Options 참고) Usage 1) v-container는 fluid 속성으로 full 너비로 확장하여 중앙에 focus된 페이지로 사용할 수 있음. 2) v-layout은 v-flex를 사용하여 구별된 섹션으로 사용된다. 따라서 다음과 같은 구조로 사용됨 : v-container >> v-layout >> v-flex v-flex는 자동으로 자식들을 flex : 1 1 auto로 설정된다. 3) property를 자동으로 clas..

렌더링이란?: 요청받은 내용을 브라우저 화면에 표시하는/그리는 작업. 과정- 서버로부터 데이타를 응답받아 Parsing하여 DOM트리 생성- DOM 트리가 구축되는 동안 브라우저는 Render 트리 구축- CSS 설정 및 위치 지정- Render 트리가 그려짐 1. SSR (Server Side Rendering) - 전통적인 웹 어플리케이션 방식으로, 요청시 마다 서버에서 처리하여 새로고침으로 페이지 응답 - 웹에서 기능과 데이터가 많아지면서 SPA(Single Page Application)이 생김 , 더 향상됨 UX를 위함 1-1) MPA (Multi Page Application) - page = html 2. CSR (Client Side Rendering) - 클라이언트에서 Javascript..