음악, 삶, 개발

v-tooltip v-click-outside vue-select vue-js-modal vue-slider-component vue-color popper.js vue-draggable-resizable vue-awesome-swiper github.com/annaneo/pianoKeyboard codepen.io/zastrow/pen/oDBki

Vue 의 모든 컴포넌트의 re-rendering은 props 가 아닌 state 가 변경되었을때 일어난다. props 는 결국 사용자가 넘기는 값들일 뿐이고, 결국 state 가 이 props 를 받아 원하는 방식으로 사용하는것이다. 사용자가 런타임상태에서 props 를 변경했을때, 리랜더링이 발생하게할려면, computed() 를 반드시 사용해야한다. 그래야면 변한 props 가 state 를 다시 변경하게되고, 결과적으로 리랜더링시켜주는것이다. 만약 처음 웹페이지가 열리고 나서, 절대 리랜더링하지않을 컴포넌트라면 computed 가 필요하지않다. {{ state.isActive }}

Lee : 이 포스팅은 지속적으로 업데이트 되어야합니다. (마지막 업데이트 : 2020.12.7) v3.vuejs.org/guide/component-slots.html#slot-content Vue 는 여러 컴포넌트 (.vue 파일) 들을 직접 만들고, 이들을 레고처럼 조립해나가는 방식이다. 이때 2가지 상황이 존재한다. 위와 같은 상황은 우리가 예상한대로 동작을 한다. div 는 내가 만든 컴포넌트가 아니라, HTML 에서 제공하는 컴포넌트이다. 하지만 이게 div 가 아닌 내가 만든 컴포넌트라면? 내가 만든 컴포넌트안에 또 다시 내가 만든 컴포넌트를 집어넣었다. 기본적으로 이렇게 하기위해서 필요한것이 태그이다. 태그는 부모가 자식이 들어오기를 기대하는 위치..

모든 Component 들간에 하나의 저장소 Vuex npm mitt import mitt from 'mitt' const emitter = mitt() // listen to an event emitter.on('foo', e => console.log('foo', e) ) // listen to all events emitter.on('*', (type, e) => console.log(type, e) ) // fire an event emitter.emit('foo', { a: 'b' }) // clearing all events emitter.all.clear() // working with handler references: function onFoo() {} emitter.on..

v3.vuejs.org/guide/events.html#mouse-button-modifiers 우리는 마우스 이벤트 함수가 호출될때 마우스의 어떤 버튼이 눌렸는지 구분해야할때가 있다. 보통은 아래와 같이 구현을 한다. function mousedown(e) { if (e.button === 0) { /* left button */ } else if (e.button === 1) { /* middle button */ } else if (e.button === 2) { /* right button */ } } 마우스 이벤트 함수는 콜백 함수인데, 이때 인자로 event 객체를 넘기게 되고 이 event 객체의 button 프로퍼티를 사용하여 어떤 버튼이 눌렸는지..

v3.vuejs.org/guide/class-and-style.html 여기저기 손봐야할곳이 꽤나 있지만, 근사한걸 만든것같은 기분이다. 하나의 컴포넌트로 사용자가 던지는 props 에 따라, 라벨, 버튼, 토글 버튼 3가지의 모습을 가질수있다. 내부적으로 변수명이나 함수명의 변경이 조금 필요할것같다. 또한 버튼 type 이 label 인 경우 조금 구분되는 css 가 필요할것같다. 정말 많은것을 배웠다. 1. 다이나믹 event 바인딩 v-on:[state.eventName] ="toggleActive" 이게 필요한 이유는, 버튼 타입이 label 이거나 one 인 경우, 이벤트 리스너가 필요없기때문이다. 이때는 [ ] 안에 null 을 던지면 이벤트 리스너가 등록되지않는다. 2. 다..

https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/ https://neumorphism.io/#ffffff https://codepen.io/sdthornton/pen/wBZdXq https://gist.github.com/teddykishi/3eba129cc0fc7d7cbdce02aabfbc8858 .button { width : 300px; height : 300px; border-radius : 20px; background : #171717; box-shadow : -1px -1px 4px rgb(60, 60, 60), 8px 8px 8px rgb(10, 10, 10); /* te..

button 태그를 사용하지않고도 div 로도 button 을 만들수있다. :active 클래스를 추가하게되면, 마우스가 눌렸을때 일어날 변화를 설정할수있다. .rect { background-color: red; } /* mouse 가 눌렸을때 */ .rect:active { background-color: green; }

developer.mozilla.org/ko/docs/Web/CSS/box-shadow CSS 의 box-shaow 속성은 해당 요소의 하단 레이어를 만들어주는 속성이다. box-shadow 의 값으로는 5가지가 들어갈수있다. .rect { background-color: red; box-shadow: 50px /* x */ 10px /* y */ 0px /* blur */ 0px /* spread */ blue; /* color */ } 반드시 위의 값 순서를 맞춰야한다. x, y, blur, spread, color 순이다. 여기서, 값의 가장 앞에 inset 을 추가하게되면 inner layer 가 된다. .rect { box-shadow: inset 50px /* x */ 10p..