개발과 일상 사이

화면을 구성할때 반드시 잡아놓는것... 바로 레이아웃이다. 흔히들 말하는 GNB, LNB, 컨텐츠 등등... 아무튼 화면개발 하게되면 이건 무조건 잡고 가는거다 Nuxt 에서는 간편하게도 layouts 라는 디렉토리를 통해 화면별 사용할 레이아웃들을 만들어 둘 수가 있다. 레이아웃은 크게 3가지 종류가 있다고 내가 맘대로 정했다 1. default 레이아웃 말그대로 모든 화면에 적용되는 default 레이아웃이다. 파일명을 default.vue 로 만들면 그것이 디폴트 레이아웃이 된다. 예시로 든 Header 와 Footer 는 실제로 만들어둔 컴포넌트이며, Nuxt 컴포넌트에서 화면 routing 이 일어난다. 즉 화면의 상단과 하단에 공통적으로 항상 출력되는 컴포넌트가 있을 때, default.vue..

근본없는 개발자가 무작정 개발하고 테스트하려니 매번 별것도 아닌 곳에서 막힌다. 아래와 같은 코드가 있다고 하자. Vue.component('example', { template: '{{ value }}', data () { return { value: false } }, methods: { onButtonClick () { this.$router.push('home') } } }) 버튼을 클릭하면 $router.push 가 호출되는 간단한 예제이다. 단, 버튼에는 disabled 속성이 value 라는 변수와 바인딩 되어있다. 만약 value에 true 를 주게되면 당연히 버튼은 활성화 될 것이다. 그렇다면 아래와 같은 테스트코드를 짤 수 있다. (mount 부분은 생략하겠다.) wrapper.setD..

데이터가 변경되면 Vue는 해당 데이터가 변경된 것을 감지하여 화면을 다시 렌더링한다. 그런데 문제는 배열과 오브젝트에 대해서는 변경을 감지하지 못할 수도 있다. 일단 예를 하나 들어보겠다. Click Me! {{ item }} 버튼을 누르면 testArr 의 4번째 인덱스 값을 바꾸는 로직이다. 그런데 버튼을 눌러보면, 실제로 데이터는 로직대로 바뀌었지만 화면이 갱신되지 않는다. (물론 $forceUpdate 로 화면을 강제로 갱신해버릴수는 있다.. ) Vue는 배열의 특정 메소드들을 래핑하여 해당 메소드의 호출이 있을때 변화를 감지하고 화면을 갱신한다. push() pop() shift() unshift() splice() sort() reverse() 위의 메소드들을 실행해보면, 화면 갱신이 자동으..