음악, 삶, 개발

MDN : preserveAspectRatio stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container 복잡한 모양을 순수 CSS 에서 만들어내는것은 꽤나 고통스러운일이다. 따라서 SVG 를 HTML 에서 사용하는 방법을 다루어보고자한다. 나는 Vue 를 사용하고있기때문에, Vue 에서 사용법을 다루겠다. 1. 일러스트레이터에서 Cmd + C (복사) ---> VSCode 에서 Cmd + V (붙여넣기) 위와 같이 일러스트레이터에서 VScode 로 복사 붙여넣기를 할수있다. 이때 중요한것은 독립된 .vue 파일을 만들고 안에 붙여넣기하는것이다. 2. svg 안에 style 태그안에 내..

www.npmjs.com/package/p5 Youtube : Instance mode (a.k.a name spacing) Instance container p5.js 는 HTML5 의 를 엄청나게 확장해주는 그래픽 라이브러리이다. 물론 가 기본적으로 제공하는 함수들만으로도 그려볼수있겠지만 복잡한 도형들을 그려낼려면 엄청난 노가다를 해야한다. p5.js 가 제공하는 수많은 함수들을 사용하면, 훨씬 더 우아한 그림들을 그려낼수있다. 구글에서 p5 를 vue 에서 사용하는 것을 검색했을때, 결과가 거의 나오지않았다. 나오더라도 vue 3 의 composition api 를 사용하지않은 예제들이 대부분이었다. 그래서 ..

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

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. 다..