음악, 삶, 개발

매번 .vue 파일에 내가 만든 scss 를 import 하는것은 매우 귀찮은일이다. 다행히 global 로 scss 를 추가하는법은 생각보다 간단했다. main.js 에 해당 파일을 import 해주면 된다. /* main.js */ import { createApp } from 'vue' import App from './App.vue' import './index.css' import './dev/scss/leestrument.scss' // 내가 만든 scss! createApp(App).mount('#app') 이렇게 되면, 모든 .vue 파일에서 import 없이 scss 로 만든 클래스들을 접근할수있다.

설치는 매우 간단하다. npm install -D sass 바로 사용하면 된다. Hello! Hello! Hello! Hello! 당연히 파일로 분리하고, import 할수있다. /* test.scss */ $len : 100; @for $i from 1 through $len { .test-#{$i} { color : yellow; font-size : $i + px; } } Hello! Hello! Hello! Hello!

jakearchibald.github.io/svgomg/ 위의 사이트에서 추출. 코드

말도 안된다 이건. C++ 하다가 css 도 이미 편하다고 생각했지만 이건.... 3줄에 끝났다. 왜 Vue 를 써야하는지..왜 CSS 프레임워크를 써야하는지 깨달았다.

$ npm init vite-app $ cd $ npm install $ npm run dev Vite 는 Vue 에서 제공하는 개발환경이다. 기존에 Vue-Cli 를 사용하였는데, Vite 를 쓰면 컴파일시간이 훨씬 빨라진다. v3.vuejs.org/guide/installation.html#vite tailwindcss.com/docs/guides/vue-3-vite www.youtube.com/watch?v=W6V9Z-FUEG8&t=177s www.youtube.com/watch?v=uBBvuA3b6kU

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

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 가 아닌 내가 만든 컴포넌트라면? 내가 만든 컴포넌트안에 또 다시 내가 만든 컴포넌트를 집어넣었다. 기본적으로 이렇게 하기위해서 필요한것이 태그이다. 태그는 부모가 자식이 들어오기를 기대하는 위치..