담백한 웹 개발 이야기

Nuxt 기반한 프로젝트에서 vue/eslint-plugin-vue를 사용중이다. prettier 를 사용하려고 검토하는 도중 우연히 vue/eslint-plugin-vue에 룰이 많다는 것을 알게 되었다. 초기 세팅 시에 잡혀있는 plugin:vue/recommended는 굉장히 약한 수준의 룰이다. eslint-plugin-vue를 참고해서 아래와 같이 룰을 수정했다. 1. rules에 prettier로 작업했던 유사한 룰을 추가했다. 2. 기본룰 수준을 plugin:vue/recommended에서 plugin:vue/strongly-recommended로 변경했다. module.exports = { root: true, env: { browser: true, es6: true }, plugins: ..

파트별 구현 옵져버 const obj = {}; Observer(obj, 'counter', (newValue, oldValue) => { console.log('LOG:', newValue, oldValue) }); obj.counter = 0; obj.counter = 1; // LOG: 0 undefined // LOG: 1 0 const Observer = (obj, property, callback) => { let value = obj[property]; Object.defineProperty( obj, property, { configurable: true, enumerable: true, set: (newValue) => { callback(newValue, value); value = n..

이 글은 2020.02.29에 Composition API RFC 번역에 작성된 내용 요약과 Vue Mastery에서 확인할 수 있는 Composition API 관련 영상을 정리한 내용입니다. Composition API란 Composition API는 Vue 컴포넌트의 로직을 유연하고 구성하기 위한 API입니다. Vue 2.x에 추가 가능하고, Vue 3.0에서는 내장으로 제공할 함수기반 API 세트입니다. 가장 기본이 되는 API는 ref와 reactive입니다. 먼저 ref는 프리미티브 타입을 반응형 상태로 만들 수 있습니다. const count = ref(0) console.log(count.value) // 0 count.value++ console.log(count.value) // 1 그..